Lottie Animations in React Native

Comprehensive Guide to Lottie Animations in React Native

Lottie animations have become a go-to solution for integrating high-quality animations into mobile applications. In this blog, we will explore how to use Lottie animations in React Native, with a focus on the lottie-react-native npm library. We'll also touch on the LottieFiles platform, creating custom animations using tools like Adobe After Effects, and the .lottie file format.

What is Lottie?

Lottie is a library developed by Airbnb to parse and render animations created in Adobe After Effects using the Bodymovin plugin. These animations are rendered as JSON files, making them lightweight and perfect for seamless use in apps and websites.

The lottie-react-native Library

The lottie-react-native library is the React Native implementation of the Lottie library. It allows you to integrate beautiful animations in your apps effortlessly. Below, we’ll go through the installation and implementation process for Android and iOS.

Installing lottie-react-native

Install the Library: Run the following command to install the lottie-react-native package:

 npm install lottie-react-native

 yarn add lottie-react-native

Install Dependencies:

For React Native versions 0.60 and above, the library uses autolinking. However, you need to install the required dependencies manually:

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context react-native-vector-icons

Link Native Modules:
For older React Native versions (below 0.60), link the library manually:

 react-native link lottie-react-native

Setting Up Lottie for Android

Install Lottie Dependency for Android:
Add the following to your android/app/build.gradle file under dependencies:

 implementation 'com.airbnb.android:lottie:5.2.0'

Rebuild the Project:
Run the following command to rebuild your project:

 npx react-native run-android

Usage in Android: After installation, you can use Lottie animations seamlessly in your React Native components.

Setting Up Lottie for iOS

Install CocoaPods Dependency:
Navigate to the ios directory in your React Native project and run:

 pod install

Open Xcode:
Open the .xcworkspace file in Xcode and verify that the Lottie library is added to your project.

Rebuild the Project:
Run the following command to rebuild your project:

 npx react-native run-ios

Implementing Lottie in React Native

Once the setup is complete, you can use the LottieView component to render animations. Below is an example:

import React from 'react';
import { View, StyleSheet } from 'react-native';
import LottieView from 'lottie-react-native';

export default function LottieAnimation() {
  return (
    <View style={styles.container}>
      <LottieView
        source={require('./path-to-animation.json')} // Path to your animation JSON file
        autoPlay
        loop
        style={styles.animation}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  animation: {
    width: 300,
    height: 300,
  },
});

Key Props of LottieView

• source: Path to the Lottie JSON file or remote URL.
• autoPlay: Automatically plays the animation.
• loop: Repeats the animation indefinitely.
• speed: Adjusts the playback speed.
• progress: Controls the animation's progress (0 to 1).

Learn more about lottie animation how to create and access lottie animations for free:

https://www.heliverse.com/blog/lottiefiles