Simple Splash Screen in React Native

A splash screen is a screen that appears when you open an app on your mobile device. Sometimes it's referred to as a launch screen or startup screen.

A splash screen being a startup screen can also serve as a form of good user experience while waiting for the background activity in your app to complete.

In this article, I'll introduce you to how you can implement a splash screen in react native with a focus on android.

Prerequisites

Before you begin this tutorial you'll need the following:

• VS Code installed
• Nodejs installed
• NPM installed
• React native installed
• Android Emulator for testing

Should you consider size?

As much as mobile apps are more straightforward than web apps, you don’t want to risk having display issues on some devices due to inconsistencies in your splash screen resolutions. Experienced designers can create the required splash screen resolutions for both android and IOS from scratch.

In this tutorial, we will be using the App Icon Generator, an online platform for creating icons and images for Android and iOS apps.

Before you proceed, make sure you have a high-definition, 2,000-by-3,000px (72 PPI) image ready.

remember to rename your image sets to launch_screen

Building the splash screen

Open your react-native project in VS Code.

Install the package

#npm
npm install react-native-splash-screen

#yarn
yarn add react-native-splash-screen

Plugin configuration

Navigate into /android/app/src/main/java/MainActivity.java. Replace the code with the code below:

package com.splash;
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "Splash";
  }
}

Add the splash screen

Create a file called launch_screen.xml in /android/app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

Extract the generated zip file from App Icon Generator earlier, Copy all the folders in the /android into the /android/app/src/main/res folder in your project directory.

Create colors.xml in /app/src/main/res/values. The content should be this:

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

Finally, to hide the splash screen after the app loads,
go to your App.jsx

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

const App = () => {
    useEffect(() => {
        SplashScreen.hide()
    }, [])

    return (
        // Your Component
    )
}

Conclusion

We could have chosen to create the splash screen without the package but the react-native-splash screen ensures the splash screen stays till all JavaScript files load meanwhile in the other approach
the splash screen will not come up until all JavaScript files finish compiling.

Check out the following resource for in-depth understanding.

• React Native Documentation
• react-native-splash-screen

Comments

[wackyizzy]

there are two files in the /app/src/main/res/values
which one do I change?

[Itunu Lamina]

colors.xml if it exist
Create one if it doesn't exist

[wackyizzy]

yarn add react-native-splash-screen

[Oluwatofunmi okedeji]

good stuff... why do I have to use this approach when I could just use the start screen of the App.jsx and set time out

[Itunu Lamina]

Yes, you can of course use the time out approach from navigation but since all JavaScript codes need to finish compiling before the app starts up completely, it's going to be a form of bad user experience showing the initial white screen as a result of react native performance while the app loads, hence this approach.

[wackyizzy]

app keeps crushing

[wackyizzy]

If you are struggling with this use react native boot splash it much more efficient than this and recently I used it and it worked like charm

[wackyizzy]

trying it now