Part 4:💦 Splash screen 💦

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

Define background of splash

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

Image should default to splash screen

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

IOS Splash Screen

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

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