Part 4:💦 Splash screen 💦

4 min readDec 20, 2021

Splash screens are some UI feedback to let the user know the app is loading.
A good splash screen, just like any first impressions matter!

So let’s dive in *splash*! (Please ignore my bad puns….)

♦️ Step 0

I used the following site to generate android/ios images

♦️ Step 1

Download the following helper library to which can programatically hide and show the splash screen (IOS & Android friendly)

npm install react-native-splash-screen --save

♦ ️Step 2

Update your ios pods

cd ios
pod install // I use arch -x86_64 pod install as I have the M1 chip

♦ ️Step 3

Using the helper library, in a useEffect add some code to hide the splash screen inside of your App.tsx (jsx, tsxor js)
Recall:

useEffect is a react-hook allows you to perform side effects in function components.
It represents componentDidMount, componentDidUpdate, and componentWillUnmount combined.
The [] syntax at the end means: render only once, ignoring other side effects that happen after the first render.

♦️ Step 4: IOS

Open XCode and select [YourProjectName].xcworkspace

The open imagesand add 3 sizes of your splash image

On the left navigator, open LaunchScreen.xib
Delete the two elements, [project_name] and Powered by React Native
I set the background to white using the menu on the right

Next, press on the +, on the right top side, and select the ImageView component

On the bottom, you can modify your constrains. Set both horizontal and vertical alignment to 0 to have the image perfectly centered.

center image vertically and horizontally

Almost there 🤪. So far, we configured the react-native-splash-screen library to hide after the app is loaded, but we never configured for it to display the splash screen where first starting the app while its loading.

Open the AppDelegate.m file and import #import "RNSplashScreen.h on the top with the other imports
In the didFinishLaunchingWithOptions [RNSplashScreen show]; just above return YES;

And voila!

♦️ Step 5: Android

Under android/app/src/main/res you will find a list of folders that correspond to the sizes of the icons

Add the images we generated in step 0 to those folders respectfully.
* I personally kept the name of my icons as ic_launcher and ic_launcher_round

Create a file colors.xml under android/app/src/main/res

NOTE: app_bg is the background color on which the splash screen will be
primary_dark is not used, but without out it, the app will crash. (READ HERE)

Create background.xml under android/app/src/main/res/drawable (create drawable as a folder if its missing)

splash screen layout

This is our splash screen layout.
app_bg is the white background mentioned in the step above

We then import the ic_launcher image from one of the mipmap files based on the device size

android:gravity is a property to center the image

Add the following code to styles.xml

We are creating our background.xml as a style called SplashTheme that we will use soon

Now let's createSplashActivity.java to which the Splash Theme styles will apply in later steps

In a nutshell, this class is calling splash screen layout and then will display MainActivity.class after the splash screen is unmounted

We now need to modify AndroidManifest.xmland add this SplashActivity Screen and apply themes to it

Add android:exported="true" to the MainActivity activity. This will allow us to access MainAcitivty.class inside of SplashScreen.java
Remove the following from MainActivity and add it under the SplashAcitivty

Your end result for AndroidManifest.xml should look something like this:

If you followed all the steps correctly. You should be able to see a splash screen!

However, you will notice a little “white” pause before the app loads.

Here is the fix:
Create a folder layout under android/app/src/main/resand create a layout_screen.xml (name matters) with the following layout:

This looks identical to what we did with background.xml

Add the onCreate method inside of MainActivity

This will insure to still show the splash screen while the app is still loading.

And thats it!

 P.S if you followed my other parts, I finally have a MAC! 