How to add Splash Screen in a React Native Android App? 🌟
Tags: reactnative, android, java, tutorial
Published: 2020-08-26 13:12:50

Hi there!

The reason why you're here for this is probably that you couldn't find the correct, updated, and easiest solution to this till now! 

But now, worry no more! You've arrived at the right place. I will layout all the steps over here, which I did to implement it within minutes! Let's get this thing started! 🤘

#Step #1
Go to `app/src/main/java/[packageName]` and create a new file `SplashActivity.java` and copy-paste the following code inside it.

```java
package com.packagename; // Replace this with 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 #2
Go to `app/src/main/AndroidManifest.xml` and modify it as follows to use SplashActivity:

Add the following activity inside the `<application>` tag.
```xml
<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>
```

Remove the following intent from the `MainActivity` tag.

```xml
<intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
```

And add `android:exported="true"` inside that activity.

Now, your AndroidManifest.xml should be looking like this:

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

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      
      <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>

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

</manifest>

```

#Step #3
Now, we will declare a `SplashTheme` for `SplashActivity`. Go to `app/src/main/res/values/styles.xml` and add the following style inside `<resources>`.

```xml
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:background">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/background</item>
</style>
```

#Step #4
Go to android\app\src\main\res\values and create a file `colors.xml` if not present already.
We used a background color constant above, so we must add it to our colors.xml file.

```xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Insert your background color for the splash screen -->
    <color name="background">#fff</color>
</resources>
```

#Step #5
Go to `android/app/src/main/res/drawable` (create drawable folder if it doesn't exist already) and place your splash screen image (its's name should be splash_screen.png) here and also create a file `background_splash.xml` with the following code:

```xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/background" />
    <item
        android:drawable="@drawable/splash_screen"
        android:height="300dp"
        android:width="300dp"
        android:gravity="center"
    />
</layer-list>
```

If the size of your splash screen is equal to the size of the device screen, then remove `android:height` and `android:width` from the above-mentioned `<item>` tag.

#Step #6
Install `react-native-splash-screen` module in your project and then import `SplashScreen` from it in your `App.js` file.

```JavaScript
import SplashScreen from 'react-native-splash-screen';
```

We need to display the splash screen only till the first component is mounted, and to do that make a `useEffect` hook inside your App component body (before return) as follows:

>Don't forget to import `useEffect` from `'react'`.

```JavaScript
useEffect(() => {
    SplashScreen.hide();
}, []);
```

#Step #7
Go to `app/src/main/java/[packageName]/MainActivity.java` and import the following modules above other imports.

```java
import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;
```

Add this method to the top of `MainActivity` class.

```java
@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.style.SplashStatusBarTheme);
    super.onCreate(savedInstanceState);
}
```

#Step #8
Go to `android/app/src/main/res/values/styles.xml` to add `SplashStatusBarTheme` just like we did in Step #3.

```xml
<style name="SplashStatusBarTheme" parent="SplashScreen_SplashTheme">
        <item name="android:statusBarColor">@color/background</item>
</style>
```
If you don't do this, then StatusBar will change color to black when the JS code of the app will load.

#Step #9
Go to `android/app/src/main/res/` and create a new folder `layout` (if it doesn't already exist). Inside that folder, create a file `launch_screen.xml` (this file is needed by `react-native-splash-screen library`). Inside that file, create a layout using the previously created background as follows:

```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 #10
Go to `android/app/src/main/res/values/colors.xml` and add the following <color> tag just like we did in step #4, otherwise, the app will crash. Don't change the color value.

```xml
<color name="primary_dark">#000</color>
```

And that's it! We did it! Your splash screen has been added to your app! Go and check it now! Thank me later! 😉

Hope you learned something new from this! 😃

PS: If you have any confusion or encounter any error while following the above-mentioned steps, then feel free to comment below, I will be happy to help you resolve it. 😊

Have a nice day! 🤗