How to Add a Splash Screen to a React Native App (iOS and Android)

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.

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 SplashScreenDemo.

Want Video?

Some of this can be a bit intimidating (it was to me). I find video walk throughs when using foreign programs very helpful.

Creating the Splash Screen Assets

Devices come in all shapes and sizes, therefore our splash screen images need to come in a variety of sizes as well. The Phonegap repo has a guide on the various size splash screens your app should include but in this tutorial we’ll use Image Gorilla by Ape Tools to generate all the necessary sizes for our splash screen (as well as icons, but we won’t use those in this tutorial).

To use Image Gorilla you want to create a 2048x2048 PNG — I’m using an image from my upcoming free React Native video course (sign up for updates).

Once Image Gorilla completes and you download and extract the zip file you’ll see multiple directories, we’re only interested in the Android and iOS ones.

Adding Splash Screens (iOS)

First open the project in Xcode

open ios/SplashScreenDemo.xcodeproj

Then scroll down to “Launch Images Source” and click “Use Asset Catalog…”

and press “Migrate” when prompted. On the “Launch Screen File” line delete “LaunchScreen” and leave it blank. You can also delete the “LaunchScreen.xib” from the navigator on the left.

Within the “Images.xcassets” folder there is now a “LaunchImage” option inside of it. This is where we’ll drag and drop the iOS images generated for us by Image Gorilla.

I had a few warnings at this point. You might have to mess with it a bit to take care of all of them.

If you run your application now you should see the new splash screen in use.

Note: I had to delete the app from the simulator before re-building the app for the splash screen to work.

Adding Splash Screens (Android)

Much of these instructions are pull from this article. I highly recommend you read it to understand the “why” behind these decisions.

First copy and paste the following directories from the Android directory from Image Gorilla to the android/app/src/main/res directory.

  • drawable-hdpi
  • drawable-mdpi
  • drawable-xhdpi
  • drawable-xxhdpi

Open the project in Android Studio and in the android/app/src/main/res create a drawable directory, then create a new “Drawable resource file”. Name that file background_splash.

Inside of the file paste the following

If you look at the android:gravity="fill" you may be thinking that the aspect ratio will be thrown off by filling the area — and you’re right. But it shouldn’t be too bad (it’s been good enough for me up to this point). We then need to add a new style to the android/app/res/values/styles.xml file, resulting in the following file.

Now we need to make some updates to AndroidManifest.xml. We’ll create a new activity with a name of “.SplashActivity”. Basically rename the existing activity and add android:theme="@style/SplashTheme" to it. Then create an empty activity with name of “.MainActivity”. This results in a file like this

Notice that the MainActivity is completely empty now and we’ve moved all the settings on MainActivity to SplashActivity.

Now we need to tell SplashActivity to go to the MainActivity, which represents our actual application. To do that you need to create a new Java class named SplashActivity.

and put the following code in that file. Make sure to keep the first line the same as whatever is created for your app, it’s app specific.

With all of this completed you should see the following (extremely briefly) when building the app.

This was the hardest screenshot to capture… so fast.

Why This Way?

You may be wondering why we go through the work of tapping into native code to set up splash screens. It’s because this is the right way to do it, especially on Android. We’re using the standard process on iOS and we’re using the recommended way on Android. The splash screens are available immediately and then the app opens — we shouldn’t manually make a user wait while looking at a splash screen, you can set up loading inside of your app (think about the way the Facebook app works).

Interested in learning more about React Native? Sign up for my email list.