How to integrate a splash screen in React Native with Bootsplash

Introduction

In this shot, we will learn how to integrate splash screens in React Native for both Android and iOS.

Installation

First, let’s create a new React Native project from the terminal.

npx react-native init reactnativesplash
cd reactnativesplash

Install the react-native-bootsplash package from the terminal.

npm i react-native-bootsplash

Now, place your logo in the root folder and run the command below to generate assets required for both Android and iOS.

npx react-native generate-bootsplash logo.png

Configuration in Android

In the Android folder, create a new folder called “drawable.” Inside the “drawable” folder, create a bootsplash.xml file.

Inside the file, add the following code.

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

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item android:drawable="@color/bootsplash_background" />

    <item>
        <bitmap android:src="@mipmap/bootsplash_logo" android:gravity="center" />
    </item>
</layer-list>

In the “values” folder and inside styles.xml, add the code below.

<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>
</style>

Now, in MainActivity.java, add the lines of code below at the top of the file.

import android.os.Bundle;
import android.view.WindowManager;

import com.facebook.react.ReactActivityDelegate; 
import com.zoontek.rnbootsplash.RNBootSplash; 

Below the getMainComponentName() function, paste the following code.

 @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);      
      RNBootSplash.init(MainActivity.this);
      
  }

Finally, in AndroidManifest.xml, add the following code below the activities.

<activity
  android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
  android:theme="@style/BootTheme"
  android:launchMode="singleTask">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category 
      android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>

In the activity, add the tag below.

android:exported:true

Configuration in iOS

Open the React Native project in Xcode and have your React Native project in your finder. In the iOS folder, drag and drop Bootsplash.storyboard into Xcode. You will get a prompt; click on “finish.”

Now, go to the AppDelegate.m file and the following lines of code.

#import "RNBootSplash.h"

Add the lines of code below.

[self.window makeKeyAndVisible];

// code u need to add 
  
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

// code u need to add 

  return YES; 

Now, go to the terminal and install the pods.

cd ios 
pod install

How to test Android and iOS splash screens

Before we test for Android and iOS devices, we need to import the react-native-bootsplash package in App.js.

In the useEffect hook, we are going to hide the splash screen after 3 seconds when the application opens.

Our App.js should look as follows.

import React, {useEffect} from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';

const App = () => {
  useEffect(() => {
    setTimeout(() => {
      RNBootSplash.hide({fade: true});
    }, 3000);
  }, []);

  return (
    <SafeAreaView>
      <View>
        <Text>Splash Screen</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

Now, let’s test the Android version.

Go to the terminal and run the following code.

npm run android

You should see the splash screen in the Android emulator.

Now, let’s test the iOS version.

npm run ios

Conclusion

In this shot, we learned how to integrate splash screens in both Android and iOS devices for a React Native app.

You can find all the code used in this project here.