Emmanuel Etukudo I am a full-stack developer with more than five years of experience with a preference for JavaScript, Node.js, Golang, React, Redux, and MongoDB. You can call me MEAN-STACK Developer if you chose to.

Building a splash screen in React Native

5 min read 1425

React Native Splash Screen

In this tutorial, we’ll demonstrate how to build and show a splash screen in React Native. We’ll walk you through how to build stunning welcome displays for both iOS and Android apps using react-native-splash-screen.

Here’s what we’ll cover:

What is a splash screen?

The splash screen is the first screen that appears before the user accesses the rest of your app’s functionalities. A splash screen is arguably the best way to make your mobile application’s brand name and icon stick in the user’s subconscious.

In web applications, we use preloaders to inform animations to keep users entertained while server operations are being processed. As straightforward as this sounds, it’s a critical tool to build and retain your user base.

There are many benefits to creating a splash screen in React Native. Imagine, for example, that you’re preloading data from an API. You’ll want to show a loader while the user is waiting; showing a loader as soon as the app starts helps you present an organized, well-designed display to your user while they wait for the app to initialize.

React Native splash screen example

For this react-native-splash-screen demo, we’ll build a splash screen for both Android and iOS. The tutorial will walk you through how to prepare the right image sizes, update the necessary files, and hide the splash screen on app load. The finished app will look like the screenshot below:

React Native Splash Screen Example

To follow along with this React Native splash screen tutorial you should have:

  • Familiarity with CSS, HTML, Javascript (ES6)
  • Node.js and Watchman installed on your development machine
  • iOS Simulator or Android Emulator for testing
  • A code editor installed in your development machine (e.g., VS Code)
  • A basic understanding of React/React Native

Let’s get started!

Why image size matters

Creating a splash screen for a mobile application is a bit tricky and you don’t want to risk having display issues on some devices due to inconsistencies in your splash screen resolutions. For instance, the android device’s requirements are totally different from that of iOS. Most experienced designers can create the required splash screen resolutions for both devices from scratch.

We made a custom demo for .
No really. Click here to check it out.

However, there are lots of available third-party tools that can help you create a splash screen for both Android and iOS. In this tutorial, we will be using the App Icon Generator, an online platform for creating icons and images for Android and iOS apps.

Before you proceed, make sure you have a high-definition, 2,000-by-3,000px (72 PPI) image ready. You can clone the starter file for these tutorials on GitHub.

How to build a splash screen in React Native

First, head over to Appicon. Drag your image on the box provided, select 4x as your base size, select iOS and Android, and click generate. This process should take approximately two minutes to complete, depending on your internet speed.

App Icon Generator

Next, extract the downloaded file and copy the iOS and Android folder to the image folder located in the assets directory of the starter project you cloned.

React Native Splash Screen Assets

Building a splash screen in React Native requires some fine-tuning. To begin, if you’re using a Mac, run npm i react-native-splash-screen --save on your terminal (run command prompt if you’re using Windows). cd into the iOS directory and run pod install. Then, cd back to the root directory of the project.

iOS

Open AppDelegate.m and replace the code with the code below:

#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
// Import RNSplashScreen
#import "RNSplashScreen.h"
#ifdef FB_SONARKIT_ENABLED
#import <FlipperKit/FlipperClient.h>
#import <FlipperKitLayoutPlugin/FlipperKitLayoutPlugin.h>
#import <FlipperKitUserDefaultsPlugin/FKUserDefaultsPlugin.h>
#import <FlipperKitNetworkPlugin/FlipperKitNetworkPlugin.h>
#import <SKIOSNetworkPlugin/SKIOSNetworkAdapter.h>
#import <FlipperKitReactPlugin/FlipperKitReactPlugin.h>
static void InitializeFlipper(UIApplication *application) {
  FlipperClient *client = [FlipperClient sharedClient];
  SKDescriptorMapper *layoutDescriptorMapper = [[SKDescriptorMapper alloc] initWithDefaults];
  [client addPlugin:[[FlipperKitLayoutPlugin alloc] initWithRootNode:application withDescriptorMapper:layoutDescriptorMapper]];
  [client addPlugin:[[FKUserDefaultsPlugin alloc] initWithSuiteName:nil]];
  [client addPlugin:[FlipperKitReactPlugin new]];
  [client addPlugin:[[FlipperKitNetworkPlugin alloc] initWithNetworkAdapter:[SKIOSNetworkAdapter new]]];
  [client start];
}
#endif
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"MySplashScreen"
                                            initialProperties:nil];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  // Set the splash screen to show by default.
  [RNSplashScreen show]; 
  return YES;
}
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end

Here, we made two significant changes to the AppDeligate file. First, we imported the RNSplashScreen we installed earlier into the AppDeligate.m. Next, we set the RNSplashScreen to show by default with the code [RNSplashScreen show].

Open the project workspace in Xcode, click images.xcassets, right-click below Appicon, and choose your image. Set the image name to LaunchScreen, open the assets folder, navigate to the Images folder, and open the iOS folder. Inside the splash folder, drag the three images over the three boxes on Xcode named 1x, 2x, 3x:

React Native Splash Screen Images

Next, select LaunchScreen.storyboard. Under View, select the labels SplashScreen and “Powered by React Native,” and press delete on your keyboard. Select view and click the ruler icon. Uncheck “Safe Area Layout Guide,” then click the plus icon + to search for an image. Drag the image view to the view. Finally, click on the constraints icon and set all the constraints to 0:

React Native Splash Screen: Editing the Launch Screen

Now that we have our image view setup, click the image property icon and change the image to LaunchScreen. Set the content mod to aspect fill, as shown below:

React Native Splash Screen: Xcode

To confirm your application can run successfully, run a build from Xcode. You should see something like this:

React Native Splash Screen: Xcode

Android

Now let’s demonstrate how to build a splash screen for Android in React Native.

Navigate into the Android folder, select app, src, main, java, and open MainActivity.java. Replace the code with the code below:

package com.mysplashscreen;
import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // here
public class MainActivity extends ReactActivity {
  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "MySplashScreen";
  }

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
}

Next, create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn’t exist). Add the code below to the launch_screen.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

Copy all the assets for Android into the res folder. Create colors.xml in the values folder and add a color called primary_dark in app/src/main/res/values/colors.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

Open the Android folder in Android Studio, open AVD, and run your application as shown below. If everything is set up correctly, you should see a result similar to the following screenshot:

React Native Splash Screen: LaunchScreen Android

Lastly, to hide the splash screen on app load, you’ll need to do two things:

  1. Import the react-native-splash-screen package into the root component (App.js) of your React Native app
  2. Use React.useEffect() to hide the splash screen with the code below:
    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     *
     * @format
     * @flow strict-local
     */
    
     import React from 'react';
     import {
       TouchableOpacity, View
     } from 'react-native';
     import {NavigationContainer, DefaultTheme } from '@react-navigation/native';
     //Import react-native-splash-screen.
     import SplashScreen from  "react-native-splash-screen";
     
     
     
     import {Login} from "./screens";
     
     const theme = {
       ...DefaultTheme,
       colors:{
         ...DefaultTheme.colors,
         border: "transparent",
       }
     }
     
     
     const App  = () => {
     
      //Hide Splash screen on app load.
       React.useEffect(() => {
         SplashScreen.hide();
       });
       
       return (
         
             
               
             
         
     );
     };
     
     
     
     export default () => {
       return ;
     };

Conclusion

Virtually any mobile application needs a splash screen. Knowing how to build a splash screen for cross-platform apps is a foundational skill that can help you take a step forward in your mobile development career.

: Full visibility into your web apps

LogRocket is a frontend application monitoring solution that lets you replay problems as if they happened in your own browser. Instead of guessing why errors happen, or asking users for screenshots and log dumps, LogRocket lets you replay the session to quickly understand what went wrong. It works perfectly with any app, regardless of framework, and has plugins to log additional context from Redux, Vuex, and @ngrx/store.

In addition to logging Redux actions and state, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also instruments the DOM to record the HTML and CSS on the page, recreating pixel-perfect videos of even the most complex single-page apps.

.
Emmanuel Etukudo I am a full-stack developer with more than five years of experience with a preference for JavaScript, Node.js, Golang, React, Redux, and MongoDB. You can call me MEAN-STACK Developer if you chose to.

Leave a Reply