React Native Splash Screen

In this tutorial we will learn how to create a splash screen in react native for android

We will use the following plugin for the react native splash screen

React Native Splash Screen

1. Installation
2. Getting Started
3. Usage
4. API

1. Installation

First step(Download)

  Run  npm i react-native-splash-screen --save

Second step(Plugin Installation)

Automatic installation

react-native link react-native-splash-screen or rnpm link react-native-splash-screen

Manual installation

1. In your android/settings.gradle file, make the following additions:

include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')

1. In your android/app/build.gradle file, add the :react-native-splash-screen project as a compile-time dependency:

...
dependencies {
    ...
    compile project(':react-native-splash-screen')
}

1. Update the MainApplication.java file to use react-native-splash-screen via the following changes:

// react-native-splash-screen >= 0.3.1 
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1 
import com.cboy.rn.splashscreen.SplashScreenReactPackage;
 
public class MainApplication extends Application implements ReactApplication {
 
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }
 
        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here 
            );
        }
    };
 
    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}

Third step(Plugin Configuration):

Update the MainActivity.java to use react-native-splash-screen via the following changes:

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 

}

3. Getting started

Import react-native-splash-screen in your JS file.

import SplashScreen from 'react-native-splash-screen'




Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). 

The contents of the file should be the following:

<?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/launch_screen">
</LinearLayout>

Customize your launch screen by creating a launch_screen.png-file and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

• drawable-ldpi
• drawable-mdpi
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-xxxhdpi

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

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

Optional steps

If you want the splash screen to be transparent, follow these steps.

Open android/app/src/main/res/values/styles.xml and add <item name="android:windowIsTranslucent">true</item> to the file. It should look like this:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

If you want to customize the color of the status bar when the splash screen is displayed:

Create android/app/src/main/res/values/colors.xml and add

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="status_bar_color"><!-- Colour of your status bar here --></color>
</resources>

Create a style definition for this in

 android/app/src/main/res/values/styles.xml:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
        <item name="colorPrimaryDark">@color/status_bar_color</item>
    </style>
</resources>

Change your show method to include your custom style:

  SplashScreen.show(this, R.style.SplashScreenTheme);

3. Usage

import SplashScreen from 'react-native-splash-screen'
 
export default class WelcomePage extends Component {
 
    componentDidMount() {
            // do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

4. API

Method	Type	Optional	Description
show()	function	false	Open splash screen (Native Method )
hide()	function	false	Close splash screen