Splash Screens & App Icons

[00:00:00]
>> Kadi Kraman: So, now that we're using a development build and not Expo Go, it is definitely time to customize the splash screen and your app icon. So previously, if anyone's ever done this manually, it is a long and cumbersome process of generating the right size images for iOS and Android.

[00:00:17]
And then copying them into the right folders, and then kind of hoping for the best. But luckily for us, our native projects are ephemeral because we're using prebuilt, they are throwaway. There's no need to configure the updated assets in Xcode or Android Studio, we just configure them in our app JSON, and we regenerate our projects.

[00:00:40]
So, the easiest way to generate your own app icon as fresh screen, I usually use a design tool like Figma. And we actually have this Figma template as well that we can use that has the correct sizes that you need to generate, so it's a nice starting point.

[00:00:58]
And you can also, what you can do is if you go the Assets folder and look at these default assets that are configured. And you can look at the sizes here and that's basically the size of assets that you need to ideally generate. So, let's start with the splash screen, so a splash screen is a PNG and it is the full screen page that will be displayed when you upload first launches and while the app content is still natively loading.

[00:01:26]
So, I've created one for us which is here, so let's download it.
>> Kadi Kraman: And in our assets, we'll delete the existing one and paste this in and in our app JSON, so this is where the splash image is used. So, we can pass in any file here, we're gonna reuse the file name, but this is where the Image is passed in.

[00:02:02]
You can also set the resize mode, and you can also if you use transparency, you can use a background color here. Next up we want the iOS app icon, so this is a 2024, this is a square 1024 PNG, and no transparency is allowed and definitely don't have squared corners.

[00:02:21]
I've had that from designers before, because all the IOS app icons have squared corners. So previously, I've had a couple of times where I get designs of app icons with squared corners, so no squared corners are necessary. And here's one I made earlier, so let's download this.
>> Kadi Kraman: And here's our icon and we can replace this icon.

[00:02:51]
>> Kadi Kraman: With the new one.
>> Kadi Kraman: And in our app.json, this is where the icon is used. And finally for Android, we also need a 1024 by 1024 PNG, but it is expected to have either a transparency or a solid background. So, just so it would look good on the various Android launcher home screens.

[00:03:20]
So, for this one you actually, if I copy this, you will notice that it's got a lot more padding than the iOS one, so let's delete the adapt icon.
>> Kadi Kraman: I guess, so this is the Android one, this is the iOS one. And I'm giving it the transparent background and I've also made it much smaller because on a lot of the Android devices this ends up being like a circle or a square, so you need a little bit more space on the sides.

[00:03:57]
And also if you go to the Appj.son, where it's passed in, so we're passing it in as the foreground image and we're giving it a background color. So, by default this is white, so I'm pretty happy with that, so I'll just keep it as white.
>> Kadi Kraman: And finally, because we have been supporting web we can also add our little web favicon.

[00:04:25]
And I've forgotten to add a link to it, but I'm pretty sure we can figure it out so it's in assets, favicon, teeny tiny plant, let's download it.
>> Kadi Kraman: So, get our favicon, delete this file and place the new one, lovely.
>> Kadi Kraman: And finally, while we're at it, let's also update the app name.

[00:05:01]
So, by default, the app name is the same as our folder name, which is in lowercase, but I think app names look better with a capitalized first letter. So, in our app.json, on the app name, let's call this Plantly with a capital P. So, this is another thing that needs a NativeAppRefresh in order to take effect.

[00:05:25]
So, now that we've done all our changes, we need to regenerate our native projects. And I wanted to show you, just to demonstrate, all the things that we don't need to add manually. So, let's,
>> Kadi Kraman: So, just before I do prebuild, so this id what I'm a purpose is, so you don't need to follow along with a bit.

[00:05:50]
So, I'm going to remove these from git ignore, so you keep yours. And I'm gonna stage, all these changes, so then can see all the files that change when we do a pre-build. So, NPX Expo pre-built platform Android, oops actually, there's another thing. So, because we already have an Android directory, we want to do a pre-build with dash, dash clean, so it is better to do this than RMF.

[00:06:26]
The Android directory because it doesn't generate things that don't need to be generated. So, if you need to change something, you need to do prebuild and you already had an Android folder do dash dash clean. So, it will tell me working, yes, I want to continue.
>> Kadi Kraman: Okay, so let's look at SourceTree, so these are all the changes to my native project.

[00:06:54]
How happy are you that we didn't do these manually? So, we've changed the app name, and then these are all the different sizes if you see it, so we've got hdpi, mdpi, xhdpi of the splash screen. Different size of the foreground image the lawn chair etc. So, all of these there are tools to generate these for you, but it is so nice to just do it with a single command.

[00:07:23]
>> Kadi Kraman: And let's do the same for iOS.
>> Kadi Kraman: So, every time you do a pre-build with iOS, it installs CocoaPods, so that's why the iOS pre-build always takes longer. Actually, so because we changed the app name, it actually changes this target here to a capital. And the app name is changed here, and these are all these like dynamically generated files and we have here.

[00:08:03]
So okay, so this is where I pycon was actually added, so I've bike on and splash screen and they're actually configured into the project. So, all the files need to be linked natively for them to be available later projects. So, these are all the things that we do need to worry about it because we generated this which is pretty handy.

[00:08:21]
Now that I'm done with it, I will add these back into gitignore.
>> Kadi Kraman: And these are all the changes we had.
>> Kadi Kraman: So, now let's actually rebuild, so npx expo run android.
>> Kadi Kraman: And I'm gonna do npx expo run iOS as well.
>> Kadi Kraman: Okay, I think the Android build already finished, so now, if I go to my Android Simulator, there we go, we have a little app icon, it's so cute.

[00:09:10]
There you go, and then if I open this, we should get our splash screen, which is lovely, and also the app name is now Planky. And notice that I made the app icon for Android much smaller. And even so, like, it just about fits in this little circle, so it was definitely worth doing.

[00:09:30]
It's kind of a trial and error when you're building these, the first iteration of it was quite hilarious, the plant was like. [LAUGH] Straight in there. All right, so it's finished on our iOS build as well, so you can notice that our app name has changed, our app icon has changed, and the splash screen.

[00:09:52]
If the splash screen doesn't update straight away, then it's a caching issue, so if you close your simulator, reopen it, it will work. But we can see it, so do you have a question?
>> Speaker 1: Yeah, I'm getting late to my brain might be tired, but I'm trying to distinguish between the difference between prebuild and just the regular build.

[00:10:10]
The prebuild is so you can run it locally, so you can test the build before it goes or?
>> Kadi Kraman: The Prebuild generates the iOS and Android directories, it is a prerequisite of the native build. Because you can't do a native build if you don't have your native code.

[00:10:27]
>> Speaker 1: Thank you.
>> Kadi Kraman: No worries, yeah, we left the hardest thing to the end of the day.
>> Kadi Kraman: Okay, another thing that I wanted to just quickly show you, now that we have our beautiful splash screen. The trick to doing things like getting auth from storage or doing things before you let user in the app is actually this splash screen.

[00:10:49]
So, in our layout file, and I can even do this, I think I can do this in a nested layout file as well. We can, let's do it in root one, we can do SplashScreen, so this is part of 'expo-routers', so it's exported from here, and we can do SplashScreen.preventAutoHide.

[00:11:15]
>> Kadi Kraman: I think I've just gone for an Estonian keyboard.
>> Kadi Kraman: preventAutoHide, so now if I open this so the app is ready to go, but our splash screen isn't disappearing. And that's because we are manually preventing this from auto hiding. And then what you can do is remember we have this onboarding state here, so I mentioned before that you could use the same kind of mechanism to do auth in your app.

[00:11:47]
So, what you would actually do is you could have an async operation here. So, you could asynchronously get something from storage and check the validity of token or whatever you want. And then when you're ready, redirect the user to wherever you decided they need to go and only then hide your splash screen, so it will be SplashScreen.hideAsync(), okay?

[00:12:22]
So, only when you're ready you hide it, so that way you can do some navigation or whatever you want, before actually showing the users you don't get this like loading state or navigating state that you don't wanna show them.