WEBVTT 00:01.280 --> 00:01.930 Okay. 00:01.940 --> 00:08.840 In this video, I will show you how we can change our icons and splash screen and I'll explain what 00:08.870 --> 00:11.090 both are and how they are used. 00:11.300 --> 00:17.390 So basically what we have here is displayed application. 00:17.390 --> 00:25.130 But if you do some changes for a split of a second, you will see kind of icon here and I will remove 00:25.130 --> 00:27.830 that method because we don't use it anymore. 00:27.830 --> 00:32.750 And whenever I save it, you will see on the right hand side how this is updated. 00:32.750 --> 00:38.060 And for a second you will see some kind of in the middle icon. 00:38.150 --> 00:42.110 And I will show you and explain from where this is coming from. 00:42.110 --> 00:43.190 So I will save it here. 00:43.190 --> 00:48.710 You can see here, those are a square like icon and it's gone. 00:48.710 --> 00:54.320 So basically what happened is this was displayed here as a splash screen. 00:54.320 --> 01:03.450 Whenever we load our application, I have to say this is not fully trustable because the way application 01:03.450 --> 01:06.480 works now, it is inside the expo. 01:06.510 --> 01:12.240 If you build your application for production, you will have a different kind of experience. 01:12.240 --> 01:18.060 So Expo might not be exactly the same as the normal application because normal application will see 01:18.190 --> 01:23.820 splash screen loading much more performant and better looking. 01:23.820 --> 01:31.050 So sometimes you you can have a delay of displaying splash screen or not fully exiting the expo, but 01:31.050 --> 01:33.390 it's not going to be an issue in the production version. 01:33.390 --> 01:40.230 So from where this is coming from, basically we have a folder here assets and if you open that assets, 01:40.230 --> 01:43.590 you will see you have an icon and you have a splash. 01:43.590 --> 01:48.150 So let's take a look what's inside in this file. 01:48.150 --> 01:50.130 So I will open icon PNG. 01:50.370 --> 01:53.100 And you can see here, this is just a square. 01:53.100 --> 01:56.610 It's 192 by 192. 01:56.610 --> 02:01.230 And this is a simple icon we have displayed there. 02:01.230 --> 02:07.800 And the splash screen, you can see this is actually what we see in a for a second. 02:07.800 --> 02:15.780 Whenever we do some changes, we we have that one and then we have a little bit dotted squares like 02:15.780 --> 02:17.130 that with rounded corner. 02:17.130 --> 02:20.670 So basically that these are placeholders. 02:20.670 --> 02:28.470 So if you would like to create your own graphics, you can open a any of this file and you will have 02:28.470 --> 02:35.820 some kind of guidance how to create your own logo or your own icon and how to do a splash screen. 02:35.820 --> 02:40.470 So basically you can replace this thing with your own. 02:40.470 --> 02:50.160 So what I have here is I have created two very sophisticated icons, so I will drag them here and I 02:50.160 --> 02:53.400 will replace whatever the what's in the asset here. 02:53.400 --> 02:55.200 So I will replace it. 02:57.270 --> 03:02.010 So the icon looks like this and the splash screen looks like this. 03:02.580 --> 03:04.530 Very, very advanced stuff. 03:04.530 --> 03:08.610 So what we have now is I will replace them. 03:08.610 --> 03:10.710 So if I will do any changes here. 03:10.710 --> 03:19.080 So let me come back to my app.js and then I can maybe do change like this. 03:19.080 --> 03:24.750 I have to kill the application and open it again because it's not going to work. 03:24.750 --> 03:28.770 So what I will do is I will kill the application here. 03:33.960 --> 03:38.760 And then I can go to Expo and I can run on simulator. 03:45.020 --> 03:48.990 And you can see for a second you saw that icon there. 03:49.010 --> 03:56.570 So what is happening also is that outside of this, you see a little bit of white. 03:56.570 --> 04:04.190 So from where this is coming from, basically the splash screen is prepared to be displayed in the middle 04:04.190 --> 04:09.500 of the of the screen for a second and then it's not going to cover the full screen. 04:09.500 --> 04:15.590 This is not prepared to be on every single dimension for every single device. 04:15.590 --> 04:22.340 So idea is you will display that in the middle and outside, you might have a different a different 04:22.340 --> 04:23.000 colors. 04:23.000 --> 04:24.740 So how we can control that? 04:24.770 --> 04:32.210 If you go to a app.json here and you open this and on the on the bottom you have in this file, you 04:32.210 --> 04:33.800 have different settings. 04:33.890 --> 04:35.690 One of the settings is Splash. 04:35.690 --> 04:41.780 So basically we pick this image Splash PNG, which is our image here. 04:41.780 --> 04:47.360 And then you have different resize mode and also background color. 04:47.360 --> 04:53.330 So this is the background color white I could replace with the color I have there. 04:53.600 --> 04:57.500 And I've created that graphic myself so I know what is the color. 04:57.500 --> 05:03.800 If you are not really sure what are the graphics are, what you can do is you can have a plugin like 05:03.800 --> 05:12.560 this eyedropper, so you can load your icon inside the browser and you can drop it and just pick the 05:12.560 --> 05:13.580 color from page. 05:13.580 --> 05:15.380 So that's what I usually do. 05:15.410 --> 05:17.480 If I'm not really sure what is the color. 05:17.480 --> 05:19.880 And actually I can show you that quickly. 05:22.230 --> 05:26.760 So I will load the icon and I have that icon in the new browser. 05:26.760 --> 05:31.890 I can just pick it, pick color from the page and I can pick it this this color. 05:31.890 --> 05:36.270 So I know this is the color that I use for my icon and splash screen. 05:36.510 --> 05:40.230 Okay, so this is done now. 05:40.230 --> 05:42.570 I've changed it for the right color. 05:42.570 --> 05:49.740 If I will save it now, probably I will need to refresh it because this app.json needs to be fully loaded. 05:49.740 --> 05:52.530 So I will do that in in the second. 05:52.530 --> 05:55.320 And another thing is the icon PNG. 05:55.620 --> 06:04.620 This is an icon that I've created for this application, but you won't be able to see that icon here 06:04.620 --> 06:08.820 because the icon is usually that place here. 06:08.820 --> 06:13.710 That will be the icon and also whatever you have in your application here. 06:13.710 --> 06:20.040 But we display our application so far in Expo, so you don't see that icon in action. 06:20.340 --> 06:26.830 So what you will need to do is whatever you build, that icon will be used as an icon for this application 06:26.830 --> 06:29.560 and whatever you have it in different places. 06:29.560 --> 06:35.740 So basically this icon and this splash screen will be loaded and used for your application. 06:35.740 --> 06:41.490 But this is still inside the expo, so it's not really that usable at this point. 06:41.500 --> 06:45.100 Also, icon you can control it from here. 06:45.100 --> 06:50.500 So if you would like to put your assets in a different place, then you will also need to change it 06:50.500 --> 06:51.250 here. 06:51.250 --> 06:54.250 So so that's what you have there. 06:54.250 --> 07:04.720 And let me just refresh simulator and see if we have that red background inside our splash screen. 07:04.720 --> 07:07.180 And indeed we had the full screen red. 07:07.180 --> 07:09.760 So that means everything is working fine. 07:09.760 --> 07:12.550 So this is this is it. 07:12.970 --> 07:15.790 The way we change it is very easy. 07:15.790 --> 07:20.410 We have only 2I2 assets here icon and splash. 07:20.410 --> 07:25.960 Normally, if you would like to develop like a native application, you will need to prepare a lot of 07:25.960 --> 07:27.700 assets for a lot of dimensions. 07:27.700 --> 07:32.470 But this time Expo is taking care of all of it. 07:32.470 --> 07:39.280 So if you would like to go for like native React, native CLI kind of application where you need to 07:39.280 --> 07:45.880 handle that by yourself, then you will need to provide a lot of them in different sizes and different 07:46.120 --> 07:47.560 shapes for different devices. 07:47.560 --> 07:54.190 But in our case with the Expo Expo will take care of it for us so we can use one icon and one splash 07:54.190 --> 07:55.150 screen here.