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