@metamask/lottie-react-native v3.1.0

Lottie for React Native, iOS, and Android

Lottie component for React Native (iOS and Android)

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand.

Getting Started

Get started with Lottie by installing the node module with yarn or npm:

yarn add lottie-react-native

or

npm i --save lottie-react-native

IMPORTANT

Apps using older versions of React Native (RN < 0.59) should use lottie-react-native 2.5.11 due to AndroidX support being introduced only by React Native 0.59.

Therefore, any app running on RN <= 0.58.4 has to install lottie as follows:

yarn add lottie-react-native@2.5.11

or

npm i --save lottie-react-native@2.5.11

iOS

Use react-native link to add the library to your project:

react-native link lottie-ios
react-native link lottie-react-native

After this, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries.

Android

For android, you can react-native link as well:

react-native link lottie-react-native

Usage

(If you are using TypeScript, please read this first)

LottieView can be used in a declarative way:

import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  render() {
    return <LottieView source={require('./animation.json')} autoPlay loop />;
  }
}

Additionally, there is an imperative API which is sometimes simpler.

import React from 'react';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  componentDidMount() {
    this.animation.play();
    // Or set a specific startFrame and endFrame with:
    this.animation.play(30, 120);
  }

  render() {
    return (
      <LottieView
        ref={animation => {
          this.animation = animation;
        }}
        source={require('../path/to/animation.json')}
      />
    );
  }
}

Lottie's animation progress can be controlled with an Animated value:

import React from 'react';
import { Animated, Easing } from 'react-native';
import LottieView from 'lottie-react-native';

export default class BasicExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      progress: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.timing(this.state.progress, {
      toValue: 1,
      duration: 5000,
      easing: Easing.linear,
    }).start();
  }

  render() {
    return (
      <LottieView source={require('../path/to/animation.json')} progress={this.state.progress} />
    );
  }
}

API

You can find the full list of props and methods available in our API document. These are the most common ones:

More...

More

View more documentation, FAQ, help, examples, and more at airbnb.io/lottie