Lottie wrapper for React Native.
Clone or download
Latest commit 0adf068 Dec 10, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Aug 1, 2018
docs Applied review comments Nov 2, 2018
example Fixed progress slider and cleaned up some code Aug 23, 2018
gradle/wrapper Fix project structure and upgrade lottie Mar 26, 2017
npm-packages-offline-cache Bump iOS version Mar 15, 2018
src Update build.gradle Nov 26, 2018
.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 Add npm-packages-offline-cache to npmignore Nov 21, 2017
.prettierignore Enable prettier and fix lint Nov 24, 2017
.prettierrc Enable prettier and fix lint Nov 24, 2017
.travis.yml Initial Implementation Jan 27, 2017
.watchmanconfig Initial Implementation Jan 27, 2017
.yarnrc Switch to yarn Nov 21, 2017
CHANGELOG.md version bump Nov 8, 2018
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 Update README.md Dec 10, 2018
book.json Initial Implementation Jan 27, 2017
build.gradle Update Android deps Sep 23, 2017
gradlew Initial Implementation Jan 27, 2017
gradlew.bat Initial Implementation Jan 27, 2017
lottie-react-native.podspec Update lottie-react-native.podspec Nov 12, 2018
package.json version bump Nov 8, 2018
rn-cli.config.js Initial Implementation Jan 27, 2017
settings.gradle Restructured example source Nov 21, 2017
yarn.lock Bump iOS version Mar 15, 2018

README.md

Lottie for React Native, iOS, and Android

npm Version License Build Status

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

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 commont ones:

Prop Description Default
source Mandatory - The source of animation. This must be a JS object of an animation, obtained (for example) with something like require('../path/to/animation.json'). This is needed in order to fix things. 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

More...

More

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

Example1

Example2

Example3

Community

Example4