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

Published on Oct 1, 2021

10 min read

REACT-NATIVE

Every mobile application has a splash screen and an app icon, and together they provide the first impression. 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. Adding a splash screen or an app icon to a React Native app can be an agile process.

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.

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 version 12.x.x or 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 0.65.x.

Complete source code for this example is at this GitHub repo

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 myAwesomeApp
# 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

Inside src/ directory, create a new directory called navigation/ with a new file named RootNavigator.js. Add the following code to use the stack navigation pattern inside this file:

1import * as React from 'react';
2import { NavigationContainer } from '@react-navigation/native';
3import { createNativeStackNavigator } from '@react-navigation/native-stack';
4
5import HomeScreen from '../screens/HomeScreen';
6import DetailScreen from '../screens/DetailScreen';
7
8const Stack = createNativeStackNavigator();
9
10const RootNavigator = () => {
11 return (
12 <NavigationContainer>
13 <Stack.Navigator screenOptions={{ headerShown: false }}>
14 <Stack.Screen name="Home" component={HomeScreen} />
15 <Stack.Screen name="Details" component={DetailScreen} />
16 </Stack.Navigator>
17 </NavigationContainer>
18 );
19};
20
21export default RootNavigator;

Modify the App.js file:

1import React from 'react';
2
3import RootNavigator from './src/navigation/RootNavigator';
4
5const App = () => {
6 return <RootNavigator />;
7};
8
9export default App;

Now, let’s create two new screens. Start by creating a new directory called src/screens/ and inside it, add the first file with the name HomeScreen.js and with the following code snippet:

1import React from 'react';
2import { View, Text, StyleSheet, Pressable } from 'react-native';
3
4const HomeScreen = ({ navigation }) => {
5 return (
6 <View style={styles.screenContainer}>
7 <Text style={styles.title}>Home Screen</Text>
8 <Pressable
9 style={styles.buttonStyle}
10 onPress={() => navigation.navigate('Details')}
11 >
12 <Text style={styles.buttonTextStyle}>Go To Detail Screen</Text>
13 </Pressable>
14 </View>
15 );
16};
17
18const styles = StyleSheet.create({
19 screenContainer: {
20 flex: 1,
21 justifyContent: 'center',
22 alignItems: 'center',
23 backgroundColor: '#fff'
24 },
25 title: {
26 fontSize: 32
27 },
28 buttonStyle: {
29 height: 54,
30 width: '80%',
31 marginTop: 32,
32 borderRadius: 8,
33 alignItems: 'center',
34 justifyContent: 'center',
35 backgroundColor: '#2EE59D',
36 shadowRadius: 5,
37 shadowOpacity: 0.7,
38 shadowColor: 'rgba(46, 229, 157, 0.5)',
39 shadowOffset: {
40 width: 0,
41 height: 3
42 }
43 },
44 buttonTextStyle: {
45 color: '#fdfdfd',
46 fontWeight: '700'
47 }
48});
49
50export default HomeScreen;

Now, add the second screen component file, DetailScreen.js, and the following code snippet:

1import React from 'react';
2import { View, Text, StyleSheet, Pressable } from 'react-native';
3
4const DetailScreen = ({ navigation }) => {
5 return (
6 <View style={styles.screenContainer}>
7 <Text style={styles.title}>Detail Screen</Text>
8 <Pressable
9 style={styles.buttonStyle}
10 onPress={() => navigation.navigate('Home')}
11 >
12 <Text style={styles.buttonTextStyle}>Go To Home Screen</Text>
13 </Pressable>
14 </View>
15 );
16};
17
18const styles = StyleSheet.create({
19 screenContainer: {
20 flex: 1,
21 justifyContent: 'center',
22 alignItems: 'center',
23 backgroundColor: '#fff'
24 },
25 title: {
26 fontSize: 32
27 },
28 buttonStyle: {
29 height: 54,
30 width: '80%',
31 marginTop: 32,
32 borderRadius: 8,
33 alignItems: 'center',
34 justifyContent: 'center',
35 backgroundColor: '#2EE59D',
36 shadowRadius: 5,
37 shadowOpacity: 0.7,
38 shadowColor: 'rgba(46, 229, 157, 0.5)',
39 shadowOffset: {
40 width: 0,
41 height: 3
42 }
43 },
44 buttonTextStyle: {
45 color: '#fdfdfd',
46 fontWeight: '700'
47 }
48});
49
50export default DetailScreen;

With the boilerplate setup done, now let’s build the apps for iOS and Android.

For iOS, run the following command:

npx react-native run-ios

For Android, run the following command:

npx react-native run-android

Here is what the example app looks like in its current form. Notice that the splash screen and the app icon are defaults that come with React Native.

js1

We are picking an icon from Flaticon.com for the example app.

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).

js2

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

Tip: If you use a React Native version lower than 0.60, please follow the instructions here to link the package manually.

Next, add the following script in the package.json file under the "scripts" section:

1"scripts": {
2 "generate": "npx react-native generate-bootsplash ./src/assets/original_icon.png --background-color=2EE59D --logo-width=100 --assets-path=./src/assets --flavor=main"
3}

Here is each option described:

  • generate-bootsplash is the command to generate the assets.
  • ./src/assets/original_icon.png is the path to the original icon file. The path may vary depending on where you save the file in your React Native project.
  • --background-color=hexadecimal_value is a color value in hexadecimal format. The color here is used as the background color of the splash screen.
  • --logo-width=100 is the width of the logo. This is a default value provided by the package
  • assets-path is the path to the assets directory.
  • flavor is an Android only option. Let's pass the value main here to target the default version of the Android app. You can learn more about Build Variants on Android here.

This will generate assets in the path specified for the option assets-path, a storyboard called BootSplash.storyboard file inside the ios/app-name directory, as well as generate assets for the Android app inside different sub-directories of the android/app/src/main/res folder.

js3

Android requires five different sizes for different screen pixel densities. Icons for lower resolution are created automatically from the baseline (mdpi). Refer to the table below for more information on pixel densities:

ResolutionDensityPixel units
mdpi (Baseline)160 dpi
hdpi240 dpi1.5×
xhdpi320 dpi
xxhdpi480 dpi
xxxhdpi640 dpi

Adding splash screen on iOS

🔗

Start by opening the file ios/app-name.xcodeproj in Xcode.

js4

Then, drag the file BootSplash.storyboard under the Project directory in the Xcode file manager on the left side of the Xcode from the path ios/app-name/ directory.

js5

After dragging it, Xcode will prompt the following to create a folder reference. First, make sure that under the Add to targets option, the app-name is selected. Then click the Finish button.

js6

The BootSplash.storyboard file will now be represented in the file manager as shown below:

js7

Click on the BootSplash.storyboard file to verify that the background color was added when generating assets.

js8

Select the Xcode project from the file manager and select BootSplash from the dropdown menu next to Launch Screen File.

js9

Now, open the ios/app-name/AppDelegate.m file and add the import to the following header reference:

1#import "AppDelegate.h"
2
3#import <React/RCTBridge.h>
4#import <React/RCTBundleURLProvider.h>
5#import <React/RCTRootView.h>
6
7#import "RNBootSplash.h" // <- add this

In the same file, add the following line to initialize the BootSplash.

1@implementation AppDelegate
2
3- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
4{
5 // ... other statements
6 [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];
7 return YES;
8}

Adding splash screen on Android

🔗

Start by modifying the android/app/src/main/java/com/app-name/MainActivity.java file.

1package com.rnsplashandiconexample;
2
3import com.facebook.react.ReactActivity;
4
5// ----- Add the following imports --------
6import android.os.Bundle;
7import com.zoontek.rnbootsplash.RNBootSplash;
8
9public class MainActivity extends ReactActivity {
10
11 /**
12 * Returns the name of the main component registered from JavaScript. This is used to schedule
13 * rendering of the component.
14 */
15 @Override
16 protected String getMainComponentName() {
17 return "rnSplashAndIconExample";
18 }
19
20 // ----- Add the following --------
21 @Override
22 protected void onCreate(Bundle savedInstanceState) {
23 super.onCreate(savedInstanceState);
24 RNBootSplash.init(R.drawable.bootsplash, MainActivity.this);
25 }
26}

Then, modify the android/app/src/main/res/values/styles.xml file:

1<resources>
2
3 <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
4 <item name="android:textColor">#000000</item>
5 </style>
6
7 <!-- Add the following lines (BootTheme should inherit from AppTheme) -->
8 <style name="BootTheme" parent="AppTheme">
9 <!-- set the generated bootsplash.xml drawable as activity background -->
10 <item name="android:background">@drawable/bootsplash</item>
11 </style>
12
13</resources>

Next, modify the android/app/src/main/AndroidManifest.xml file by removing the original <intent-filter> tag and its contents. Replace it by adding android:exported="true" and create a new activity element to use the theme created in the previous step.

1<activity
2 android:name=".MainActivity"
3 android:label="@string/app_name"
4 android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
5 android:launchMode="singleTask"
6 android:windowSoftInputMode="adjustResize"
7 android:exported="true"> <!--- Add this -->
8</activity>
9
10<!-- Then, add the following lines -->
11<activity
12 android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
13 android:theme="@style/BootTheme"
14 android:launchMode="singleTask">
15 <intent-filter>
16 <action android:name="android.intent.action.MAIN" />
17 <category android:name="android.intent.category.LAUNCHER" />
18 </intent-filter>
19</activity>

Control how to display a splash screen when the navigator is mounted

🔗

You can control the behavior of the splash screen to display until all the children of the React Navigation's NavigationContainer are mounted for the first time. This can be done by using a prop on the NavigationContainer called onReady.

Modify the RootNavigator.js file by importing the react-native-bootsplash and adding the prop onReady.

1// after other import statements
2import RNBootSplash from 'react-native-bootsplash';
3
4const RootNavigator = () => {
5 return (
6 <NavigationContainer onReady={() => RNBootSplash.hide()}>
7 {/* Rest remains same */}
8 </NavigationContainer>
9 );
10};

Testing the splash screen configuration

🔗

The last step to see the splash screen in action is to run the build command for both iOS and Android.

Open the terminal window and run the command to build the app for iOS and Android:

# for iOS
npx react-native run-ios
# for Android
npx react-native run-android

Here is the output after this step:

js10

Adding app icon to iOS app

🔗

To generate assets for different iOS devices, I am using a free app icon generator called appicon.co.

js11

After generating all the image assets, you will be able to download them in a zip file.

Uploading an app icon for iOS follows the same process as using native iOS development. Open the file ios/app-name.xcodeproj in Xcode. Select the Image.xcassets from the file manager. Then select the AppIcon.

js12

Drag and drop all the required image assets after downloading and unzipping them from appicon.co. Place the images as per the necessary pixel densities. After you are done, here is how the Xcode might look like:

js13

Open a terminal window and run the command to build an app for iOS:

npx react-native run-ios

After the rebuild, the app icon will display.

js14

Adding app icon to Android app

🔗

The leverage react-native-bootsplash package generates all the app icons for Android and stores them in the multiple sub-directories under the android/app/src/main/res directory.

js15

The simple way here is to replace the default values for the properties android:icon and android:roundIcon in the android/app/src/main/AndroidManifest.xml file to point to the bootsplash_logo file name.

1<application
2 android:name=".MainApplication"
3 android:label="@string/app_name"
4 // modify the two lines below
5 android:icon="@mipmap/bootsplash_logo"
6 android:roundIcon="@mipmap/bootsplash_logo"
7 // ----------------------------
8 android:allowBackup="false"
9 android:theme="@style/AppTheme">

After this modification, rebuild the Android app using the following command from a terminal window:

npx react-native run-android

After the rebuild, the app icon will display.

js16

Conclusion

🔗

Once you get the hang of this process, it doesn't take much time. Those are all the necessary steps to add a splash screen and an app icon to a React Native app.

For more advanced usage of react-native-bootsplash please check its official documentation here on GitHub. There are some advanced strategies explained there, including animating the splash screen.

Complete source code for this example is at this GitHub repo


More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working maintaining docs at 𝝠 Expo. Read more about me on the About page.


Copyright ©  2019-2024 Aman Mittal · All Rights Reserved.