Friday, 13 January 2023

React Native Tutorial - Custom Javascript Splash Screen

Written by    on  

 Hi all!

In this tutorial, I'll guide you to build a custom splash screen for a bare react native app. There are many tutorials on how to do this for React Native out there, for sure. But a lot of them rely on native codes and as a result, as a developer, we lost a bit of control over the screen that greets our users, every time they open our app.

I have had horrible experiences using some of those methods, resulting in low-quality splash screens! So I dug around and found a tutorial that suits my need. The original article can be found here on dev.to site, written by Mateo Hrastnik. 

In my version, I tweaked it to accommodate my preferred setup. In the original article, Mateo used a static image and animated its opacity using the Animated hook from React Native. In my version, you will find that I am more ambitious, wanting a more complicated animation on my splash screen. Here's the result:

Image 1: React Native Custom Splash Screen

As you can see, the logo animation that I used is more than just fade in effect. To create the animated logo, developers usually resort to two options namely animated GIF, and Lottie. But after perusing the net for few days, I found myself staring at an amazingly new tool called RIVE.

Image 2: Rive Homepage

What Rive does is to simplify the process flow of creating animated assets. If you go by the Lottie route, you'd have to use Adobe After Effects to animated the layers, and export it to .json format. For RIVE, you design, animate and export the assets using just one tool. It's pretty convenient I suppose. I'm still fairly new to this, so my animation is very basic, as you can see.

Image 3: Rive App Interface


They have what they call "State Machine" that can be made to control the animation. The animation will then change according to live data fed to it. If you are interest to use Rive in your app, I'd suggest you watch tutorials on their YouTube channel. They have a good amount of tutorials that you can watch to get you started. They even have webinars showing how to use Rive with React Native!

To integrate Rive with React Native, read this documentation.

So, coming back to the matter at hand, we are building a custom splash screen so that we have more control over the component, animation etc.

The idea is to change the implementation of splash screen from native to Javascript. The way we do this is with:
  1. Manually set a blank, single-color splash screen background on the native side;
  2. On iOS, set the background color of the React Native root view to that same color;
  3. As soon as React Native loads, add a View with the same color in React Native and fade in the app logo on it; and
  4. Once the app loads, fade out the splash screen.

1.0 - Initial Preparation

  1. Install and configure your React Native app. I'm using the bare React Native installation using npx react-native init <projectName> command on my terminal. Check out the official guide to setup proper development environment for React Native here.
  2. Run npx react-native start. This will start the development server.
  3. Run npx react-native run-ios and npx react-native run-android to boot up iOS simulator and Android emulator.
  4. Choose a background color that suits the theme of your app. You can start with a hex color, and get its RGB value range. Use this tool to convert hex value to its equivalent RGB range. I'm using these values:
    • HEX: #ff0b00
    • RBG: 1.00000, 0.04314, and 0.00000
  5. Prepare your logo/ animated logo. You can go with a statc image .png here, or if it tickles your fancy, go on and explore the Rive tool and export the asset. Follow this tutorial to configure where to put the asset in your iOS and Android project folder.

2.0 - Setting a Blank Background on iOS

Open AppDelegate.m, search for the line that sets rootView.backgroundColor and change:


Do not forget to change the value of UIColor to your own preferred color.
The step above only change the color of your React Native root view. We still need to change the background color of the whole app. Find the LaunchScreen.storyboard file, and change its structure to this:

Remember to change the backgroundColor values accordingly.

3.0 - Setting a Blank Background on Android

On Android, all you have to do is to add the following line inside the <style> tag, under <resources>, like so:


Dont forget to change the HEX value.

4.0 - The Javascript Part

Now we build the Splash.js component. The flow will be like this:
  1. At first, it shows only a blank View with the background color we picked. This is visible until the splash screen logo is loaded into memory;
  2. The logo appears;
  3. We wait in this state until the app is initialized and ready to run (this will be mocked by an initialize() function);
  4. The whole splash screen fades out, revealing the app's first screen;
  5. Finally, the splash screen assets are cleaned up;


Lastly, we need to actually use this component in our app. My app entry point looks like this, and you'll probably have something similar. The idea is to wrap your app entry point in the WithSplashScreen component and once the app is initialized, set the isAppReady prop to true.


If all goes well, you'll have something similar to this:


Conclusion

Instead of adding complex native dependencies that are hard to control, it's easy to add a splash screen to your app with just a couple of changes on the native side. As a benefit, you get extra control over how the splash screen looks and behaves.Thanks for giving this article a read! If you've found it useful, consider sharing.
Hafiz Hanif, PhD