How to integrate a splash screen to your React Native app

In this post, I will be discussing how to integrate a splash screen to your React Native app.

My app is the mobile version of this website Neo Budget. I have made it production-ready; you can view the finished product below.

Now, let’s learn the steps to integrate a splash screen into our app.

This post covers splash screen for Android.

Step 1:

Hop on to your code editor and go to the Android folder. This is where we will be doing everything.

Now, go to the Java folder (as shown below) and create a new file named SplashActivity.java.

Remember, you must use the file names discussed in this post in your project or errors will pop up.

Paste the code below in SplashActivity.java.

package com.notifier; // make sure this is 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:

Now, go to AndroidManifest.xml and modify your code so that it includes the code specific to the splash screen.

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

   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.VIBRATE" />
   <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
   <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
   <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
   <application
     android:name=".MainApplication"
     android:label="@string/app_name"
     android:icon="@mipmap/ic_launcher"
     android:roundIcon="@mipmap/ic_launcher_round"
     android:allowBackup="false"
     android:theme="@style/AppTheme">      

     <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"
       >
       <intent-filter>
           <action android:name="android.intent.action.MAIN" />
           <category android:name="android.intent.category.LAUNCHER" />
           <action android:name="android.intent.action.DOWNLOAD_COMPLETE"/>  
       </intent-filter>
     </activity>

       <!-- Code for Splash screen starts here -->

<activity
   android:name=".SplashActivity"
   android:theme="@style/SplashTheme"
   android:label="@string/app_name">
   
  </activity>

<!-- Code for Splash screen endshere -->

<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>

</manifest>

You have to note android:exported=“true” in the second activity field and include it in your code – it will not be present at first.

Step 3:

Now, hop on to res folder in Main–>res.

Here we are going to create two new folders and add some files to them.

Ok, let’s create two folders, layout and drawable (names must be the same).

In the drawable folder, create a file named background_splash.xml and paste the following code.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:drawable="@color/blue"/>

    <item
        android:width="200dp"
        android:height="200dp"
        android:drawable="@mipmap/ic_launcher"
        android:gravity="center" />

</layer-list>

Now, in the layout folder create a file called launch_screen.xml and paste the following code.

<?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="@color/blue"
    android:gravity="center">
</LinearLayout>

Step 4:

In the same res folder, create a folder called values and make three files:

1. colors.xml
2. strings.xml
3. styles.xml

Now, we are going to add the color of our splash screen’s background in colors.xml.

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

Then, in strings.xml, we are going to add the name of our app.

<resources>
    <string name="app_name">notifier</string>
</resources>

In styles.xml, we will use both of the concepts discussed above.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="android:textColor">#000000</item>
    </style>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/background_splash</item>
        <item name="android:statusBarColor">@color/blue</item>
    </style>

</resources>

Step:5

Now, the last step is to actually include the splash screen in our react-native app.

We need to install react-native-splash-screen with npm in our root folder and then include some code in our App.js.

npm install react-native-splash-screen

InApp.js, we will be using this package to help us close our splash screen when the app loads for the first time. If we do not include this line in our code, our app will be stuck on the splash screen.

In order to achieve this in in App.js we will use useEffect.

import React,{useEffect} from 'react';
import {View,Text} from 'react-native'
import SplashScreen from 'react-native-splash-screen';

const App = () =>{
useEffect(() => {
    SplashScreen.hide();
  }, []);
  return(
  
<View>
<Text>Neo Budget
</Text>
</View>
)
}

export default App;
  

Congratulations, you have now included a splash screen into your app with your logo!

The content from this post should work, as shown below.