by Vikrant Negi
How to create a beautifully animated loader in React Native
Use Airbnb’s Lottie library to jazz up your loaders.
A loader in Web or Mobile is an essential design element usually used when we need to perform some asynchronous task like data processing or fetching. Since these tasks may take some time and users must be entertained during this time, this is where loaders come in handy.
Loaders help developers keep the user engaged while they wait and avoid any lack of responsiveness in the app. ?
Don’t want to wait? Check out the npm package React-Native-Animated-Loader.
Getting Started
React Native has an ActivityIndicator
built in which can be used as a loading indicator.
But for Loaders
we can’t just use ActivityIndicator
as we want to prevent the user from performing any action until the task is complete. And for this, we’ll use Modals
.
If you just want a plain, simple loader, then check out this tutorial.
But if you want some awesomeness ? sprinkled into your loaders, continue with the tutorial. ?
Airbnb’s Lottie ?
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.
We are going to use its React Native wrapper library lottie-react-native for our custom loader animation.
Create an App
We are going to use react-native-cli
to create a React Native project, but you can use Expo as well.
Create an example project with the following command:
~ react-native init LoaderExample
Install Dependencies
Now let’s add the necessary packages. First Install react-native-animated-loader
and lottie-react-native
.
~ npm install react-native-animated-loader --save
~ npm i --save lottie-react-native
If you are using Expo you don’t need to install Lottie.
Since lottie-react-native
requires native linking, run the following commands:
~ react-native link lottie-ios
~ react-native link lottie-react-native
After this, open the Xcode project configuration and add the Lottie.framework
as Embedded Binaries
.
If you face any error after linking Lottie, following the detailed installation instructions here.
Let’s add magic ?
Now update your App.js
with the following code:
import React, { Component } from 'react';import { StyleSheet, View, Button } from 'react-native';import AnimatedLoader from 'react-native-animated-loader';
export default class App extends Component<Props> { constructor(props) { super(props); this.state = { visible: false }; }
handlePress = () => { setTimeout(() => { this.setState({ visible: !this.state.visible, }); }, 1000); };
render() { const { visible } = this.state;
return ( <View style={styles.container}> <AnimatedLoader visible={visible} overlayColor="rgba(255,255,255,0.75)" animationStyle={styles.lottie} speed={1} /> <Button title="press" onPress={this.handlePress} /> </View> ); }}
const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, lottie: { width: 100, height: 100, },});
When you click you should the following animation within a few seconds.
Customize Animation
The animation you see is the default, but you can add your own Lottie animation. If you want to find some cool loader animations, go to lottiefiles, where you can find some pre-built loader animations. Just choose the one you like and download its JSON file.
Now add the downloaded JSON file to the LoaderExample
project and add source prop to the AnimatedLoader
. After adding the source it should look like this:
<AnimatedLoader visible={visible} overlayColor="rgba(255,255,255,0.75)" animationStyle={styles.lottie} speed={1} source={require("./path-of-your-json-file.json")} // Add here/>
You can also customize the loader styles by adding animationStyle
prop.
Usage
In our example, I’ve used setTimeout
to mimic an Asynchronous task. In the real world, you would be using it for all sorts of asynchronous tasks like fetching data from an API.
Conclusion
Now you know how to make a cool animated loader, I hope you’ll stop using the old, boring activity indicator for your loaders.
Find the library repo here.
If you like this article, go ahead and show some love with your claps.
Check out my other articles on React Native: