How to add a splash screen in React Native with Splashboot

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="http://schemas.android.com/apk/res/android" android:opacity="opaque">
    <item android:drawable="@color/bootsplash_background" />

    <item>
        <bitmap android:src="@mipmap/bootsplash_logo" android:gravity="center" />
    </item>
</layer-list>

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

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

Now, in MainActivity.java, 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:

 @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);      
      RNBootSplash.init(MainActivity.this);
      
  }

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

<activity
  android:name="com.zoontek.rnbootsplash.RNBootSplashActivity"
  android:theme="@style/BootTheme"
  android:launchMode="singleTask">
  <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category 
      android:name="android.intent.category.LAUNCHER"/>
  </intent-filter>
</activity>

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 (
    <SafeAreaView>
      <View>
        <Text>Splash Screen</Text>
      </View>
    </SafeAreaView>
  );
};

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. Thus, the users of your application will be able to find at first glance a dynamic, colorful application that invites its usability.

Developing with React Native is low cost: as it is a cross-platform framework, the cost of developing an application with it is lower than with other technologies. You don't need two separate teams dealing with Android and iOS, even if you already use React on the web you already have an approach to mobile development.

Additionally, React Native has an extensive development community. Since React's native components are open source, it opens the possibility for many more updates and more information about the platform to be found.

 
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. You can also be part of this team, apply here and grow professionally with us, a company with more than 10 years of experience and more than 300 international clients served by our team of certified mobile and website development experts, from all over the world.

Start your career in the world of programming with a team of experts who have created applications and websites in compliance with global trends. React Native is one of the many mobile development technologies used by our developers to provide effective solutions to our clients' problems.
 

We recommend you on video