react-native-animated-loader

    0.0.9 • Public • Published

    React Native Animated Loader

    Read more about this package here.

    downloads npm-version github-tag license

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

         

    Prerequisites

    Using React Native CLI

    This library uses lottie-react-native to render loader animations. Therefore this library need to be installed and linked to your project before installing this package.

    Follow the official instruction and linking guide here.

    Using Expo

    No need to do anything specific, just install the package itself. Expo already has Lottie library API available and it will take care of the rest.

    Install

    yarn add react-native-animated-loader
    

    or

    npm install react-native-animated-loader --save
    

    Usage

    import React from 'react';
    import { StyleSheet } from 'react-native';
    import AnimatedLoader from "react-native-animated-loader";
    
    export default class Loader extends React.Component {
      constructor(props) {
        super(props);
        this.state = { visible: false };
      }
    
      componentDidMount() {
        setInterval(() => {
          this.setState({
            visible: !this.state.visible
          });
        }, 2000);
      }
    
      render() {
        const { visible } = this.state;
        return (
          <AnimatedLoader
            visible={visible}
            overlayColor="rgba(255,255,255,0.75)"
            source={require("./loader.json")}
            animationStyle={styles.lottie}
            speed={1}
          >
            <Text>Doing something...</Text>
          </AnimatedLoader>
        );
      }
    }
    
    const styles = StyleSheet.create({
      lottie: {
        width: 100,
        height: 100
      }
    });

    Loader files

    You can find free lottie files for your loaders here.

    Props

    Prop Description Default
    source 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 Object
    visible Controls the visibility of the loader. false
    overlayColor Changes the color of the overlay. rgba(255,255,255,0.75)
    animationStyle The style to be applied to the Lottie. -
    animationType Changes animation on show and hide loader's view. none
    speed The speed the animation will progress. 1
    loop A boolean flag indicating whether or not the animation should loop. true

    Work in Progress

    • [ ] Add expo example
    • [ ] Add ability to render text with animations
    • [ ] Add test cases

    License

    Licensed under the MIT.

    Donation

    If this project helped you reduce time to develop, please consider buying me a cup of coffee :)

    Buy Me A Coffee

    ko-fi

    Install

    npm i react-native-animated-loader

    DownloadsWeekly Downloads

    1,699

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    15.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • vikrantnegi