Build animated splash screen without JS thread — React Native

Image from https://www.waldo.com/blog/react-native-splash-screen

One of the best way to optimise react native code is to avoid unnecessary re-renders. To do this we need to understand alternative ways of doing thing with JS. For better user experience and interface we sometimes need animated splash screen. Twitter gives us very solid example of it.

As you know animations are heavy, so we should use best preactices to get the best results. There are different ways of doing this in React Native, but one of the most interesting task is to reduce JS thread working on this.

I found one open-source library which provides us new solution to this problem: react-native-lottie-splash-screen

Quick start

Installation

yarn add lottie-ios@3.2.3 react-native-lottie-splash-screen

React Native v0.60+

The package is automatically linked when building the app. All you need to do is:

cd ios && pod install

For android, the package will be linked automatically on build.

Plugin Configuration

Android:

Update the MainActivity.java to use react-native-lottie-splash-screen via the following changes:

import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // here
import android.os.Bundle;

public class MainActivity extends ReactActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.id.lottie); // here
    SplashScreen.setAnimationFinished(true); // If you want the animation dialog to be forced to close when hide is called, use this code
    super.onCreate(savedInstanceState);
    // ...other code
  }
}

iOS:

1. Create Dynamic.Swift with the following contents:

import UIKit
import Foundation
import Lottie

@objc class Dynamic: NSObject {

  @objc func createAnimationView(rootView: UIView, lottieName: String) -> AnimationView {
    let animationView = AnimationView(name: lottieName)
    animationView.frame = rootView.frame
    animationView.center = rootView.center
    animationView.backgroundColor = UIColor.white;
    return animationView;
  }

  @objc func play(animationView: AnimationView) {
    animationView.play(
      completion: { (success) in
        RNSplashScreen.setAnimationFinished(true)
      }
    );
  }
}

1. Create [your-project-name]-Bridging-Header.h with the following contents:

//  HyperMoney-Bridging-Header.h

#ifndef HyperMoney_Bridging_Header_h
#define HyperMoney_Bridging_Header_h

#import "RNSplashScreen.h" // here

#endif /* HyperMoney_Bridging_Header_h */

1. To use swift file in AppDelegate.m, follow next step.

Apple Developer Documentation

Update AppDelegate.m with the following additions

Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). Next, locate your lottie files in app/src/main/res/raw (loading.json in this example).The contents are in documentation and for is drag your lottie files to Xcode Project.

Usage

Use like so:

When the app is finished loading, hide the LottieSplashScreen.

The contents of the App.js may be the following:

import React, { useEffect } from "react";
import LottieSplashScreen from "react-native-lottie-splash-screen";
import RootNavigator from "@navi/RootNavigator";
const App = () => {
  useEffect(() => {
    LottieSplashScreen.hide(); // here
  }, []);
  return <RootNavigator />;
};
export default App;

and you are good to go…

I hope you found this post helpful. If you have any questions you can contact me or open some issues on github repo.