vikrantnegi/react-native-animated-loaderPublic

NotificationsYou must be signed in to change notification settings
Fork98
Star207

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

medium.com/better-programming/how-to-create-a-beautifully-animated-loader-in-react-native-21da37a8f6b0

License

MIT license

207 stars 98 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 46 Commits
.github		.github
assets		assets
src		src
.gitignore		.gitignore
LICENSE		LICENSE
index.d.ts		index.d.ts
package-lock.json		package-lock.json
package.json		package.json
readme.md		readme.md

Repository files navigation

React Native Animated Loader

Prerequisites

Using React Native CLI

This library useslottie-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 guidehere.

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

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

Usage

Class Component

importReactfrom'react';import{StyleSheet,Text}from'react-native';importAnimatedLoaderfrom"react-native-animated-loader";exportdefaultclassLoaderextendsReact.Component{constructor(props){super(props);this.state={visible:false};}componentDidMount(){setInterval(()=>{this.setState({visible:!this.state.visible});},2000);}render(){const{ visible}=this.state;return(<AnimatedLoadervisible={visible}overlayColor="rgba(255,255,255,0.75)"source={require("./loader.json")}animationStyle={styles.lottie}speed={1}><Text>Doing something...</Text></AnimatedLoader>);}}conststyles=StyleSheet.create({lottie:{width:100,height:100}});

Functional Component

importReact,{useState,useEffect}from'react';import{StyleSheet,Text}from'react-native';importAnimatedLoaderfrom'react-native-animated-loader';exportdefaultfunctionApp(){const[visible,setVisible]=useState(false);useEffect(()=>{setInterval(()=>{setVisible(!visible);},2000);},[]);return(<AnimatedLoadervisible={visible}overlayColor="rgba(255,255,255,0.75)"animationStyle={styles.lottie}speed={1}><Text>Doing something...</Text></AnimatedLoader>);}conststyles=StyleSheet.create({lottie:{width:100,height:100,},});

Usage in Expo

Example for expo projects

Loader files

You can find free lottie files for your loadershere.

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`