Simple Splash Screen in React Native
Tags: reactnative, mobile, ux
Published: 2021-06-14 20:49:20

> 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](https://appicon.co/#image-sets), 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.

![appicon.co_.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1623684808704/myM8_VCbv.png)
*remember to rename your image sets to launch_screen*

## Building the splash screen 

Open your react-native project in VS Code.

### Install the package

```sh
#npm
npm install react-native-splash-screen

#yarn
yarn add react-native-splash-screen
```
### Plugin configuration

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

```sh
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 <code>launch_screen.xml</code> in <code>/android/app/src/main/res/layout</code> (create the <code>layout</code>-folder if it doesn't exist). The contents of the file should be the following:

```sh
<?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](https://appicon.co/#image-sets) earlier, Copy all the folders in the <code>/android</code> into the <code>/android/app/src/main/res</code> folder in your project directory. 

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

```sh
<?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 <code>App.jsx</code>

```sh 
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](https://reactnative.dev/docs/environment-setup)
- [react-native-splash-screen](https://github.com/crazycodeboy/react-native-splash-screen)