How To Add Splash Screen To React Native App For iOS App 2019

When ever you open a mobile app, What is the first thing you see ? A splash screen right ? That’s the screen where you put up branding for your app. In this you are going to see how to add splash screen to React Native App.

I have been working on a React Native App and I ‘m writing everything from scratch. The first thing I wanted to implement  for my app is the splash screen. I have been going through various tutorials and code blocks on internet but most of them are outdated.

Finally I found one tutorial which is updated on the current versions. So I ‘m writing this article on how to add splash screen to react native app for both ios and android based on the above tutorial. I’m going to show you how I have implemented in my application. We are going to use hooks in this application.

First things first, this tutorial is for the people who created their application using ‘react-native init’. I ‘m using react native 0.60+.

Adding A Splash Screen To React Native App

Step – 1

We need to install a plugin react-native-splash-screen. For github repo and for the documentation of this plugin, please click here

To install, run this command

npm i react-native-splash-screen --save

or

yarn add react-native-splash-screen

Note

As we are using react native 0.60+ we don’t need to link the libraries. So we don’t need to run react-native link . If you are using react native < 0.60 you need link the libraries.

Step – 2

We need to update cocoa pods which is mandatory if you are using react native 0.60+, Run this command for this.

cd ios && pod install && cd ..

Step – 3

Now we need to update App.js file. We are going to use hook { useEffect } from react to hide the splash screen after render.

Add the following code in App.js

import React, { Fragment, useEffect } from 'react';
import SplashScreen from 'react-native-splash-screen';

const App = () => {
     useEffect(() => {
         SplashScreen.hide();
     },[]);
     return(
         
     );
}

Adding Splash Screen To An iOS App

As we are using React Native 0.60+, We need to open [project_name].xcworkspace instead of [project_name].xcodeproj. This is because from 0.60+ onwards, React Native is using cocoapods by default.

Adding Images To The Project

On the top left corner

• Select option Show The Project Navigator. You will get this message when put cursor on it.
• From there, Select [project_name] > [project_name] > Images.xcassets
• You Will See AppIcon image set by default. It won’t have any images right now. if you are newly created the project, the set will be empty. Add a New Image Set by clicking ‘+’ icon at the bottom of that column.
• Name your image set as SplashIcon
• For the demo purpose I’m using this icon set. Download them and drag and drop those images together in placeholders. Xcode will sort them by pixel density automatically.

After these steps, Your Xcode will look like this

Changing The Background Color

To change the background color, Select LaunchScreen.xib from left most navigator and then select View.

• Select two elements project_name and Powered by React Native elements and delete them.
• Again select the View option again.
• After this, click on the Attribute Inspector icon (icon resembles the down arrow cursor, 4th option on the right side navigator).
• You can see a background select list, click on that and select custom option. You can see a color pallet popup.
• Change the color of the background what ever you want and press enter.

Add Icons To The Screen

Now, we have add the splash icons to the screen which we were added to the project before.

• In the top right of the Xcode window, click on the Library icon (the one with a square inside a circle)
• Select Image view
• Make sure the Image View is a child of the View element
• In the right navigator, select the SplashIcon asset from the Image select list
• Set the Content Mode option to Aspect Fit if it’s not already the case

Aligning icon to center

We need to make sure that the icon is center aligned irrespective of the device we use. To do this,

• Select ImageView which is now SplashIcon which is a child of View in the 2nd navigator from left.
• Click on the Align Icon from the bottom of image editor.
• Select the constraints both horizontally and vertically from the Align Icon Menu.

Now you can see the splash screen working but you will see a white flash before the page render. This is because the splash screen is loading by native code, then the javascript code will run untill then, the white screen will be shown.

We also want the splash screen to be displayed during the React Native boot.
To do that we will use react-native-splash-screen.

Configure react-native-splash-screen

In the Xcode, Please open [project_name]>[project_name]>AppDelegate.m

• Add #import "RNSplashScreen.h" with the other imports
• Add [RNSplashScreen show]; just above return YES;in the didFinishLaunchingWithOptions method.

So that’s it. This is how we add Splash Screen for iOS app.

A big Thanks for Julien Galletta from AppStud for creating this article on medium. I write this article in my website because I want keep a backup of this. To view the full article with images please click here