How to add a Splash Screen and an App Icon in React Native

Prerequisites

To follow this tutorial, please make sure you have the following tools and utilities installed on your local development environment and have access to the services mentioned below:

• Node.js version12.x.xor above installed
• Have access to one package manager such as npm or yarn or npx
• react-native-cli installed, or use npx

Note, the example app is created using React Native version0.63.x. +

Setup a React Native app

As an example for this tutorial, we will use a React Native project with two screens and React Navigation integrated.

To create a new React Native project and install the react-navigation dependencies, run the following command from the terminal window:

npx react-native init BitFritApp

# after the project directory is created
# navigate inside the directory
# and install the following dependencies

yarn add @react-navigation/native @react-navigation/native-stack react-native-safe-area-context react-native-screens

We are picking an icon from Flaticon.com for the BitFritApp .

After creating the original app icon, save it inside the directory src/assets/and name the file original_icon. (Note: you can name the original icon file as per your requirement).

Tip: Make sure your initial app logo is 1024x1024px.

Installing react-native-bootsplash

The initial step is to install the react-native-bootsplash package and then generate assets using it.

Open the terminal window and execute the following command to install the package:

yarn add react-native-bootsplash

# or if using npm
npm install react-native-bootsplash

Next, for iOS, execute the command to install pods.

npx pod-install ios

I