React Native How to use Lottie JSON file?

Using Lottie JSON files in React Native enables your application to feature complex and smooth animation effects with minimal performance impact. Lottie is a library developed by Airbnb for parsing JSON files exported from Adobe After Effects animations and rendering them natively on mobile devices.

Step 1: Install Required Libraries

First, you need to install the Lottie library in your React Native project. You can install it using npm or yarn.

bash
npm install --save lottie-react-native
# or
yarn add lottie-react-native

Additionally, since Lottie requires React Native's react-native-safe-module, you may also need to install this library:

bash
npm install --save react-native-safe-module
# or
yarn add react-native-safe-module

Step 2: Link Native Code

If your React Native version is below 0.60, you need to manually link the native module:

bash
react-native link lottie-react-native

For React Native 0.60 and above, auto-linking should handle this part.

Step 3: Use Lottie Component

In your React Native code, you can use Lottie as follows:

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

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

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

In this example, the LottieView component loads a local Lottie JSON file named animation.json and is configured to auto-play and loop.

Step 4: Adjust Animations

Lottie also supports further adjustments to animations, such as controlling playback speed, pausing, or resuming:

javascript
this.animation.play();
this.animation.reset();
this.animation.pause();

You can directly access these methods by referencing ref.

Practical Example

Suppose we are developing a shopping app, we might display a 'success' animation after a user adds an item to the cart. Such animations can be implemented using Lottie, enhancing the user experience with smoother and more intuitive interactions.

In summary, using Lottie allows you to easily integrate high-quality animations into your React Native application, improving user experience and visual appeal.