Photo by Dmitry Chernyshov on Unsplash

React Native Notes 25: How to build a native Splash Screen on React Native App?

Splash screen is one of the most important thing for a mobile app.

Every mobile application has a splash screen. As it provides the first impression to the application, it should be as simple as possible and elegant.

WrathChaos/react-native-splash-screen-example

Let’s make our native splash screen example :)

First of all, we’re going to use react-native-splash-screen library. Do not worry, it looks old but works great :)

Install the library

npm i react-native-splash-screen
npx pod-install (for iOS Only)

Make our splash screen ready for ImageSets

We need to make our splash screen file to be just ready for both iOS and Android since both of them require different types of resolutions and folder types.

We will use App Icon Generator to make them different sizes. It is a free web software.

App Icon Generator Image Sets

We will select ImageSets tab in App Icon Generator. It will create @1x, @2x and @3x, splash screen resolutions for iOS and mdpi , hdpi , xhdpi , xxhdpi and xxxhdpi resolutions for Android.

Simply drag & drop your splash screen png, and let it generate the right assets for you.

It will generate something like that:

ImageSets

Rename the images as launch_screen if they have any other name

Android & iOS Asset Integration

Now, we will copy the actions we did above for the iOS.

Path:

android/app/src/main/res

Android drawables

iOS Integration

Now we will copy for the iOS.

First, open the project on xCode.

Simply, select all three images and drag & drop them insideImages.xcassets inside.

iOS assets on XCode

iOS LaunchScreen

Open the LaunchScreen.storyboard

Default LaunchScreen.storyboard

This is the default LaunchScreen.storyboard. Just select these labels and delete them.

Select the ImageView from Library

Select the Image View from Library

Stretch the whole screen with the Image view and set your launch_screen asset from the Attributes Inspector

Launch Screen

Do not forget to set the 0 constraints for all of the sides.

Add the constraints

Here is the tricky part:

Select the Image view;

• Select Ruler
• UNCHECK the Safe Area Relative Margins

Uncheck it

We also need to set the Content Mode to Aspect Fill

View SafeAreaView Fix

Select the View from left Scene side

Then go to the Ruler

UNCHECK the Safe Area Relative Margins and Safe Area Layout Guide

Uncheck these

One Last Thing to Do

Open your AppDelegate.m file and add

#import "RNSplashScreen.h"

Also add

[RNSplashScreen show];

line into the didFinishLaunchingWithOptions

Show by default

Important that you need to add BELOW of the

#ifdef FB_SONARKIT_ENABLED
InitializeFlipper(application);
#endif

code initialization. If you put it before that, it will not work as expected!

Android Integration

We will go to the MainActivity.java file as its path:

android > app > src > main > java > MainActivity.java

We need to add these imports

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

and also add these lines:

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

MainActivity.java should looks like this

Next, we will create layout folder and launch_screen.xml file inside the res folder. Path is

android > app > src > main > res > layout > launch_screen.xml

layout > launch_screen.xml

Now simply copy — paste the following code segment into 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>

We will create the colors.xml file into the values folder as a path of res > values . We will add the primary_dark color value

colors.xml

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

The code segment should looks like this

Final Touches

Finally, we can go back to React Native.

We will control the SplashScreen on Javascript, you can put this logic wherever you want, it depends on your use-case.

We will add the logic into the App.js for now.

Hide the native splash screen

import SplashScreen from "react-native-splash-screen";
SplashScreen.hide();

All you need to add these lines depends on your use-case

Example of App.tsx

import "react-native-gesture-handler";
import React from "react";
import Navigation from "./src/services/navigation";
import SplashScreen from "react-native-splash-screen";
const App = () => {
  React.useEffect(() => {
    SplashScreen.hide();
  }, []);
return (
    <>
      <Navigation />
    </>
  );
};
export default App;

That’s it.

Time for showcase

We can run the app to test our splash screen now :)

Native Splash Screen

Ta-daa :) Your native splash screen is integrated.

WrathChaos/react-native-splash-screen-example

Have fun guys!

If you have any question, feel free to ask