How to use Lottie animation in React Native project

Lottie is an open source animation library for iOS, Android, and React Native developed by Airbnb. It can load animations exported from Adobe After Effects and allow native apps to use these animations like static materials, perfectly achieving cool animation effects.
In terms of usage process, Lottie animation needs to use Adobe After Effects to make the original animation first, and then use the official Bodymovin plug-in to export the animation into a Json file. This Json file is the animation source file that Lottie needs to parse.
To use Lottie animation in a React Native project, you need to install the lottie-react-native and lottie-ios plugins first, as shown below.

yarn add lottie-react-native
yarn add [email protected]

After the installation is complete, you can use the react-native link command to link the native library dependencies. Of course, in addition to this, we can also use manual methods to add dependencies. For iOS projects using CocoaPods, you need to add the following script files.

pod 'lottie-ios', :path => '../node_modules/lottie-ios'
pod 'lottie-react-native', :path => '../node_modules/lottie-react-native'

Then, execute the pod install command to install the plug-in. For native Android, you first need to add the following content to the android/settings.gradle file.

include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-

Next, open the app/build.gradle file and add the following dependencies.

 dependencies {
  ...
  implementation project(':lottie-react-native')
  ...
}

Finally, you also need to add LottiePackage to the getPackages() method of ReactApplication as shown below.

import com.airbnb.android.react.lottie.LottiePackage;
    
@Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          ... //Omit other code new LottiePackage()
      );
    }
  };

At this point, the native development environment required by Lottie has been set up. Next, you only need to use the LottieView component provided by Lottie to load the previously exported Json file, as shown below.

function LottieAnimPage(){
    return (
      <LottieView source={require('../animations/LottieLogo1.json')} autoPlay loop />
    )
}

export default LottieAnimPage;

At the same time, the LottieView component also provides a progress parameter to add some additional effects to the animation. For example, the following is a sample code that uses progress to achieve the like effect.

function LottieAnimPage(){

    const anim = useRef(new Animated.Value(0)).current;

    function linearAnim() {
        Animated.timing(anim, {
            toValue: 1,
            duration: 5000,
            easing: Easing.linear,
        }).start();
    }

    React.useEffect(() => {
        linearAnim();
    }, []);

    return (
        <LottieView source={require('../animations/TwitterHeart.json')}
                    progress={anim} />
    )
}

It can be seen that the core of realizing the Lottie animation effect is still how to make the Lottie original animation. First, we need to install Adobe After Effects and use it to make the Lottie original animation, then install the Bodymovin plug-in, and finally export the Lottie original animation as an animated Json file. If Adobe After Effects is not installed, you can download and install it from Adobe's official website, as shown in Figure 3-7.

Exit After Effects and download the latest ZXP Installer to install it. After the installation is complete, download the latest Bodymovin plug-in. Open the ZXP Installer and drag the Bodymovin plug-in into the ZXP Installer window to install it, as shown in Figure 3-8.

Next, open After Effects and click [Window] → [Extensions] to see the Bodymovin plug-in. Of course, the Lottie official website also provides many cool animations, and you can directly download the Json files of these animations and use them, as shown in Figure 3-9.

This is the end of this article about React Native implementing Lottie animation. For more relevant React Native Lottie animation content, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!