Package Exports

react-native-animated-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-animated-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Native Animated Loader

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

Prerequisites

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.

Follow the official instruction and linking guide here.

Install

yarn add react-native-animated-loader

npm i --save react-native-animated-loader

Usage

import React from 'react';
import AnimatedLoader from "react-native-animated-loader";

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

  componentDidMount() {
    setInterval(() => {
      this.setState({
        spinner: !this.state.visible
      });
    }, 3000);
  }

  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}
      />
    );
  }
}

API

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`

TODOs

Add expo example
Add ability to render text with animations

License

Licensed under the MIT.