Useful to show lottie animation spinners in react-native mobile apps
npm install react-native-animated-loaderRead more about this package here.




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

Follow the official instruction and linking guide here.
```
yarn add react-native-animated-loader`
or`
npm install react-native-animated-loader --save
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` |