An adventure in splash screens for React Native apps

The splash screen you create here won't be beautiful, but it will have all the correct plumbing so that you can iterate on the design later :).

First, you’re going to need some images. When I started to create the splash screens for work, the final images we need to use weren’t yet ready, but this tutorial points to these images on GitHub, which are a great stand-in.

These images are in three sizes: @1x = 200px, @2x = 400px, @3x = 600px. Save them somewhere you can find them again and I’ll tell you where to put them later in this tutorial, for iOS and Android.

You need to make the background colour of your home screen a nice, incongruous colour until you’ve got both splash screens in place. This is so we can spot the dreaded ‘white flash’ with greater ease. I went with ‘backgroundColor: ‘pink’’ on the outermost View element. You can change this back to white or whatever other colour you need when you're done.

iOS

• Run open ios/{YourProjectName}.xcworkspace in your terminal and await the arrival of your project in XCode. Replace {YourProjectName} with the name of your project and remove the curly braces.

• We need to add a new image asset in Xcode now. You can find it in the leftmost menu in YourProjectName > YourProjectName > Image.xcassets. You should then press the “+” in the second leftmost panel and then select ‘New Image Set’. You can call the image whatever you like. Now add the images you downloaded from the GitHub repo earlier. They will automatically attach themselves to the right pixel density, but because I wanted to be absolutely sure, I just dragged my images to the corresponding placeholders.

• Select LaunchScreen.storyboard in the leftmost panel. You should see the name of your project and ‘Powered by React Native’ underneath it. You can remove or add to these as you like. I just left them as they were while I was working out the correct splash screen plumbing.

• Now you need to change the background colour of the View to something obnoxious so that any white flashes are more visible. If you click on View in the second leftmost panel, you can choose any colour you like from the Background dropdown. I went with the delightfully named System Blue Colour.

• Now we should add an Image View to our splash screen so we can include our icon. If you press the button with a “+” on it in the top right of the screen, you’ll get a pop-up menu with a search bar. Search Image View and click on it. One should appear on your splash screen layout.

• There is now an Image View section at the top of your rightmost panel menu. Using the Image dropdown, select your icon. Set the Content Mode to Aspect Fit using the same rightmost menu panel.

• Click on the ruler icon, which is second from the right, and at the top of the rightmost panel on your screen. This will help us to centre the icon on devices of all sizes. Within the “Autoresizing” section, you need to click the red lines outside of the grey box until they are greyed out, and then click the arrows inside the box so that they are not greyed out. They should be vivid red.

• Now you can run your app. If you see no changes, erase the state of the simulator. Now you should be seeing your changes if you weren’t before! You’ll also see a white flash. Let’s fix this.

• Install React Native Splash Screen with yarn add react-native-splash-screen or npm install react-native-splash-screen —save, depending on which package manager you’re using.

• Using XCode, open the AppDelegate.m file. You then need to add #import <RNSplashScreen.h> with the other import statements, and then add [RNSplashScreen show]; above the return YES; line towards the bottom of the page.

• Finally, in App.js (or whatever the root of your project is), and import the useEffect hook in the same line as you import React, so: import React, {useEffect} from 'react';
. Now, outside of your return statement, include the following function:
  

useEffect(() => {
    SplashScreen.hide();
  }, []);

Android

• Remember those images you downloaded from GitHub earlier? We’ll be putting them in the correct place for Android now. The mipmap folders are in android/app/src/res. Here is where each image should go:

mipmap-mdpi = icon.png
mipmap-hdpi = icon@2x.png
mipmap-xhdpi = icon@3x.png
mipmap-xxhdpi = icon@3x.png
mipmap-xxxhdpi = icon@3x.png

Once the correct images are in the correct folders, you need to rename them all to ‘icon.png’.

• Create a file called ‘background_splash.xml’ in android/app/src/res/drawable. You’ll need to create the drawable directory yourself.

Now add this code to it:

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/purple"/>

    <item
        android:width="200dp"
        android:height="200dp"
        android:drawable="@mipmap/icon"
        android:gravity="center" />

</layer-list>

Here, we’re setting up something called a layer-list, which is a list of layers, and then setting a soon-to-be-defined background colour and rendering our icon. The icon will be 200dp tall and wide, and it’ll be in the centre of the screen.

• Now we need to create a colors.xml file in android/app/src/main/res/values, which is where we’ll define our purple colour.

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <color name="purple">#5951AA</color>
</resources>

• Now we need to create a new SplashTheme in the android/app/src/main/res/values/styles.xml file. With the code added, the file should look like this.

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowDisablePreview">true</item>
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>

    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
    </style>
</resources>

• Now we need to tell the application to use the SplashTheme. Open AndroidManifest.xml and inside of the application tag, add the following code

<activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
</activity>

Then add android:exported=“true" into the activity tag that’s called .MainActivity.

The code in its entirety should look like this, of course with your own package name.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.belongmobile" // replace w your package name!
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

        <activity
            android:name=".SplashActivity"
            android:theme="@style/SplashTheme"
            android:label="@string/app_name">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity
          android:name=".MainActivity"
          android:label="@string/app_name"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
          android:windowSoftInputMode="adjustResize"
          android:exported="true"
        />

      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

• Now we need to create a SplashActivity.java file in android/app/src/main/java/com/{YourProjectName}. This file will feed into the MainActivity.java file, and it should look like this:

package com.belongmobile; // make sure this is your package name

import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

public class SplashActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Intent intent = new Intent(this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

At this stage, if everything is set up correctly, you should see the splash screen on your emulator (again, you may have to erase state on the emulator and boot it from scratch). But! It has a white flash! If you haven’t already, you need to run yarn add react-native-splash-screen in your project’s directory.

• In MainActivity.java, add the following imports import org.devio.rn.splashscreen.SplashScreen; import android.os.Bundle;. Now add the following statement to the top of the MainActivity class:

@Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }

• If you haven’t already, you need to configure App.js (or whatever the root of your project is) by adding this import statement import SplashScreen from ‘react-native-splash-screen';, and import useEffect on the same line you import React, so import React, {useEffect} from 'react'; and the following function outside of your return statement:

 useEffect(() => {
    SplashScreen.hide();
  }, []);

• Now you need to create launch_screen.xml in android/app/src/main/res/layout. Add the following code to it:

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/purple"
    android:gravity="center">
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:src="@mipmap/icon"
    />
</LinearLayout>

And now everything should be working!