Skip to content
🍭 A React Native Loader Component which uses Airbnb's Lottie for beautiful loader animations.
Branch: master
Clone or download
Latest commit 3124969 Jul 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update FUNDING.yml Jul 12, 2019
assets add screenshots Feb 11, 2019
src fix: add onRequestClose prop for android Feb 14, 2019
.gitignore initial launch 0.0.2 Feb 8, 2019
LICENSE docs update Feb 11, 2019
package.json release v0.0.7 Feb 14, 2019 Update Jul 8, 2019

React Native Animated Loader

Read more on blog

downloads npm-version github-tag license

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



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 anything but to install the package itself. Expo already has Lottie library API available.


yarn add react-native-animated-loader


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


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) {
    this.state = { visible: false };

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

  render() {
    const { visible } = this.state;
    return (

const styles = StyleSheet.create({
  lottie: {
    width: 100,
    height: 100


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


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


Licensed under the MIT.

You can’t perform that action at this time.