How to implement Splash Screen in React Native Navigation

React Native Navigation

This tutorial will show you how to correctly implement the splash screen in React Native Navigation (RNN) on both Android and iOS.

RNN has a built-in supported for Splash Screen on Android platform, and we could use ImageLaunch for iOS. Therefore, it’s not needed to use any additional Splash Screen library.

I think it’s important to know how will the results look like before you invest your precious time reading this tutorial. Take a look:

Android Splash Screen

iOS Splash Screen

I’ll use generator-rn-toolbox to quickly parsed assets for Android and LaunchImage for iOS in this example. You don’t have to use this if your don’t want to. But if you do, then:

• Install generator-rn-toolbox
• Prepare the splash screen asset/image (2208x2208 px) and copy it to the project directory. In this tutorial, the asset name is splashscreen.psd

Android

Generate Android assets using RN-Toolbox (Optional)

Run the following command:

$ yo rn-toolbox:assets --splash splashscreen.psd --android

You will ask these questions:

• Project name: Type your project name or just enter if the suggest one is correct.
• Overwrite styles.xml: Type “n” (no) then enter.
• Overwrite colors.xml : Type “y” (yes) then enter (only ask if colors.xml already exists)

The script will add/modify the following:

• Add drawable assets with launch_screen.png name
• Add a drawable name launch_screen_bitmap.xml . We will use this file as the background image of the Splash Screen layout
• Add a splashBackground item in colors.xml the color code will be the primary input color

Note: You have to discard any changes of styles.xml file if you accident overwrite it when running the script.

This will do more than 80% of the work. Move to Step 4 of the Android instruction.

Android Instruction (4 steps)

Step 1 (Skip if you use the toolbox)
Copy and overwrite your own assets to /android/app/src/main/res/ .

Step 2 (Skip if you use the toolbox)
Create a new layout file with the below content:

/android/app/src/main/res/drawable/launch_screen_bitmap.xml

Notes:

• I use launch_screen_bitmap name to sync with toolbox user. You could use another name for this file if you want to.
• Replace @drawable/launch_screen with your assets name.

Step 3

Create/modify your colors file with your splash screen background color. This will prevent white spacing on some device.

Note: Make sure you use a hex color code instead of the default rgba (Thank crankeye for pointed out this at this issue).

/android/app/src/main/res/values/colors.xml

Step 4

Modify the MainActivity.java by overriding the createSplashLayout method provided by RNN.

android/app/src/main/java/com/example/MainActivity.java

That’s all the steps for Android, but there is a bonus step at the end for both Android and iOS platform.

iOS

Generate Android assets using RN-Toolbox (Optional)

Run the following command:

$ yo rn-toolbox:assets --splash splashscreen.psd --ios

You will ask these questions:

• Project name: Type your project name or just enter if the suggest one is correct
• Overwrite project.pbxproj: Type “y” (yes) then press enter
• Overwrite Info.plist: Type “y” (yes) then press enter

This will add/modify the following:

• Create a new LaunchImage.launchimage file that contains parsed assets
• Remove UILaunchStoryboardName key and its value from Info.plist
• Add ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME config for both Debug and Release build settings

This will do all the works. You don’t have to do anything else.

iOS Instruction (3 steps) — Manual only

Step 1

Open your Xcode project in /ios/{you-project-name}.xcodeproj
At your project folder, create a new Launch Image in Images.xcassets
Add your assets to this Launch Image.

Launch Image Example

Step 2

Remove the default React Native Launch Screen by removing the key-value pairs UILaunchStoryboardName in Info.plist

Step 3

Apply the Launch Image at Tab General > App Icons and Launch Images
Change Launch Images Sourc to the newly created LaunchImage

LaunchImage Setting Example

That’s all for iOS, check the bonus step below for both Android and iOS.

Bonus step

Add animationType: “fade” when you start the app with startTabBasedApp or startSingleScreenApp will make the transition look smoother.

RN-Toolbox Notes

• You could run the toolbox to generate assets for both Android and iOS at once by not specifying the platform flag, but I don’t recommend to since it’s harder to keep tracks the changes
• You don’t have to keep splashscreen.psd file after the process
• The generate assets might not work correctly on all devices dimension. It’s advised to replace the splash screen assets using design team’s resources

The End

This is my first article on Medium, so if there are any mistake or issues, please leave a comment.

The source code of this example could be found at here. You could check the commit to see the changes of each instruction.

I hope this tutorial will help you resolve any trouble you have with when implementing RNN Splash Screen :)