How Do I Add a Splash Screen in React Native App for Android?

Android, Android Apps

Adding a Splash Screen in React Native App for Android

React Native is a powerful framework that allows developers to build cross-platform mobile applications using JavaScript. One of the key aspects of creating a great user experience is the splash screen, which is displayed when the app is launched. In this tutorial, we will learn how to add a splash screen in a React Native app specifically for Android.

What is a Splash Screen?
A splash screen is an image or animation that appears when an app is launched. Its purpose is to provide visual feedback to the user while the app loads its initial resources and prepares for use. A well-designed splash screen not only enhances the user experience but also gives your app a more professional look.

Step 1: Prepare Your Image
The first step in adding a splash screen to your React Native app is to prepare an image that will be displayed as the splash screen. The image should be in PNG format and have the desired dimensions for different device resolutions. It’s recommended to create multiple versions of the image with different sizes to ensure it looks good on various devices.

Step 2: Install Required Packages
To add a splash screen functionality to your React Native app, you need to install two packages – `react-native-splash-screen` and `react-native-splash-screen-gradle`.

Open your terminal and navigate to your project directory. Run the following commands:

“`
npm install react-native-splash-screen
npm install react-native-splash-screen-gradle
“`

These packages will help us handle the splash screen implementation smoothly.

Step 3: Link Packages
After installing the required packages, you need to link them with your project using React Native’s linking command:

“`
npx react-native link react-native-splash-screen
npx react-native link react-native-splash-screen-gradle
“`

This will automatically link the packages with your project and ensure they are correctly set up.

Step 4: Configure Splash Screen
Now, let’s configure the splash screen for our React Native app. Open the `android/app/src/main/res` directory in your project and create a new directory called `drawable`.

Inside the `drawable` directory, create a new file called `splash_screen.xml`. This file will define how our splash screen looks.

Copy the following XML code into `splash_screen.xml`:

“`xml





“`

This XML code sets a background color for the splash screen and adds an image at the center of the screen.

Next, open your `android/app/src/main/res/values/colors.xml` file and add the following line inside the `` tag:

“`xml
#FFFFFF “`

This line defines the background color for our splash screen. You can replace “#FFFFFF” with any desired color code.

Remember to replace `”@mipmap/splash_image”` in `splash_screen.xml` with the name of your actual splash screen image file.

Step 5: Modify AndroidManifest.xml
To enable our splash screen in React Native, we need to modify the `AndroidManifest.xml` file. Open it located at `android/app/src/main/AndroidManifest.

Add the following lines inside your `` tag:

“`xml


“`

These lines specify the background color and drawable resource for our splash screen.

Step 6: Code Modifications
We are almost there! Open your `MainActivity.java` file located at `android/app/src/main/java/com/yourappname/MainActivity.java`.

Import the following packages at the top of the file:

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

Then, add the following lines inside your `onCreate()` method, right after the `super.onCreate(savedInstanceState)` line:

“`java
SplashScreen.show(this);
“`

This code will display our splash screen when the app starts.

Congratulations!

You have successfully added a splash screen to your React Native app for Android. Now, when you launch your app, you will see a beautiful splash screen before your main app content loads.

Remember to rebuild your Android app using `react-native run-android` command to see the changes in action.

  • Make sure to follow all steps carefully to avoid any issues.
  • Experiment with different images and colors to customize your splash screen.
  • If you encounter any problems, refer to the official documentation of each package for troubleshooting.

I hope this tutorial has helped you in adding a splash screen to your React Native app. Happy coding!