How to use lottie files in React Native

Lottie is a library that enables developers to easily add high-quality animations to their React Native applications. It uses JSON files exported from Adobe After Effects using the Bodymovin plugin. Here’s a step-by-step guide on how to use Lottie files in a React Native project:

1. Install Dependencies:
   Make sure you have the necessary dependencies installed. You can use npm or yarn to install the required packages:

   npm install lottie-react-native

or

   yarn add lottie-react-native

2. Link the Library (if not using autolinking):
   For React Native versions 0.59 and below, you may need to link the library manually:

   react-native link lottie-react-native

For React Native 0.60 and above, the linking is usually done automatically.

3. Import Lottie:
   Import the Lottie component in your React Native component where you want to use the animation:

   import LottieView from 'lottie-react-native';

4. Download Lottie JSON File:
   Find or create a Lottie animation in JSON format. You can find a variety of free animations on the LottieFiles website (https://lottiefiles.com/).
5. Place the JSON File in Your Project:
   Save the downloaded JSON file in your project directory.
6. Use LottieView Component:
   In your React Native component, use the LottieView component and specify the path to your Lottie JSON file:

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

   class MyLottieAnimation extends Component {
     render() {
       return (
         <View style={{ flex: 1 }}>
           <LottieView
             source={require('./path/to/your/animation.json')}
             autoPlay
             loop
           />
         </View>
       );
     }
   }

   export default MyLottieAnimation;

• source: Provide the path to your Lottie JSON file. Make sure to adjust the path based on your project structure.
• autoPlay: Set to true if you want the animation to start automatically.
• loop: Set to true if you want the animation to loop.

1. Customize Animation:
   You can customize the animation by adjusting various props of the LottieView component. Refer to the official documentation for a list of available props: https://github.com/lottie-react-native/lottie-react-native#props
2. Run Your App:
   Run your React Native application to see the Lottie animation in action:

   react-native run-android

or

   react-native run-ios

That’s it! You should now have a Lottie animation integrated into your React Native app. Adjust the configuration based on your specific requirements and animations.