Configuring a splash screen and app icon
Before we can consider our app truly complete we need to add a splash screen and app icon. A splash screen is what users see when the app is launched, before it has loaded. The icon will be visible on the users' home screen when the app is installed, or inside of the Expo app when in development.
After telling our designers that we need a 1242px width by 2436px height splash screen image (more about this in the splash screen guide
), they gave us the following file:
What is this? A splash screen for ants?! No, it's just scaled down here to fit more easily on this page 😅
Save this image to the assets directory inside of your project and call it splash.png — replace the existing file. Reload your app and you should see something like this:
Is the app loading too quickly for you to get a good look at the splash screen?
We can make the splash screen stick around for longer by manually controlling when it is hidden, rather than the default of automatically hiding it as soon as the app is ready.
expo install expo-splash-screen.
Next, add the following code to delay hiding the splash screen for five seconds.
import * as SplashScreen from 'expo-splash-screen';
🚨 Don't forget to remove this code when you are done testing your splash screen!
That was pretty easy but we aren't done here yet. Notice that there is a white bar on the top of our screen (see the tap indications in the above video if you're having trouble spotting it — you may not be able to see it on your device depending on its resolution). In order to remedy this, we need to set the
backgroundColor for our splash screen. The background color is applied to any area of the screen that isn't covered by our splash image.
Open up app.json from your project directory in your code editor and make the following change in the
This solves our problem!
Our designer provided us with this 1024px width x 1024px height app icon:
Save this image to the assets directory inside of your project and call it icon.png — replace the existing file. Reload the app. That's all you need to do! You will see the icon in various places in Expo Go, and when you do a standalone app build for submission to the stores it will be used as the icon on the users' home screens.
Well done, you have now gone through the motions of building a simple but meaningful app that runs on iOS, Android, and web from the same codebase! We hope that this tutorial has answered some of your questions and posed many more.
The next section of the tutorial will guide you towards resources to learn more about concepts we've covered here and others we have only mentioned in passing, like standalone apps. Continue to find out how you can learn more