A month of React Native: part #8
Make a splash: setting up your app’s splash screen
This post is part of a series, where I document my experiences learning React Native while building my first-ever mobile app. This is also my way of giving back to the React Native community, with tips and insights I note along the journey.
A splash screen is the first thing that a user of your app sees when they first open it. What’s really common practice is to keep showing the splash screen while you wait for various assets that your app uses to preload. These can be fonts or images that you load from the web that you want to have cached locally, so that you give your users a better UX. Let’s see a realistic example.
Adding a splash screen image
The simplest splash screen is just a single View component, perhaps with an interesting backgroundColor and some text. But let’s assume we want to have something more exciting than this, for example, our app’s logo over a simple background. In order to point Expo to the splash screen image we want to use, we just need to update the splash field within the expo field in app.json:
"splash": {
"image": "./assets/splash-screen.png"
}Chicken and egg problem
Wait a second: isn’t the whole purpose of having a splash screen to show something while our app is loading? But doesn’t waiting for the splash screen image to load defeat that purpose? That’s exactly right. Let’s fix this.
Luckily, the Expo toolkit includes AppLoading, a component that’s meant to be rendered while your app is waiting to load any assets it requires, such as the splash screen. In addition, the SplashScreen module allow us to piece the puzzle together. Let’s see how all this works.
Putting it all together
In order to make things simpler, it’s best if we split the app loading into three distinct phases: (1) any splash screen related resources are loaded; (2) the rest of the app resources are loaded; (3) the main view of the app is ready to be rendered. We can capture this with the following state flags in our App.js:
state = {
isAppReady: false,
isSplashReady: false
};Step 1: load the the splash screen image
This is where the AppLoading module becomes really handy. We just need to supply it with a function to its startAsync prop, where we can load the splash screen image:
Step 2: load any other assets
Once we’ve loaded the splash screen image, we can now display it. This is nothing fancy, but we got one more thing to do: load any other assets our app requires, such as fonts, other images, etc. Once simple trick to achieve this is to leverage the onLoad prop on the Image component. We can pass in a function that, as soon as the splash screen image loads, will load these assets and also set isAppReady to true, so that we know that we can display the main screen of our app:
One small thing here: by default, when we unmount the AppLoading module, Expo will hide the native splash screen. A way to prevent this from happening is to set the autoHideSplash prop in AppLoading to false.
Step 3: load the main app
Nothing special here — we’ll just show the main view of the app. Below is what the render method of our App.js looks like:
Size does matter
OK, we now know how to properly show a splash screen image in our app. But one thing that we haven’t touched on is: what size should the image be? This is a non-trivial question, since our app can target a variety of devices, with a variety of screen sizes. Luckily, the Expo team has put together a very basic Sketch file to work off from. You can read more about in the documentation why they’ve chosen to go with the size they have for this, but this should work for the majority of devices.
And we’re done! While there are other details on this topic (e.g. setting up different splash screens for iPads on iOS), this basic tutorial should cover the basics. Hop this was helpful! I’ll see you for the next installment of the series, where we’ll talk about adding sharing actions in our app.
If you enjoyed this article, feel free to hit that clap button 👏 to help others find it.
About me
I’m Alex, a software engineer and startup geek. Currently, I’m a co-founder at a startup called AgentRisk, where I’m the VP of Product & Engineering. In a past life, I was part of the founding engineering team at an enterprise cloud storage startup in Silicon Valley, did a bunch of cool cutting-edge projects at Cisco Research, and worked on some really innovative data center network architectures while doing my Master’s at UCSD. I always enjoy learning new technologies and b̵u̵i̵l̵d̵i̵n̵g̵ shipping side-projects all the time.
