How to add a splash screen in React Native with Splashboot

December 20, 2021

Tags: Technologies
react native



React's younger brother, this is how developers refer to React Native, an open source framework created by Facebook to develop applications on Android, iOS and Windows. It is one of the most popular mobile app frameworks among the developer community.


The possibilities that React Native offers you to create are quite numerous, including all the functions that are present in the application development process, including the possibility of adding a splash screen, or start screen at the beginning of the application.


What is the Splash Screen in React Native?


The splash screen, or welcome screen, is a view or screen that is shown when the application is started for the first time, being useful when said mobile application requires to show essential information before starting. The application has the possibility to load the information from some external API or local storage.


This information displayed on the Splash Screen is very important because without it the application may not be able to display the user interface, needing to verify if the user is authorized and then decide which screen to display.


This screen does not last long being visible, between three and five seconds and then it will automatically hide. It will be displayed when the application is started again from scratch.


How to add a splash screen in React Native with Bootsplash


Bootsplash is a term for a graphical representation of the operating system boot process. Bootsplash can be a simple display of startup messages scrolling on the screen, but it can also present graphics or some combinations of both.


Unlike splash screens, bootsplash is not necessarily designed for marketing purposes, but it can enhance the user experience as a visual appeal or provide the user with messages to diagnose the health of the system.


We are going to create a splash screen in an application developed with React Native:


First, let's create a new React Native project from the terminal.


npx react-native init reactnativesplash
cd reactnativesplash


After this, we must install the react-native-bootsplash package from the terminal. When we have the first two steps ready, we proceed to place the logo in the root folder and execute the following command to generate the necessary assets, both on Android and iOS.


npx react-native generate-bootsplash logo.png


Settings on Android


In the Android folder, create a new folder called "drawable". Inside the "drawable" folder, create a bootsplash.xml file. When this file is created, add the following code inside:


<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="" android:opacity="opaque">
    <item android:drawable="@color/bootsplash_background" />

        <bitmap android:src="@mipmap/bootsplash_logo" android:gravity="center" />


In the "values" folder and inside styles.xml, add the code below:


<style name="BootTheme" parent="AppTheme">
    <item name="android:background">@drawable/bootsplash</item>


Now, in, add the following lines of code to the top of the file:


import android.os.Bundle;
import android.view.WindowManager;

import com.facebook.react.ReactActivityDelegate; 
import com.zoontek.rnbootsplash.RNBootSplash; 


Under the getMainComponentName () function, paste the following code:


  protected void onCreate(Bundle savedInstanceState) {


Finally, when you finish all these steps, in AndroidManifest.xml add the following code below the activities:


    <action android:name="android.intent.action.MAIN" />


In the activity, add the tag android:exported:true


Configuration in iOS


To configure the display in iOS, open the React Native project in Xcode and at the same time, have your React Native project in your browser. In the iOS folder, drag and drop Bootsplash.storyboard into Xcode. You will receive a message; click "finish".

Now, head over to the AppDelegate.m file and add the following line of code: #import "RNBootSplash.h"


[self.window makeKeyAndVisible];

// code u need to add 
  [RNBootSplash initWithStoryboard:@"BootSplash" rootView:rootView];

// code u need to add 

  return YES; 


Now, go to the terminal and install the pods.


How to test Android and iOS splash screens


Before we test for Android and iOS devices, we need to import the react-native-bootsplash package in App.js. In the useEffect hook, we are going to hide the splash screen after 3 seconds when the application opens. Our App.js should look as follows:


import React, {useEffect} from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import RNBootSplash from 'react-native-bootsplash';

const App = () => {
  useEffect(() => {
    setTimeout(() => {
      RNBootSplash.hide({fade: true});
    }, 3000);
  }, []);

  return (
        <Text>Splash Screen</Text>

export default App;


To test the version on Android. go to the terminal and run the code that we give you below. You should see the splash screen in the Android emulator.


npm run android


Now, let's test the iOS version.


npm run ios


With this process, we can have a splash screen at the beginning of our application created with React Native that contains all the necessary information to later launch the proper user interface.


At Rootstack, our expert developers have created several applications with React Native, some with splash screens, giving solutions to the problems that our clients present and you can also be part of this team, apply here and grow professionally with us.


We recommend you on video


Yes, I liked thiscontent.