Skip to content

A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.

License

Notifications You must be signed in to change notification settings

imbudhiraja/react-native-lottie-loader

Repository files navigation

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