1 00:00:02,520 --> 00:00:08,550 Before we continue with the build or publishing process and therefore get it to the app stores, let's 2 00:00:08,550 --> 00:00:10,300 continue configuring this. 3 00:00:10,300 --> 00:00:15,330 Now for one, there are some blanks here like the description which is missing which you could add by adding 4 00:00:15,330 --> 00:00:16,440 a description 5 00:00:16,440 --> 00:00:21,540 key here with some text and that would be the description that shows up here. 6 00:00:21,660 --> 00:00:24,640 Important, that's not a description that shows up in the app stores, 7 00:00:24,640 --> 00:00:28,950 that's really just a description that shows up here and you can learn more about the description, all 8 00:00:28,950 --> 00:00:34,200 the other keys you can set here in this page. 9 00:00:34,230 --> 00:00:37,110 There are a lot of settings you can set after all. 10 00:00:37,110 --> 00:00:42,780 Now what I'm interested in right now is the icon and splash screen part because that's the icon 11 00:00:42,780 --> 00:00:44,610 people will see on the home screen, 12 00:00:44,610 --> 00:00:49,920 of course not yet because right now we're not publishing the apps to the App Store but that will change 13 00:00:50,700 --> 00:00:51,670 and the splash screen, 14 00:00:51,690 --> 00:00:54,140 well that's what users see when our app loads 15 00:00:54,330 --> 00:00:58,620 and both are things you typically want to customize. 16 00:00:58,680 --> 00:01:05,810 Now expo gives you an icon and a splash screen out of the box but both are just empty placeholder, 17 00:01:05,820 --> 00:01:06,120 right, 18 00:01:06,120 --> 00:01:08,720 so that's not too amazing, 19 00:01:08,730 --> 00:01:12,590 instead we want to provide our own icon, our own splash screen image here. 20 00:01:12,600 --> 00:01:17,850 Now you're really flexible regarding what you provide here but in general, it's a good idea to provide 21 00:01:17,850 --> 00:01:22,840 an icon in the 1024 x 1024 resolution, 22 00:01:22,890 --> 00:01:30,720 so a square icon as an input and for the splash screen, you can build a splash screen as described in 23 00:01:30,720 --> 00:01:35,550 the official docs where you can learn more about how you could build such a splash screen, how you could 24 00:01:35,550 --> 00:01:38,520 structure it and so on. 25 00:01:38,520 --> 00:01:45,600 Now I prepared something for you which you can use to now follow along which you should not use for 26 00:01:45,660 --> 00:01:51,930 real deployment because these assets are just for this course, not for you to use in your app which 27 00:01:51,930 --> 00:01:57,870 you plan to deploy and for that attached you find the icons.zip file. 28 00:01:58,000 --> 00:02:04,270 Now if you unzip this, in there, you'll find a places.png file which you can of course drag and drop 29 00:02:04,270 --> 00:02:05,500 into the assets folder, 30 00:02:05,500 --> 00:02:08,840 you can also delete the icon.png file there if you want. 31 00:02:08,890 --> 00:02:15,460 You can also delete the splash.png file because in this attached folder, you'll also find this splash 32 00:02:15,580 --> 00:02:19,720 icon.png file which you can of course therefore also drag and drop in here. 33 00:02:19,720 --> 00:02:24,030 Now these are just some icons I created which we can use now 34 00:02:24,280 --> 00:02:29,590 and back in the app.json file, we now can point at the custom icons. Important, you should provide 35 00:02:29,600 --> 00:02:31,720 png files as I'm doing it here. 36 00:02:31,720 --> 00:02:38,170 So now for the icon, we can point at assets/places.png and for the splash, we can point that assets/ 37 00:02:38,260 --> 00:02:46,840 splash_icon.png. Now as a background color, there we can use a dark black color like hex code 38 00:02:46,840 --> 00:02:47,940 #171717, 39 00:02:48,010 --> 00:02:55,180 this should be a hex code color like this and the resize mode here can be set to contain or cover, cover 40 00:02:55,180 --> 00:03:00,610 will basically stretch the icon to take the full available width and height, contain will keep the icon 41 00:03:00,610 --> 00:03:06,190 size, center it and have that background color behind the icon. 42 00:03:06,190 --> 00:03:10,090 Now if we do that, we can already see the result of this 43 00:03:10,240 --> 00:03:18,730 if we just npm start this, so the server as we did many times in this course or expo start and we 44 00:03:18,730 --> 00:03:26,010 then launch this on an emulator, Android or iOS again as I'm doing it here. Now this launches it there 45 00:03:26,200 --> 00:03:31,510 and now you see, this is the splash screen already taking a new one, with the image in there which is 46 00:03:31,520 --> 00:03:35,920 our big but that's on purpose so that we can clearly see it and the background color which is slightly 47 00:03:35,920 --> 00:03:40,180 different so that you also have a chance of seeing that, of course you could pick the same color to have 48 00:03:40,180 --> 00:03:42,480 a seamless splash screen here. 49 00:03:42,520 --> 00:03:45,510 So that's working and let's wait for that to finish 50 00:03:45,710 --> 00:03:50,160 and here's the app running and now you see your icon here as well 51 00:03:50,170 --> 00:03:55,240 if you go into the task switcher. You see it's not looking that great with the background but that's 52 00:03:55,240 --> 00:03:56,720 something we can improve 53 00:03:56,740 --> 00:04:02,740 but here is the icon in general, so that is working, we see both the splash screen and the icon and on iOS 54 00:04:02,770 --> 00:04:05,610 it would be the same. Now as you can tell, 55 00:04:05,610 --> 00:04:08,230 the icon doesn't look that great on Android though. 56 00:04:08,250 --> 00:04:13,260 The reason for that is that Android depending on the version of Android you're running on your device 57 00:04:13,650 --> 00:04:20,310 uses different icons, newer more recent versions of Android use these so-called adaptive icons which 58 00:04:20,310 --> 00:04:25,980 are these rounded icons where you have your icon in the middle and then some background color or a 59 00:04:25,980 --> 00:04:28,060 background image even behind them, 60 00:04:28,110 --> 00:04:30,900 older versions would use square icons. 61 00:04:30,900 --> 00:04:38,930 Now you can cater for this by providing a more detailed configuration for Android and also for iOS 62 00:04:39,000 --> 00:04:45,770 if you want. Instead of having this general icon key here, you can set up platform specific settings and 63 00:04:45,770 --> 00:04:48,800 it's also something you learned in the official docs of course. 64 00:04:48,870 --> 00:04:55,380 There, you can find information on how you may configure icon splash, 65 00:04:55,380 --> 00:05:01,150 that's nice but then also how you may configure iOS in a specific way 66 00:05:01,260 --> 00:05:07,310 and there you can set up an icon specific for iOS if you would want to use this. 67 00:05:07,480 --> 00:05:13,710 Of course the same is true for the splash screen, so you can basically add an iOS node to your configuration, 68 00:05:13,720 --> 00:05:21,910 we already have that here even and in there, you could also add an icon and then also a splash configuration 69 00:05:21,910 --> 00:05:27,450 which looks exactly or which would look exactly like the root configuration we have here 70 00:05:27,520 --> 00:05:33,730 but now you could basically override these general root level settings and have a specific icon for 71 00:05:33,730 --> 00:05:36,170 iOS and a specific splash screen for iOS. 72 00:05:36,190 --> 00:05:41,620 So that's something you could do and the same is true for Android and you of course find that as well 73 00:05:41,620 --> 00:05:42,820 in the official docs. 74 00:05:43,000 --> 00:05:49,050 You can add an Android key here to your app.json file and then this holds an object 75 00:05:49,060 --> 00:05:55,780 so to say, there you can also set up an icon and a splash configuration just as I explained it for iOS 76 00:05:55,840 --> 00:05:58,900 and now these settings would be taken for Android, 77 00:05:59,140 --> 00:06:04,120 iOS since it doesn't have specific settings in my example here would still use the general settings 78 00:06:04,120 --> 00:06:05,190 up there. 79 00:06:05,200 --> 00:06:10,690 Now the interesting thing is for Android, you can not just set a specific icon splash screen, you can 80 00:06:10,780 --> 00:06:18,580 also set an adaptive icon here with the adaptive icon configuration, that's not available for iOS because 81 00:06:18,580 --> 00:06:21,820 adaptive icons are exclusive to Android. 82 00:06:21,820 --> 00:06:29,450 Adaptive icon takes a Javascript object so to say as a configuration value, not a string 83 00:06:29,680 --> 00:06:35,950 and this object can have three keys - a foreground image, a background color or a background image. 84 00:06:35,950 --> 00:06:40,960 Now you have either a background color or a background image but you always should have a foreground 85 00:06:40,960 --> 00:06:41,850 image. 86 00:06:41,890 --> 00:06:46,780 Now here we can add foreground image, 87 00:06:46,780 --> 00:06:53,410 so this key here and background color which should be a six digit hex code as you can see 88 00:06:53,520 --> 00:06:59,590 and let's quickly do that here and now we can set the background color to let's say that #171717 89 00:06:59,590 --> 00:07:04,750 code and the foreground image can now be set to our icon, though for this I would recommend that you 90 00:07:04,750 --> 00:07:07,900 use a specific icon which you also find attached here, 91 00:07:08,020 --> 00:07:16,990 the places-adaptive.png file which you can drag and drop into your assets folder and that places-adaptive.png 92 00:07:17,410 --> 00:07:23,800 file can now be used here as a foreground image, so we can point at assets and then 93 00:07:23,830 --> 00:07:25,630 places-adaptive.png. 94 00:07:25,690 --> 00:07:30,550 Now this icon, the places-adaptive icon is transparent, 95 00:07:30,550 --> 00:07:34,990 it's still is the icon but it has a transparent background, unlike the other icon 96 00:07:34,990 --> 00:07:39,640 and that will therefore allow Android to place it in front of this background color or background image 97 00:07:39,640 --> 00:07:43,650 you provided and automatically round the corners for you and so on. 98 00:07:43,660 --> 00:07:51,400 So if we now save this and this therefore rebuilds and to be safe that it really takes this into account, 99 00:07:51,430 --> 00:07:53,910 I'll restart my expo server here. 100 00:07:54,040 --> 00:08:00,370 If we now launch this on Android and for that I'll also close the expo client here 101 00:08:03,390 --> 00:08:05,490 and then rerun this on Android, 102 00:08:05,490 --> 00:08:08,990 we should see that once this restarted, 103 00:08:09,000 --> 00:08:12,540 we now have a nicer icon which looks a bit better. 104 00:08:12,600 --> 00:08:14,060 So let's wait for that to launch, 105 00:08:14,070 --> 00:08:19,560 this is still the splash screen as we set it up before, I also did not set an Android specific splash screen 106 00:08:19,560 --> 00:08:21,700 which we of course could but here I didn't, 107 00:08:21,720 --> 00:08:25,810 so we of course got the same splash screen as earlier in this module 108 00:08:26,110 --> 00:08:31,440 and if you now have a look at the icon, you might unfortunately still see the old one. The new one will 109 00:08:31,440 --> 00:08:37,320 be taken into account though once we built this app as a standalone app and distribute it to the app stores. 110 00:08:38,100 --> 00:08:43,110 In general, the recommendation is that for Android, you do set such an adaptive icon because you cover 111 00:08:43,110 --> 00:08:49,470 more Android versions which doesn't hurt of course. Setting such a general icon is also not a bad 112 00:08:49,470 --> 00:08:50,040 idea 113 00:08:50,070 --> 00:08:54,780 and of course we can either use one and the same icon for both iOS and Android or you set specific 114 00:08:54,810 --> 00:09:01,110 icons for iOS and for Android, as mentioned for Android possibly, the adaptive icon. If you want to learn 115 00:09:01,110 --> 00:09:06,180 more about the process of creating and managing icons and splash screens, attached you find the official 116 00:09:06,180 --> 00:09:11,160 expo docs which dive deeply into the different options you have there and what you should consider.