Skip to content
Lottie wrapper for React Native.
Java JavaScript Swift Objective-C Ruby Python
Branch: master
Clone or download
Latest commit a9a82a4 Nov 25, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Aug 1, 2018
.settings [NEW] Update androidX Jul 16, 2019
docs Update api.md Nov 19, 2019
example support for lottie android 3 Jul 25, 2019
gradle/wrapper Fix project structure and upgrade lottie Mar 26, 2017
npm-packages-offline-cache Revert "Merge pull request #585 from JoaoLSS/master" Nov 15, 2019
src Revert "Merge pull request #585 from JoaoLSS/master" Nov 15, 2019
.babelrc Upgrade babel-plugin-module-resolver Nov 22, 2017
.eslintignore Moved src to src/ and use babel to publish transpiled js to lib/ Nov 21, 2017
.eslintrc Enable prettier and fix lint Nov 24, 2017
.flowconfig Initial Implementation Jan 27, 2017
.gitignore Moved src to src/ and use babel to publish transpiled js to lib/ Nov 21, 2017
.npmignore Make NPM package leaner Sep 16, 2019
.prettierignore Enable prettier and fix lint Nov 24, 2017
.prettierrc Enable prettier and fix lint Nov 24, 2017
.project [NEW] Update androidX Jul 16, 2019
.travis.yml Update .travis.yml Mar 13, 2019
.watchmanconfig Initial Implementation Jan 27, 2017
.yarnrc Switch to yarn Nov 21, 2017
CHANGELOG.md v3.3.2 Nov 15, 2019
CODEOWNERS Create CODEOWNERS May 27, 2019
CONTRIBUTING.md Fix getting started packager docs Nov 21, 2017
Gemfile Add Gemfile Mar 26, 2017
Gemfile.lock Add Gemfile Mar 26, 2017
LICENSE Initial Implementation Jan 27, 2017
README.md Merge pull request #584 from rodolfovilaca/add-color-filters Nov 12, 2019
book.json Initial Implementation Jan 27, 2017
build.gradle support for lottie android 3 Jul 25, 2019
gradlew Initial Implementation Jan 27, 2017
gradlew.bat Initial Implementation Jan 27, 2017
lottie-react-native.podspec Update lottie-react-native.podspec Sep 25, 2019
package.json v3.3.2 Nov 15, 2019
react-native.config.js Fix crash on Android and RN 0.60 Jul 23, 2019
rn-cli.config.js Initial Implementation Jan 27, 2017
settings.gradle Restructured example source Nov 21, 2017
yarn.lock Revert "Merge pull request #585 from JoaoLSS/master" Nov 15, 2019

README.md

Lottie for React Native, iOS, and Android

npm Version License

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.

Installing (React Native >= 0.60.0)

Install lottie-react-native (latest) and lottie-ios (3.1.3):

yarn add lottie-react-native
yarn add lottie-ios@3.1.3

or

npm i --save lottie-react-native
npm i --save lottie-ios@3.1.3

Go to your ios folder and run:

pod install

_ IMPORTANT _

If you have issues linking your iOS project check out this StackOverflow thread on how to fix it.

If your app crashes on Android, means auto linking didn't work. You will need to make the following changes:

android/app/src/main/java/<AppName>/MainApplication.java

  • add import com.airbnb.android.react.lottie.LottiePackage; on the imports section
  • add packages.add(new LottiePackage()); in List<ReactPackage> getPackages();

android/app/build.gradle

add implementation project(':lottie-react-native') in the dependencies block

android/settings.gradle

add:

include ':lottie-react-native'
project(':lottie-react-native').projectDir = new File(rootProject.projectDir, '../node_modules/lottie-react-native/src/android')

Installing (React Native == 0.59.x)

Install lottie-react-native (3.0.2) and lottie-ios (3.0.3):

yarn add lottie-react-native@3.0.2
yarn add lottie-ios@3.0.3

or

npm i --save lottie-react-native@3.0.2
npm i --save lottie-ios@3.0.3

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

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

Note:

Go to your ios folder and run:

pod install

_ IMPORTANT _

If you have issues with your iOS project, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries.

Apps that use static Xcode project linking need to set iOS deployment version to iOS 12 or switch to CocoaPods-based linking (using frameworks) or downgrade lottie-react-native to version 2.6.1.

Installing (React Native <= 0.58.x)

Install lottie-react-native (2.5.11) and lottie-ios (2.5.3):

yarn add lottie-react-native@2.5.11
yarn add lottie-ios@2.5.3

or

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

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

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

Note: If you are using react-native version 0.60 or higher you don't need to link lottie-react-native.

Go to your ios folder and run:

pod install

_ IMPORTANT _

If you have issues with your iOS project, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries.

Apps that use static Xcode project linking need to set iOS deployment version to iOS 12 or switch to CocoaPods-based linking (using frameworks) or downgrade lottie-react-native to version 2.6.1.

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} />
    );
  }
}

Changing color of layers:

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

export default class BasicExample extends React.Component {
  render() {
    return (
      <LottieView
        source={require('../path/to/animation.json')}
        colorFilters={[{
          keypath: "button",
          color: "#F00000"
        },{
          keypath: "Sending Loader",
          color: "#F00000"
        }]}
        autoPlay
        loop
      />
    );
  }
}

API

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

Prop Description Default
source Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json'). None
style Style attributes for the view, as expected in a standard View. The aspectRatio exported by Bodymovin will be set. Also the width if you haven't provided a width or height
loop A boolean flag indicating whether or not the animation should loop. true
autoPlay A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. false
colorFilters An Array of layers you want to change the color filter. []

More...

More

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

Example1

Example2

Example3

Community

Example4

You can’t perform that action at this time.