Okay.
In this video, I will show you how we can change our icons and splash screen and I'll explain what
both are and how they are used.
So basically what we have here is displayed application.
But if you do some changes for a split of a second, you will see kind of icon here and I will remove
that method because we don't use it anymore.
And whenever I save it, you will see on the right hand side how this is updated.
And for a second you will see some kind of in the middle icon.
And I will show you and explain from where this is coming from.
So I will save it here.
You can see here, those are a square like icon and it's gone.
So basically what happened is this was displayed here as a splash screen.
Whenever we load our application, I have to say this is not fully trustable because the way application
works now, it is inside the expo.
If you build your application for production, you will have a different kind of experience.
So Expo might not be exactly the same as the normal application because normal application will see
splash screen loading much more performant and better looking.
So sometimes you you can have a delay of displaying splash screen or not fully exiting the expo, but
it's not going to be an issue in the production version.
So from where this is coming from, basically we have a folder here assets and if you open that assets,
you will see you have an icon and you have a splash.
So let's take a look what's inside in this file.
So I will open icon PNG.
And you can see here, this is just a square.
It's 192 by 192.
And this is a simple icon we have displayed there.
And the splash screen, you can see this is actually what we see in a for a second.
Whenever we do some changes, we we have that one and then we have a little bit dotted squares like
that with rounded corner.
So basically that these are placeholders.
So if you would like to create your own graphics, you can open a any of this file and you will have
some kind of guidance how to create your own logo or your own icon and how to do a splash screen.
So basically you can replace this thing with your own.
So what I have here is I have created two very sophisticated icons, so I will drag them here and I
will replace whatever the what's in the asset here.
So I will replace it.
So the icon looks like this and the splash screen looks like this.
Very, very advanced stuff.
So what we have now is I will replace them.
So if I will do any changes here.
So let me come back to my app.js and then I can maybe do change like this.
I have to kill the application and open it again because it's not going to work.
So what I will do is I will kill the application here.
And then I can go to Expo and I can run on simulator.
And you can see for a second you saw that icon there.
So what is happening also is that outside of this, you see a little bit of white.
So from where this is coming from, basically the splash screen is prepared to be displayed in the middle
of the of the screen for a second and then it's not going to cover the full screen.
This is not prepared to be on every single dimension for every single device.
So idea is you will display that in the middle and outside, you might have a different a different
colors.
So how we can control that?
If you go to a app.json here and you open this and on the on the bottom you have in this file, you
have different settings.
One of the settings is Splash.
So basically we pick this image Splash PNG, which is our image here.
And then you have different resize mode and also background color.
So this is the background color white I could replace with the color I have there.
And I've created that graphic myself so I know what is the color.
If you are not really sure what are the graphics are, what you can do is you can have a plugin like
this eyedropper, so you can load your icon inside the browser and you can drop it and just pick the
color from page.
So that's what I usually do.
If I'm not really sure what is the color.
And actually I can show you that quickly.
So I will load the icon and I have that icon in the new browser.
I can just pick it, pick color from the page and I can pick it this this color.
So I know this is the color that I use for my icon and splash screen.
Okay, so this is done now.
I've changed it for the right color.
If I will save it now, probably I will need to refresh it because this app.json needs to be fully loaded.
So I will do that in in the second.
And another thing is the icon PNG.
This is an icon that I've created for this application, but you won't be able to see that icon here
because the icon is usually that place here.
That will be the icon and also whatever you have in your application here.
But we display our application so far in Expo, so you don't see that icon in action.
So what you will need to do is whatever you build, that icon will be used as an icon for this application
and whatever you have it in different places.
So basically this icon and this splash screen will be loaded and used for your application.
But this is still inside the expo, so it's not really that usable at this point.
Also, icon you can control it from here.
So if you would like to put your assets in a different place, then you will also need to change it
here.
So so that's what you have there.
And let me just refresh simulator and see if we have that red background inside our splash screen.
And indeed we had the full screen red.
So that means everything is working fine.
So this is this is it.
The way we change it is very easy.
We have only 2I2 assets here icon and splash.
Normally, if you would like to develop like a native application, you will need to prepare a lot of
assets for a lot of dimensions.
But this time Expo is taking care of all of it.
So if you would like to go for like native React, native CLI kind of application where you need to
handle that by yourself, then you will need to provide a lot of them in different sizes and different
shapes for different devices.
But in our case with the Expo Expo will take care of it for us so we can use one icon and one splash
screen here.