How to add a Splash Screen and an App Icon in React Native
March 03, 2022
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 version
12.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 version
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
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