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 :
The Splash Screen React Native(IOS And Android). Contribute to rocksinghajay/splash-screen-react-native development by…github.com
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
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.
Add the splash screen to the ios app
Open your app in Xcode first.
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
Then go ahead rename Image to an icon, then add image set according to your requirements by dragging them into the box.
Then you have to open LaunchScreen.xib below the Info.plist , you will see.
This is our default splash screen for ios, select the two text elements “SplashExample” and “Powered by React Native” and delete them.
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
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.
After doing all of the above steps this leaves us with the following:
So, first install the package and then link it with a project.
npm install firstname.lastname@example.org
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 :
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!
- A discrete way to write reactjs components
- How to handle multiple form inputs in reactjs
- Thinking about something
- Power of Gratitude in life
- Create and deploy react app on Heroku
- Login with GitHub and Microsoft in reactjs