How to Add a Splash Screen and App Icon In React Native?

Amy Rowland TOP 10 No Comments

The app-making process requires different tasks to be taken into consideration. It needs the creation of a codebase, it needs adding different images for a distinctive presentation of the app. As I said that an app-building process needs png (image) files to be stored in its root directory, you cannot overlook the content of the app icon and splash screen.

With React Native app development services, you can adopt an easy technique of adding these two assets to your app. Let’s see how.

Before getting into the main part of the blog, let’s have some theoretical discussions on the topic.

What is meant by a splash screen?

You can refer to the splash screen as the opening screen of the app. It stays for some time before the user accesses the app content. It is completely different from an app icon. Whenever you create a splash screen, you should keep in mind that it will be displayed in the entire app display.

What is meant by an app icon?

You might have noticed a logo whenever you want to open a particular app. This logo is the app icon that we are going to create in this blog. With this logo, you can identify the app you want to use.

Prerequisite criteria

You need to take two pre-requisite criteria under consideration. The first one has to be the setting up of the React Native environment. The other one is the process of making a React Native basic app. You cannot move forward with the current project if you have not met this criterion.

To use the React Native framework in your app development content, you have to get some software like Node.js, Android studio, VS code editor, and others. Check this article, if you have any doubts regarding the setup process.

For any doubt regarding the app-building process, you can visit the tutorial blog and get inclusive insight. From this blog, you will also learn about how to navigate through the VS code editor and add components to your codebase.

Third-party React Native plugin: react-native-splash-screen

Here, I will show you the steps of installing the required third-party plugin.

By importing the splashScreen from this library, you can hide the welcome screen after a specified period of time.

Now, to get this package, you have to run a command on a command prompt. Note, that you need to open the command prompt from your app folder. The command is given below.

npm i react-native-splash-screen –save

Additional criteria to be met

In this segment, you will learn about some additional steps that you have to follow before creating the codebase. This is specific to plugin installation.

Note that, there are two options to get this plugin. You can either go for automatic installation or for manual installation. I will recommend you go with the manual installation.

For the same, follow the steps as I direct. First, open the code editor from your app.

Open android and then gradle. Here, you need to add the following line.

include ‘:react-native-splash-screen’

project(‘:react-native-splash-screen’).projectDir = new File(rootProject.projectDir, ‘../node_modules/react-native-splash-screen/android’)

Now, open android, then the app, and then gradle. Here, you will find a section on dependencies. Under this section add implementation project(‘:react-native-splash-screen’).

Open android, then the app, then src, then main, then java\com\awesomeproject, and then java file to add: import org.devio.rn.splashscreen.SplashScreenReactPackage;

Open android, then the app, then src, then main, then java\com\awesomeproject, and lastly MainActivity.java file to add:

import android.os.Bundle; // here

import com.facebook.react.ReactActivity;

// react-native-splash-screen >= 0.3.1

import org.devio.rn.splashscreen.SplashScreen; // here

In this java file, you need to add

@Override

protected void onCreate(Bundle savedInstanceState) {

SplashScreen.show(this); // here

super.onCreate(savedInstanceState);

}

Consider image 1 to get an idea of how I added the commands in my app’s root directory.

Image 1

Now, make a layout folder under ./main./res. Also, make a file named launchscreen.xml in the layout folder. You can skip this step if you already have these two folders in your project’s root directory.
Open android, then, app, then, src, then main, then res, then layout, and lastly xml from your VS code editor. Add:

<?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”>

</RelativeLayout>

Now we will start adding pictures for both the app icon and splash screen.

Adding the splash screen and app icon?

Note that, you have to download a particular image in png format. Although the image for the app icon will have a specific dimension, the image for the splash screen will not require any definite dimension. After getting the image, create a drawable named folder under the app’s res folder. Paste the image in the drawable folder and name it launch_screen. After that, you have to save the complete process.

Now, we will get into the steps of adding image icons to our app,

Here, you have to consider the dimension of the image. Select an image from the web browser. You have to download this image in five different dimensions and store it in five different files. As you open the res folder, you will notice five distinct files in the name of mipmap-hdpi, mipmap-mdpi, mipmap-xxxhdpi, mipmap-xxhdpi and mipmap-xhdpi. There are already some default images stored in these five folders. All you need to do is substitute these pictures with your downloaded images.

Let me specify the dimensions of the images. For mipmap-hdpi, it is 72*72, for mipmap-xxxhdpi, it is 192*192, for mipmap-xxhdpi, it is 144*144, for mipmap-xhdpi, it is 96*96 and lastly, for mipmap-mdpi, it is 48*48.

And you have successfully customized the image icons and the splash screen. Now you have to frame the app.js folder.

Framing the App.js folder

It will be a small section of coding. You only need to import components and wrap the SplashScreen with the useEffect.

Let’s see how.

import { StyleSheet, Text, View } from ‘react-native’

import SplashScreen from ‘react-native-splash-screen’;

import React,{useEffect} from ‘react’

Apart from the core components, you have to import the vital component SplashScreen from the third-party RN library: react-native-splash-screen.

Now, we will be calling the SplashScreen to hide the welcome screen. Consider the following syntax.

useEffect(()=>{

SplashScreen.hide();

},2000)

As per the syntax, the welcome screen will show for a span of 2 seconds.

const App = () => {

return (

<View>

</View>

)

}

It is the generic codebase that you will find any way in every App.js folder. The purpose of this syntax is to display the text ‘App’.

As we are done with framing the app.js folder, we will see how to start the app on the emulator.

Running the App on the emulator

Open a terminal from your app. Run npm install and then npx react-native run-android. It may take time for the app to bundle. As soon as the bundling process is complete, a screen shown in image 2 will appear on the emulator. Also, refer to image 3 for the app icon.