How to add SplashScreen to a ReactNative app with react-native-bootsplash

#reactnative

In this article, I'll show you how to easily add a splash screen to a react-native app using react-native-bootsplash library. As at the time of writing this, I found it to be a better option than react-native-splash-screen.

Firstly, if you don't have a running ReactNative app, you can create one by simply running this command npx react-native init MyTestApp

After creating your project, open the terminal and install the library with any of these commands:

$ npm install --save react-native-bootsplash
# --- or ---
$ yarn add react-native-bootsplash

I assume you're using React Native 0.60.0+, so I'm not going to talk about Manual linking or Pod linking here.

Next step is to add a logo(image) that will be displayed on the splash screen.

In the root folder, you can create an assets folder where you'll keep your logo and other images too.

Use this command to generate the necessary Android & iOS assets from your logo.

npx react-native generate-bootsplash ./path-to-your-logo-in-assets-folder

iOS
Edit the ios/YourProjectName/AppDelegate.m file:

To import your header, add this line

#import "RNBootSplash.h"

immediately after the

#import <React/RCTRootView.h>

Then, inside the didFinishLaunchingWithOptions block, add this line:

[RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

before the

return YES;

statement to do the initialization using the storyboard file name.

Lastly, ensure to set the BootSplash.storyboard as launch screen file.

Android
Step 1
Edit the android/app/src/main/java/com/yourprojectname/MainActivity.java file:

Firstly, immediately after the package declaration add this line:

import android.os.Bundle;

Next is to import RNBootSplash, immediately after importing React

import com.zoontek.rnbootsplash.RNBootSplash;

Then, add the onCreate method, where we'll display the generated bootsplash.xml drawable over the MainActivity:

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

Step 2
Edit the android/app/src/main/res/values/styles.xml file:
Set the generated bootsplash.xml drawable as activity background

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

Step 3
Edit the android/app/src/main/AndroidManifest.xml file:
Remove the intent-filter tag from .MainActivity and use the .RNBootSplashActivity theme you created.
That means, you'll have this inside application tag:

<activity android:name=".MainActivity" 
  android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize"></activity>
<activity android:name="SomeOtherActivity></activity>
<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>

Note:
On Android, if you get an error like this Security exception: Permission Denial: starting Intent { com.app_name/.MainActivity....

You should go back to your AndroidManifest.xml file and add android:exported="true" as one of the parameters to your .MainActivity tag.
Then delete the .gradle folder inside android folder, open your terminal, run

cd android

and

gradlew clean

Step 4
Go to your App.js and

import RNBootSplash from 'react-native-bootsplash';

Then if you're using functional components, your useEffect hook may look like this:

useEffect(() => {
    // Hide SplashScreen after 3secs or Make an async task
    setTimeout(() => {
      RNBootSplash.hide({ fade: true });
    }, 3000);
  }, []);

Step 5
Enjoy your splash screen. 😄