How to add SplashScreen to a ReactNative app with react-native-bootsplash
Tags: reactnative
Published: 2020-12-05 20:30:30

In this article, I'll show you how to easily add a splash screen to a react-native app using [react-native-bootsplash](https://github.com/zoontek/react-native-bootsplash) library. As at the time of writing this, I found it to be a better option than [react-native-splash-screen](https://github.com/crazycodeboy/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. 😄