Git Product home page Git Product logo

react-native-lottie-loader's Introduction

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

react-native-lottie-loader's People

Contributors

dependabot[bot] avatar imbudhiraja avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

react-native-lottie-loader's Issues

ViewPropTypes import

commanded fix :

move from
import { ViewPropTypes } from 'react-native';

to

import { ViewPropTypes } from 'deprecated-react-native-prop-types';

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.