Adding a custom splash image for your react native application

Splash screens can act as a good “hook” and make your UX a bit more exciting. You probably won’t find an app that doesn’t have splash screen these days. Now adding one to your react native application requires you take some steps, but it isn’t too hard. I’ll walk you through it as simple as possible!

Note: I’ll be assuming you have your react-native application setup

Installation

First we will be installing some packages

$ yarn add react-native-splash-screen

You can either automatically install it by linking it, or you can manually do it yourself. For more information on manual installation, click here

$ react-native link react-native-splash-screen

Now we have to make some configurations to the native plugins

Configuring Plugins

Note: for IOS, it will only work on a Mac OS X

For Android

Open up the following directory and edit some code

/android/app/src/main/java/com/<project>/MainActivity.java

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

While you are on this part, you might face the following issue:

// for the line on android.os.Bundle 
error: cannot find symbol 

To solve this problem you have to make some additional changes to your code.

First, find the react-native version you are using by searching your package.json or node_modules. Then, go to /android/app/build.gradle and replace the following code line with your own react native version number. It should work after your next build.

dependencies {
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:<your-rn-version>" 
}

For IOS

Open up the following directory and edit some code

/ios/<project-name>/AppDelegate.m

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

Adding your SplashImage

In your main file (ex. Main.js or App.js), add some code.

Note: this is my own personal application, so it may differ with yours

// app/Main.js
import React, { useEffect } from 'react';
import SplashScreen from 'react-native-splash-screen'
const Main: () => React$Node = () => {
    useEffect(()=> {
       // Will hide once application is mounted
       SplashScreen.hide();
    })
}

For Android

Create launch_screen.xml in app/src/main/res/layout and add following code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

Then add a launch_screen.png at app/src/main/res/drawable

You can also add colors and stylings to your splash image.

Add a color in app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

For more examples on how to style your splash screen, take a look here

And that’s it! You created your first splash screen for a react native application.