1 00:00:02,580 --> 00:00:05,010 Now you learned how you can build your app for iOS, 2 00:00:05,010 --> 00:00:06,840 what about Android? 3 00:00:06,840 --> 00:00:09,870 Again and the official React Native docs, under guides, Android, 4 00:00:09,870 --> 00:00:14,310 you find instructions on how to publish your app to the Google Play Store and 5 00:00:14,310 --> 00:00:18,720 in the end, you can just follow the instructions you find here. 6 00:00:18,730 --> 00:00:23,890 It all starts with creating such a keystore which I already mentioned in the expo managed workflow 7 00:00:23,920 --> 00:00:27,100 but there expo did that for us on their servers, 8 00:00:27,130 --> 00:00:33,220 here we need to do that and we can do this inside of our project or on Windows as it says here, 9 00:00:33,220 --> 00:00:38,740 make sure to run this command while navigating in this folder. You can copy your keystore into your 10 00:00:38,740 --> 00:00:41,140 project thereafter or store it anywhere else. 11 00:00:41,140 --> 00:00:45,820 You will need that keystore which is generated for signing your app and for signing updates to the 12 00:00:45,820 --> 00:00:46,220 app, 13 00:00:46,300 --> 00:00:47,710 so make sure you don't lose it 14 00:00:47,740 --> 00:00:51,730 otherwise you'll not be able to rebuild your app or update your app. 15 00:00:51,760 --> 00:00:57,370 So here, you can enter an arbitrary password what you want to choose and then some information about 16 00:00:57,370 --> 00:01:03,970 you which technically could be wrong but which should be correct kind of since this is your identifier 17 00:01:03,970 --> 00:01:08,780 with instance, since this is used for assigning your app in the end 18 00:01:08,780 --> 00:01:15,820 and once you entered all this and confirmed it and you chose your passwords, this now creates this my 19 00:01:15,820 --> 00:01:23,950 upload key keystore file here and now you can use that to sign your application. Next you need to set 20 00:01:23,950 --> 00:01:29,900 up some gradle variables as you see here and for that make sure you move the key storage to the Android 21 00:01:29,960 --> 00:01:30,670 app folder, 22 00:01:30,680 --> 00:01:37,910 so from this folder here, move it up into Android and there into the app folder so that the file is there 23 00:01:39,740 --> 00:01:49,300 and then go to the gradle properties file, the Android gradle properties file. So here, under Android 24 00:01:49,300 --> 00:01:53,200 we have the gradle properties file and in there, 25 00:01:56,570 --> 00:02:04,330 you can add these entries and as it says there, replace the stars here with the password you chose for 26 00:02:04,330 --> 00:02:05,620 the keystore. 27 00:02:05,890 --> 00:02:09,250 Once you did that, you can close that file, 28 00:02:09,470 --> 00:02:15,140 you should go to the Android app build gradle file, so not build gradle here but in the app folder 29 00:02:15,170 --> 00:02:23,710 and there the build gradle file and add this configuration in the Android node as you can see. So you can 30 00:02:23,710 --> 00:02:31,980 just copy this and then here, search for the Android node which is this node, 31 00:02:34,810 --> 00:02:38,260 there you got the default config what you should not touch 32 00:02:39,740 --> 00:02:47,270 but you got your sign config where you should in the end add this release part, 33 00:02:47,720 --> 00:02:54,600 so not delete the debug part but add this release part and then under build types release, 34 00:02:54,600 --> 00:02:56,280 add this line here. 35 00:02:56,640 --> 00:03:04,720 So if we scroll down further, build types release, there we can add this line, signing config release and now you 36 00:03:04,720 --> 00:03:09,390 can generate your APK with these command, 37 00:03:09,390 --> 00:03:14,230 so by navigating into the Android folder and then by running this command. So let's do that, 38 00:03:14,230 --> 00:03:19,350 let's first of all navigate into the Android folder here with cd android and then run this gradle 39 00:03:19,360 --> 00:03:20,800 w command 40 00:03:20,800 --> 00:03:26,170 and this should now build your app and sign it for production and give you such an app bundle in the end 41 00:03:27,180 --> 00:03:29,660 which you can then upload to the Google Play Store. 42 00:03:29,670 --> 00:03:36,160 So let's wait for that to finish and once this build succeeded, you can actually take that app bundle 43 00:03:36,280 --> 00:03:39,850 which you now find under app build generated 44 00:03:43,310 --> 00:03:49,910 outputs bundle, this file here, that's your release bundle, that's what you can upload to the Google Play Store. 45 00:03:50,770 --> 00:03:55,640 For that, you can search for Google Play console and you need a Google Developer account for that which 46 00:03:55,700 --> 00:03:56,740 also costs you money 47 00:03:56,750 --> 00:04:04,670 but unlike Apple's program, it's not a subscription, it's a one-time fee of $25 and here 48 00:04:04,670 --> 00:04:09,530 in the Google Play console, you can now create a new application once you're logged in with your paid 49 00:04:09,530 --> 00:04:18,540 account, choose an app name like this, create it and then here you can manage your entire store appearance 50 00:04:18,540 --> 00:04:22,410 or entire app how it looks like and under app releases, 51 00:04:25,100 --> 00:04:33,070 there you can click on production track, production manage, create a release there and now here 52 00:04:33,070 --> 00:04:38,050 you need to upload your app bundle. Now you can click continue here with the default settings normally but 53 00:04:38,050 --> 00:04:43,420 in general, I would recommend that you dive into the Google Play Store or Google Play console documentation 54 00:04:43,730 --> 00:04:49,090 to learn all about the things you can set up here but in the end, this is now where you can upload the 55 00:04:49,090 --> 00:04:51,270 bundle which you built. 56 00:04:51,400 --> 00:04:57,130 So here, you would upload this bundle file and thereafter, you can finish up your store appearance and 57 00:04:57,130 --> 00:04:59,940 you can publish your app in the Google Play Store as well. 58 00:05:01,830 --> 00:05:06,600 Now of course you might wonder, how do you add icons and so on because I haven't touched on this yet? 59 00:05:07,180 --> 00:05:11,160 A convenient and easy way of doing that is with the help of Android Studio. 60 00:05:11,160 --> 00:05:17,610 There, you can open an existing Android Studio project and open your Android folder in your React Native 61 00:05:17,610 --> 00:05:24,440 project here with Android Studio, just the Android folder, not the entire React Native project. In there, 62 00:05:24,440 --> 00:05:32,980 you'll find your Android part of this project and here to add icons, you can go to the app folder, source, 63 00:05:33,490 --> 00:05:37,410 main, res and there 64 00:05:37,580 --> 00:05:45,410 wait for this initialization and the build to finish which starts up oce you open this and once this initialization 65 00:05:45,410 --> 00:05:52,330 is done, in that app folder if you click on the res folder, right click on it, you can select new and 66 00:05:52,370 --> 00:06:00,290 there, image asset and this opens an editor where you can conveniently add and generate new image assets, 67 00:06:00,380 --> 00:06:06,420 new icons for example. There you can choose launch your icons, adaptive and legacy 68 00:06:06,420 --> 00:06:08,490 and now what you can do, you can leave the name, 69 00:06:08,580 --> 00:06:14,580 you can setup your icon, you can configure it there. You can choose a foreground layer and there, you 70 00:06:14,580 --> 00:06:23,050 can for example choose the path of an image you want to use, a background layer where you can set a solid 71 00:06:23,050 --> 00:06:29,050 color or also an image you want to use in the background and then therefore generate your 72 00:06:29,050 --> 00:06:35,170 icon with that tool. Simply click finish and of course provide your own image there if you want to and 73 00:06:35,170 --> 00:06:42,720 it will set everything up for you to have a nice icon which of course is pretty sweet. Now regarding 74 00:06:42,720 --> 00:06:48,470 how to customize the splash screen, attached you find some documentation on how you may do this on Android 75 00:06:48,470 --> 00:06:53,630 to set your own splash screen. Of course whenever you change your icons and/or your splash screen, you 76 00:06:53,640 --> 00:07:00,150 will need to rerun this build with that gradle w command and then also redeploy your new app bundle 77 00:07:00,180 --> 00:07:05,400 to the Google Play Store with the Google Play console and with that, this is how you would build and 78 00:07:05,400 --> 00:07:12,030 deploy React Native only apps. Of course a bit more manual work, a bit more cumbersome than in the expo 79 00:07:12,030 --> 00:07:17,970 managed workflow but now you know both options and you can go for whichever approach you need for 80 00:07:17,970 --> 00:07:18,870 your application.