Open the terminal window and execute the following command to install the package: yarn add react-native-bootsplash The initial step is to install the react-native-bootsplash package and then generate assets using it. Tip: Make sure your initial app logo is 1024x1024px.

( Note: you can name the original icon file as per your requirement). We are picking an icon from for the example app.Īfter creating the original app icon, save it inside the directory src/assets/ and name the file original_icon. Notice that the splash screen and the app icon are defaults that come with React Native. Here is what the example app looks like in its current form. With the boilerplate setup done, now let’s build the apps for iOS and Android.įor iOS, run the following command: npx react-native run-iosįor Android, run the following command: npx react-native run-android Add the following code to use the stack navigation pattern inside this file: import * as React from 'react'

Inside src/ directory, create a new directory called navigation/ with a new file named RootNavigator.js. Yarn add react-native-safe-area-context react-native-screens 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 myAwesomeApp Note, the example app is created using React Native version 0.65.x.Ĭomplete source code for this example is at this GitHub repo Setup a React Native appĪs an example for this tutorial, we will use a React Native project with two screens and React Navigation integrated. Have access to one package manager such as npm or yarn or npx.

Node.js version 12.x.x or above installed.

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: In this tutorial, let's learn how to use an awesome package called react-native-bootsplash to display a splash screen when an app starts and then learn the process of adding app icons in a React Native app. Adding a splash screen or an app icon to a React Native app can be an agile process. An app icon is displayed in various places, such as on an app store, on the device's app drawer, etc., whereas a splash screen is shown during the app startup. Every mobile application has a splash screen and an app icon, and together they provide the first impression.

React native android studio and xcode