Using Lottie React Native

This project is only the code to wrap and expose Lottie to React Native. The parsing/rendering code can be found in their respective libraries:

Lottie for iOS

Lottie for Android

Installation

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

If you're using CocoaPods on iOS, you can put the following in yourPodfile:

pod

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

After this, open the Xcode project configuration and add theLottie.frameworkasEmbedded Binaries.

For android, you canreact-native linkas well:

react-native link lottie-react-native

Lottie requires Android support library version 25. If you're using thereact-native inittemplate, you may still be using 23. To change this, simply go toandroid/app/build.gradleand find thecompileSdkVersionoption inside of theandroidblock and change it to

android {
    compileSdkVersion 25 // <-- update this to 25
    // ...

With this change you should be ready to go.

Please file an issue if you have any trouble!

Basic Usage

See full component API

Lottie's animation progress can be controlled with anAnimatedvalue:

import React from 'react';
import { Animated } from 'react-native';
import Animation 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,
    }).start();
  }

  render() {
    return (
      <Animation
        style={{
          width: 200,
          height: 200,
        }}
        source={require('../path/to/animation.json')}
        progress={this.state.progress}
      />
    );
  }
}

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

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

export default class BasicExample extends React.Component {
  componentDidMount() {
    this.animation.play();
  }

  render() {
    return (
      <Animation
        ref={animation => { this.animation = animation; }}
        style={{
          width: 200,
          height: 200,
        }}
        source={require('../path/to/animation.json')}
      />
    );
  }
}

Running the Example Project

You can check out the example project with the following instructions

Clone the repo: git clone https://github.com/airbnb/lottie-react-native.git
Open: cd lottie-react-native and Install: npm install
Run npm start to start the packager.
In another CLI window, do the following:

For Running iOS:

If you don't have CocoaPods installed, run bundle install
Install pods: npm run build:pods
Run Example: npm run run:ios

For Running Android:

Run Example: npm run run:android

Troubleshooting

If you are trying to runpod installand you get:

[!] Unable to find a specification for `lottie-ios`

Runpod repo updateand retry.

When your build fails with:

LottieReactNative/LRNContainerView.h: 'Lottie/Lottie.h' file not found

Add theLottie.frameworkto theEmbedded Binariesin your Xcode project configuration.

Using Lottie React Native