https://medium.com/@rocksinghajay

How to add a splash screen to react native(IOS)

In this article, I will tell you how we can add a splash to react-native (IOS). I am gonna tell you very simple steps. And this is a very initial thing we can create for every mobile application. So, that’s very much important thing for every developer for knowing how to add it in the right way.

You can view the whole source code here :

I am using simple react native project for adding the splash screen to it. So, let get started by initialising the react native project in your system.

react-native init SplashScreenReactNative
cd SplashScreenReactNative

After running this two lines into the terminal, you will have react native project on your system.

If you noticed that react native application have a white background splash screen. On that screen, we are adding our custom splash screen. How to notice that first white splash screen, we need to set first a dark background colour in our app.

Replace your App.js component with below code

All you just need to replace the background color with dark red and text color to white.

Your App View

Add the splash screen to the ios app

Open your app in Xcode first.

cd ios/SplashScreenReactNative.xcodeproj

After opening the project on Xcode you will go to Images.xcassets folder that you can see in the below screenshot.

Then you need to click on a + icon that is shown on the bottom of the Xcode, and then click to New Image Set

Add Image Set

Then go ahead rename Image to an icon, then add image set according to your requirements by dragging them into the box.

Drag Image Into Box

Then you have to open LaunchScreen.xib below the Info.plist , you will see.

LaunchScreen.xib

This is our default splash screen for ios, select the two text elements “SplashExample” and “Powered by React Native” and delete them.

Change background color according to your requirements

Go ahead and set the background color to Dark Gray Color.

In the next, step we have to add an Image View to our splash screen view. You can find that by pressing the icon and search for an image and then click on image element as you can see the above screenshot.

And drag the UIImageView to a centre of the view

Centred UIImageView

Now we want to set the image source from Images.xcassets. When you select the image dropdown any images from Images.xcassets should show up and choose the icon you recently added.

Now you need to set an image to align to vertically and horizontal centre, then you need to change “Content Mode” to Aspect Fit

In the next step, we need to make sure our icon stays centred in all of the devices, no matter which screen size have the device, so now you can follow the above gif and do as the same.

You can see within the Autoresizing section you will want to disable the outer red lines and enable the inner red arrows by clicking on it. This will allow the image to stay centred related to the screen dimensions.

Autoresizing

After doing all of the above steps this leaves us with the following:

But, there is a problem after, splash screen there is also a white screen appear that is because at that time Javascript is loading & the bridge is initializing. Fix this problem with the help of react-native-splash-screen.

So, first install the package and then link it with a project.

npm install react-native-splash-screen@3.0.6
react-native link react-native-splash-screen

Then we need to configure this package with Xcode, so let’s open the AppDelegate.m file inside Xcode. And then simply add #import “SplashScreen.h” line below the #import <React/RCTRootView.h> line. After doing this you just need to add [SplashScreen show]; just above the return YES; and that’s it.

At last, you just need to import react-native-splash-screen package inside your app.js component, see the above code :

Now you can see the final splash screen without any white screen that is coming before, see the final output below :

FinalSplashScreen

I hope you enjoyed this article on How to add a splash screen to react native(IOS).

Clap 👏 for this article if you find it useful 😃

Feel free to comment and like this article so that others can find it easily on Medium!

Hi, My name is Ajay Singh Rajput. I am a Frontend Developer at ZestGeek. I write about JavaScript and reactjs. And sharing my worldview with everyone join my quest by following me at Twitter or Medium.

Want to learn more about JavaScript, Reactjs and Life? Check out my other articles:

  1. A discrete way to write reactjs components
  2. How to handle multiple form inputs in reactjs
  3. Thinking about something
  4. Power of Gratitude in life
  5. Create and deploy react app on Heroku
  6. Closures in JavaScript
  7. Understanding Hoisting in JavaScript
  8. Login with GitHub and Microsoft in reactjs

9. Login with Facebook and Google in reactjs

10. How to setup redux and react router v4 in your react app

11. Setting up a React.js project with simple steps

And thank you for reading this article if you like it then share it, with your friends and enemies. And I will be writing more about JavaScript, react.js, stay connected with me.