Before we continue with the build or publishing process and therefore get it to the app stores, let's
continue configuring this.
Now for one, there are some blanks here like the description which is missing which you could add by adding
a description
key here with some text and that would be the description that shows up here.
Important, that's not a description that shows up in the app stores,
that's really just a description that shows up here and you can learn more about the description, all
the other keys you can set here in this page.
There are a lot of settings you can set after all.
Now what I'm interested in right now is the icon and splash screen part because that's the icon
people will see on the home screen,
of course not yet because right now we're not publishing the apps to the App Store but that will change
and the splash screen,
well that's what users see when our app loads
and both are things you typically want to customize.
Now expo gives you an icon and a splash screen out of the box but both are just empty placeholder,
right,
so that's not too amazing,
instead we want to provide our own icon, our own splash screen image here.
Now you're really flexible regarding what you provide here but in general, it's a good idea to provide
an icon in the 1024 x 1024 resolution,
so a square icon as an input and for the splash screen, you can build a splash screen as described in
the official docs where you can learn more about how you could build such a splash screen, how you could
structure it and so on.
Now I prepared something for you which you can use to now follow along which you should not use for
real deployment because these assets are just for this course, not for you to use in your app which
you plan to deploy and for that attached you find the icons.zip file.
Now if you unzip this, in there, you'll find a places.png file which you can of course drag and drop
into the assets folder,
you can also delete the icon.png file there if you want.
You can also delete the splash.png file because in this attached folder, you'll also find this splash
icon.png file which you can of course therefore also drag and drop in here.
Now these are just some icons I created which we can use now
and back in the app.json file, we now can point at the custom icons. Important, you should provide
png files as I'm doing it here.
So now for the icon, we can point at assets/places.png and for the splash, we can point that assets/
splash_icon.png. Now as a background color, there we can use a dark black color like hex code
#171717,
this should be a hex code color like this and the resize mode here can be set to contain or cover, cover
will basically stretch the icon to take the full available width and height, contain will keep the icon
size, center it and have that background color behind the icon.
Now if we do that, we can already see the result of this
if we just npm start this, so the server as we did many times in this course or expo start and we
then launch this on an emulator, Android or iOS again as I'm doing it here. Now this launches it there
and now you see, this is the splash screen already taking a new one, with the image in there which is
our big but that's on purpose so that we can clearly see it and the background color which is slightly
different so that you also have a chance of seeing that, of course you could pick the same color to have
a seamless splash screen here.
So that's working and let's wait for that to finish
and here's the app running and now you see your icon here as well
if you go into the task switcher. You see it's not looking that great with the background but that's
something we can improve
but here is the icon in general, so that is working, we see both the splash screen and the icon and on iOS
it would be the same. Now as you can tell,
the icon doesn't look that great on Android though.
The reason for that is that Android depending on the version of Android you're running on your device
uses different icons, newer more recent versions of Android use these so-called adaptive icons which
are these rounded icons where you have your icon in the middle and then some background color or a
background image even behind them,
older versions would use square icons.
Now you can cater for this by providing a more detailed configuration for Android and also for iOS
if you want. Instead of having this general icon key here, you can set up platform specific settings and
it's also something you learned in the official docs of course.
There, you can find information on how you may configure icon splash,
that's nice but then also how you may configure iOS in a specific way
and there you can set up an icon specific for iOS if you would want to use this.
Of course the same is true for the splash screen, so you can basically add an iOS node to your configuration,
we already have that here even and in there, you could also add an icon and then also a splash configuration
which looks exactly or which would look exactly like the root configuration we have here
but now you could basically override these general root level settings and have a specific icon for
iOS and a specific splash screen for iOS.
So that's something you could do and the same is true for Android and you of course find that as well
in the official docs.
You can add an Android key here to your app.json file and then this holds an object
so to say, there you can also set up an icon and a splash configuration just as I explained it for iOS
and now these settings would be taken for Android,
iOS since it doesn't have specific settings in my example here would still use the general settings
up there.
Now the interesting thing is for Android, you can not just set a specific icon splash screen, you can
also set an adaptive icon here with the adaptive icon configuration, that's not available for iOS because
adaptive icons are exclusive to Android.
Adaptive icon takes a Javascript object so to say as a configuration value, not a string
and this object can have three keys - a foreground image, a background color or a background image.
Now you have either a background color or a background image but you always should have a foreground
image.
Now here we can add foreground image,
so this key here and background color which should be a six digit hex code as you can see
and let's quickly do that here and now we can set the background color to let's say that #171717
code and the foreground image can now be set to our icon, though for this I would recommend that you
use a specific icon which you also find attached here,
the places-adaptive.png file which you can drag and drop into your assets folder and that places-adaptive.png
file can now be used here as a foreground image, so we can point at assets and then
places-adaptive.png.
Now this icon, the places-adaptive icon is transparent,
it's still is the icon but it has a transparent background, unlike the other icon
and that will therefore allow Android to place it in front of this background color or background image
you provided and automatically round the corners for you and so on.
So if we now save this and this therefore rebuilds and to be safe that it really takes this into account,
I'll restart my expo server here.
If we now launch this on Android and for that I'll also close the expo client here
and then rerun this on Android,
we should see that once this restarted,
we now have a nicer icon which looks a bit better.
So let's wait for that to launch,
this is still the splash screen as we set it up before, I also did not set an Android specific splash screen
which we of course could but here I didn't,
so we of course got the same splash screen as earlier in this module
and if you now have a look at the icon, you might unfortunately still see the old one. The new one will
be taken into account though once we built this app as a standalone app and distribute it to the app stores.
In general, the recommendation is that for Android, you do set such an adaptive icon because you cover
more Android versions which doesn't hurt of course. Setting such a general icon is also not a bad
idea
and of course we can either use one and the same icon for both iOS and Android or you set specific
icons for iOS and for Android, as mentioned for Android possibly, the adaptive icon. If you want to learn
more about the process of creating and managing icons and splash screens, attached you find the official
expo docs which dive deeply into the different options you have there and what you should consider.