React Native Lottie Loader

A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations. This library uses lottie-react-native to render loader animations. Therefor this library need to be installed and linked to your project before installing this package.

Installation

npm install --save react-native-lottie-loader lottie-react-native
react-native link lottie-ios
react-native link lottie-react-native

Usage

import React from 'react';
import LottieLoader from 'react-native-lottie-loader';

export default class Loader extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true };
  }

  componentDidMount() {
    const context = this;

    setTimeout(() => {
      context.setState({ visible: false });
    }, 3000);
  }

  render() {
    const { visible } = this.state;

    return <LottieLoader visible={visible} />;
  }
}

Usage with redux

import React from 'react';
import { bool } from 'prop-types';
import { connect } from 'react-redux';
import LottieLoader from 'react-native-lottie-loader';

class Loader extends React.PureComponent {
  static propTypes = { visible: bool.isRequired };

  render() {
    const { visible } = this.props;

    return <LottieLoader visible={visible} />;
  }
}

const mapStateToProps = ({ app: { visible } }) => ({ visible });

export default connect(mapStateToProps)(Loader);

Props

Prop	Description	Default
animationStyle	View.propTypes.style - The style to be applied to the Lottie.	-
animationType	Changes animation on show and hide loader's view. Animation types supported by Modal	none
autoPlay	A boolean flag indicating whether or not the animation should start automatically when mounted.	true
autoSize	A boolean flag indicating whether or not the animation should size itself automatically according to the width in the animation's JSON. This only works when source is an actual JS object of an animation.	false
loop	A boolean flag indicating whether or not the animation should loop.	true
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'). Lottie Animations used for animation	Lottie Object
speed	Speed the animation will progress.	1
style	Style attributes for the view, as expected in a standard View. View.propTypes.style	-
supportedOrientations	Orientations supported by Modal	portrait
visible	Controls the visibility of the loader.	false

Methods (Imperative API):

Method	Description
play	Play the animation all the way through, at the speed specified as a prop.
reset	Reset the animation back to 0 progress.

License

Licensed under the MIT