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 react-native run-ios

Here is a screen shot of the default splash screen:

--

Next, you need to generate your splash screen sizes for different mobile views. Here a few examples of splash screen generator sites you can use: Ape Tools, TiCons.

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 ios folder
• go to the file that has .xcodeproj as the extension, in my case it's splasScreenTutorial.xcodeproj
• open this file in your Xcode.

Add splash screen to your app

• Delete the launchScreen.xib file.

--

• Click on the splashScreenTutorial folder, then go to the TARGETS section
• Click on the General Tab 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 LaunchScreen from Launch Screen File.
• Go back to your project folder and open the Images.xcassets file. You should see AppIcon and LaunchImage.
• 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 Hardware menu on your Simulator bar and go to Home.
• Tap and hold down the particular app icon you want to delete, and click on the X sign on the icon.
• Run your app again using react-native run-ios

And Viola!!

Conclusion

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!!!