React Native Animated Loader

Read more about this package here.


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

  
  

Prerequisites

$3

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.

$3

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

$3

`jsx
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 (
visible={visible}
overlayColor="rgba(255,255,255,0.75)"
source={require("./loader.json")}
animationStyle={styles.lottie}
speed={1}
>
Doing something...

);
}
}

const styles = StyleSheet.create({
lottie: {
width: 100,
height: 100
}
});
`


$3

`jsx
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 (
visible={visible}
overlayColor="rgba(255,255,255,0.75)"
animationStyle={styles.lottie}
speed={1}>
Doing something...

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

`

$3

Example for expo projects

$3

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

- [x] 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 :)