Why we need a perfect splash screen –

Here we are going to discuss the topic “How to add a Splash Screen in React Native App“, which is very important part of any app because this is a first screen which user see in your app.

output Example –

So when it comes to the implementation we can break the topic into two main parts –

1. Add a native splash screen(platform based).
2. Splash screen for react-native app.

Now here a very important question why we add a native splash screen – so the answer is, when you open your app you see the blank screen(white screen) for a time gap after that you able to see your react native splash screen.

Now i think you understand the importance of adding the splash screen natively and react native side is very important.

So let’s start the implementation of steps.

Part 1 – Add a native splash screen(platform based)

For adding native based splash screen, we need to perform the some changes in android studio side, please follow all the steps carefully.

Step 1 – Create a splash image

You need to copy your splash screen and put it into all drawable folders.

path is – android/app/src/main/res

• mdpi = splash.png
• hdpi = splash@2x.png
• xhdpi = splash@3x.png
• xxhdpi = splash@3x.png
• xxxhdpi = splash@3x.png

you can see it in below image.

Step 2 – Create a Drawable folder and background_splash.xml file

In this step you need to create a drawable folder at the location of src => main => res => drawable(if already not created) and here you need to create a file background_splash.xml 

and put the following code in this file

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:drawable="@android:color/white"/>
 <item android:drawable="@drawable/splash" android:gravity="center" />

<!-- use this if you want custome height and width of native screen <item android:height="600dp" android:width="400dp" android:drawable="@drawable/splash" android:gravity="center" /> -->

</layer-list>

Step 3 – Adding background colour

Here we are going to create a custom file for splash screen background colour, create a file with the name of colors.xml .

path is – res/values

and put the following code in this file.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="splashscreen_bg">#424242</color>
    <color name="app_bg">#FFFFFF</color>
</resources>

Step 4 – Creating splash activity

Here we are going to create a separate activity for splash screen, for creating this you need to go to the android/app/src/main/java/com/projectName/ and here create a file with the name of SplashActivity.java and after it looks like –

path => android/app/src/main/java/com/projectName/SplashActivity.java

and put the following code in this file

package com.splash; // 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();
  }
}

Step 5 – Modify your AndroidManifestFile.xml to use SplashActivity initially

Now you all need to add your splash activity into your main activity, so it shows the splash activity first then show your main activity.

your file is look like –

<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.splash">

<uses-permission android:name="android.permission.INTERNET" />
//main activity  
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:usesCleartextTraffic="true" android:theme="@style/AppTheme">

//adding this line, this is a start of your splash activity
    <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>
//this is a end of your splash activity

<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:windowSoftInputMode="adjustResize" android:exported="true">
</activity>
<activity 
   android:name="com.facebook.react.devsupport.DevSettingsActivity" /></application>

</manifest>

Step 6 – Declare the SplashScreenTheme us for splashActivity

As you can see, SplashActivity uses SplashScreenTheme, which is not yet declared, to do this you need to modify app/src/main/res/values/styles.xml and add the new style which is following

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Add the following line to set the default background 
        color for all the app. -->
        <item name="android:windowBackground">@color/app_bg</item>
        <item name="android:textColor">#000000</item>
    </style>

    <!-- Adds the splash screen definition -->
    <style name="SplashTheme" 
         parent="Theme.AppCompat.Light.NoActionBar">
        <item 
         name="android:background">@drawable/background_splash</item>
    </style>
</resources>

So here part 1 is completed, now we move to the part 2 of this tutorial which is –

Part 2 – Adding Splash screen in react-native app side

For adding splash screen in react native side follow all the steps carefullly.

let’s start-

Step 1 – Creating project

Firstly we need to create a react native project

react-native init splashScreenProject

Step 2 – Run the project

Now you need to go to the project path and run your project.

cd splashScreenProject

Now we install the third party for splash screen

npm i react-native-splash-screen

Run the server

npm start

Step 3 – Creating the splash screen file

Here we need to create a file which is for splash screen, name is splashscreen.js

//import react components here..
import React, {Component} from 'react';
import {Images, Colors} from '../themes';
import {Image, View, ActivityIndicator} from 'react-native';
import {Actions, ActionConst} from 'react-native-router-flux';

export default class Splash extends Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
    this.state = {
      visible: true,
      islogin: ''
    };
  }

  //Methods:- react life cycle methods
//check if the user user is logged in or not then redirect the user
  async componentDidMount() {
    var islogin = await PreferenceManager.getPreference(IS_LOGIN);
    if (islogin == null || islogin == undefined || islogin == false) {
      setTimeout(() => {
        this.setState({visible: false});
        Actions.Login({type: ActionConst.RESET});
      }, 4000);
    } else {
      setTimeout(() => {
        this.setState({visible: false});
        Actions.Home({type: ActionConst.RESET});
      }, 4000);
    }
  }

  //Design:- render design here..
  render() {
    return (
      <Image
        source={Images.splash}
        style={{
          height: '100%',
          width: '100%',
        }}
      />
    );
  }
}

Step 4 – Setup the navigation

Here we are going to setup the navigation, remember one thing that splash screen is your first page after navigation setup.

  render() {
    const {isLogin} = this.state;
    return (
      <Router backAndroidHandler={this.onBackPress} duration={150}>
        <Scene key="root" hideNavBar={true}>
          <Scene hideNavBar key={'Splash'} component={Splash} />
       </Scene>
    </Router>
 )
}

Note – How to fill the gap between native and react native view

This is a very important part of adding splash screen in react native, when you run the react native app then you see a blank screen for few second between native and react native splash screen view for doing this you need to follow only 2 – more steps, so let’s integrate it.

Step 1 –

To work properly the react-native-splash-screen library needs a file named launch_screen.xml inside the app/src/main/res/layout directory. In this file, create a layout using the previously created background.

it’s look like –

Write the following code in launch_screen.xml

<?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="@drawable/background_splash" />

Step 2 –

Then modify MainActivity.java for calling third party splash screen plugin, add the following line of code.

package packageName;//it your package name

import android.os.Bundle;//add this line
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;//add this line

public class MainActivity extends ReactActivity {

//add these lines 
 @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashTheme);
    super.onCreate(savedInstanceState);
  }

  @Override
  protected String getMainComponentName() {
    return packageName;
  }
}

Step 3 –

Here we are going to hide the splash screen in app side, you need to modify your splash.js file

//import react components here..
import React, {Component} from 'react';
import PreferenceManager from '../utils/PreferenceManager';
import {IS_LOGIN} from '../constants';
import {Images, Colors} from '../themes';
import {Image, View, ActivityIndicator} from 'react-native';
import {Actions, ActionConst} from 'react-native-router-flux';
import {setI18nConfig} from '../translations/translateConstant';
import SplashScreen from 'react-native-splash-screen';//add this line

export default class Splash extends Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
    this.state = {
      visible: true,
    };
  }

  //Methods:- react life cycle methods
  async componentDidMount() {
    var islogin = await PreferenceManager.getPreference(IS_LOGIN);
    if (islogin == null || islogin == undefined || islogin == false) {
      setTimeout(() => {
        SplashScreen.hide();//add this line
        Actions.Login({type: ActionConst.RESET});
      }, 1000);
    } else {
      setTimeout(() => {
        SplashScreen.hide();//add this line
        Actions.Home({type: ActionConst.RESET});
      }, 1000);
    }
  }

  //Design:- render design here..
  render() {
    return (
      <Image
        source={Images.splash}
        style={{
          height: '100%',
          width: '100%',
        }}
      />
    );
  }
}

Now your native portion is also done.

So we completed the react native splash screen showing functionality in this tutorial which is “How to add a Splash Screen in React Native App“.

You can find my post on medium as well click here please follow me on medium as well.

You can find my next post here.

If have any query/issue, please feel free to ask.

Happy Coding Guys.