How to Add a Splash Screen to a React Native App (iOS and Android)
Updated: February 27, 2018

I’m often asked about that last mile of developing a React Native app (actually getting it into the app store). There’s more to it than just building your app and sending it off to Apple/Google — you’ve got to add icons, splash screens, write descriptions, and more before sending it off for review.

Today we’ll cover splash screens on iOS and Android.

Using Expo or Create React Native App? No need to go through all of this — you can follow their docs and be set up in no time.

In this tutorial we’ll be working in the platform IDEs and writing a bit of native code. Don’t worry, I’ll walk you through everything. The final code is available on Github.

I’ll be starting by creating a new React Native app react-native init SplashExample .

Protip: Set up source control before following along! Not only is it a good way to revert changes when you make a mistake but it’s also a great way to see exactly what changed to enable the splash screen.

Splash Screen Assets

In a previous version of this tutorial I showed how to simply use a large image to create the splash screen. This can have issues scaling between the ever growing number of screen resolutions.

So, instead, we’ll start with a single image that looks a lot like our icon. The idea here is two fold:

Make it look like the icon the user taps grows to fill the entire screen making for a seamless transition. Keep it simple. A splash screen should only show for a few milliseconds. It shouldn’t have a lot of information on it — it is, after all, a dreaded loading screen.

With all of this in mind we’ll start with a a square image at three sizes (@1x = 200px, @2x = 400px, @3x = 600px).

You can get those images from Github.

Preparing the App

If you’ve tried to set up a splash screen in React Native then you may have experience a white screen flash before your content loads. If your app has a white background this is often not very noticable, but it’s still a pain. Today we’re going to make it very noticable if we have any flashes of white. To do that we’ll set a dark background color in our app.

Replace App.js with

All this did was set the background color to #4F6D7A , the text color to #F5FCFF , and use light text in the status bar.

The basic app

Adding Splash Screens (iOS)
['Spencer Carli']
['React Native', 'Splash Screen', 'Android App Development', 'Technology', 'iOS App Development']