Home

Awesome

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.

<img src="./assets/loader1.gif" width="200">    <img src="./assets/loader2.gif" width="200">    <img src="./assets/loader3.gif" width="200">

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

Class Component

import React from 'react';
import { StyleSheet,Text } 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
  }
});

Functional Component

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text} from 'react-native';
import AnimatedLoader from 'react-native-animated-loader';
export default function App() {
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    setInterval(() => {
      setVisible(!visible);
    }, 2000);
  }, []);

  return (
    <AnimatedLoader
      visible={visible}
      overlayColor="rgba(255,255,255,0.75)"
      animationStyle={styles.lottie}
      speed={1}>
      <Text>Doing something...</Text>
    </AnimatedLoader>
  );
}
const styles = StyleSheet.create({
  lottie: {
    width: 100,
    height: 100,
  },
});

Usage in Expo

Example for expo projects

Loader files

You can find free lottie files for your loaders here.

Props

PropDescriptionDefault
sourceThe 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
visibleControls the visibility of the loader.false
overlayColorChanges the color of the overlay.rgba(255,255,255,0.75)
animationStyleThe style to be applied to the Lottie.-
animationTypeChanges animation on show and hide loader's view.none
speedThe speed the animation will progress.1
loopA boolean flag indicating whether or not the animation should loop.true

Work in Progress

License

Licensed under the MIT.

Donation

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

<a href="https://www.buymeacoffee.com/vikrantnegi" target="_blank"><img src="https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png" alt="Buy Me A Coffee" style="height: 41px !important;width: 174px !important;box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;-webkit-box-shadow: 0px 3px 2px 0px rgba(190, 190, 190, 0.5) !important;" ></a>

ko-fi