Not a Propaganda Machine

    @mifind/lottie-react-native
    TypeScript icon, indicating that this package has built-in type declarations

    2.5.12-alpha.3 • Public • Published

    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

    Install

    npm i @mifind/lottie-react-native

    DownloadsWeekly Downloads

    3

    Version

    2.5.12-alpha.3

    License

    Apache-2.0

    Unpacked Size

    38.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • mifind