Changing Default Splash Screen In React Native
I remember when I wanted to add a splash screen to my React Native application, it took me a while to implement the feature. This is how I got around in solving it:
I created a splashScreenResource folder and added the launchScreen.xib file with the splash image.
The code snippet that does adds this splash screen:
<subviews> <imageView userInteractionEnabled="NO" contentMode="scaleAspectFill" image="splash.png" translatesAutoresizingMaskIntoConstraints="NO" id="ZkI-RL-69Z"> </imageView> </subviews>
Surprisingly, it worked but the down side is, it doesn't take care of differenct screen sizes.
I've decided to write a blog post about an easy way to add your customized splash screens to your React Native apps. By the end of this tutorial, adding splash screens should become pretty easy.
Before we begin…
If you are not familiar with React Native, you should check out the documentation to get your app up and running. I’ll be implementing this feature on the IOS platform. The implementation is a bit different on Android.
Set up project
I'm using the React Native CLI to create my project and the Emulator to run my application.
Follow these steps to create and run your app:
- create your project using
react-native init app-name
- run your project using
Here is a screen shot of the default splash screen:
NB: Take note of the icon and splash screen specifications required on each generator site.
Once you are done generating the images, you should open your app in Xcode. Here are the steps to follow:
- go to your project folder
- open the
- go to the file that has
.xcodeprojas the extension, in my case it's
- open this file in your Xcode.
Add splash screen to your app
- Delete the
- Click on the splashScreenTutorial folder, then go to the
- Click on the
GeneralTab on the top-left corner of your Xcode and scroll down to
App Icons and Launch Images
- Go to Launch Images Source and click
Use Asset Catalog. Click on migrate.
- Remove the text
LaunchScreenfrom Launch Screen File.
- Go back to your project folder and open the
Images.xcassetsfile. You should see
- Next, click on the
LaunchImage, you should see this:
- Finally, drag the splash screen images that has been generated initially to the
Launch Image box.
NB: Since this tutorial is for the IOS platform, the splash screen images you generated should be inside the IOS or iPhone folder.
Test Splash Screen
- To see the changes, you need to delete the app from your emulator if you have run the app initially.
- To delete the app, click on the
Hardwaremenu on your Simulator bar and go to
- Tap and hold down the particular app icon you want to delete, and click on the
Xsign on the icon.
- Run your app again using
I hope you were able to follow the steps to get your splash screens on your apps.
If you have feedback on how to better improve this article, please let me know. Next up, React Native Navigation. Ciao!!!