How To Make Animated Ellipsis React Native

past Vikrant Negi

How to create a beautifully blithe loader in React Native

Use Airbnb's Lottie library to jazz up your loaders.

Lottie Animation for 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 up in handy.

Loaders aid developers proceed the user engaged while they wait and avoid whatever lack of responsiveness in the app. ?

Don't want to expect? Bank 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 tin can't but apply ActivityIndicator as we want to prevent the user from performing any action until the task is complete. And for this, we'll utilize Modals.

If y'all just want a plain, simple loader, and then cheque out this tutorial.

Only if you want some awesomeness ? sprinkled into your loaders, keep with the tutorial. ?

Airbnb's Lottie ?

Lottie is an iOS, Android, and React Native library that renders Afterwards Furnishings animations in real fourth dimension, allowing apps to utilize animations every bit 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

Nosotros are going to use react-native-cli to create a React Native project, just you tin can use Expo every bit well.

Create an example project with the following command:

                ~ react-native init LoaderExample              

Install Dependencies

At present let's add the necessary packages. First Install react-native-animated-loader and lottie-react-native.

                ~ npm install react-native-animated-loader --salve              

                ~ npm i --save lottie-react-native              

If yous are using Expo y'all don't demand to install Lottie.

Since lottie-react-native requires native linking, run the post-obit commands:

                ~ react-native link lottie-ios              

                ~ react-native link lottie-react-native              

Later this, open the Xcode project configuration and add the Lottie.framework as Embedded Binaries.

If y'all face any fault after linking Lottie, post-obit the detailed installation instructions hither.

Let's add magic ?

Now update your App.js with the following lawmaking:

                import React, { Component } from 'react';import { StyleSheet, View, Push 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.land;              

                                  return (      <View style={styles.container}>        <AnimatedLoader          visible={visible}          overlayColor="rgba(255,255,255,0.75)"          animationStyle={styles.lottie}          speed={i}        />        &lt;Button title="press" onPress={this.handlePress} />      </View>    );  }}              

                const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'centre',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  lottie: {    width: 100,    pinnacle: 100,  },});              

When you click you should the post-obit animation within a few seconds.

Customize Animation

The blitheness you lot run across is the default, only yous can add your own Lottie blitheness. If you lot want to detect some cool loader animations, go to lottiefiles, where you tin can find some pre-built loader animations. Merely choose the one you like and download its JSON file.

Now add together the downloaded JSON file to the LoaderExample project and add source prop to the AnimatedLoader. After adding the source information technology should expect similar this:

                <AnimatedLoader  visible={visible}  overlayColor="rgba(255,255,255,0.75)"  animationStyle={styles.lottie}  speed={1}  source={crave("./path-of-your-json-file.json")} // Add here/>              

You tin also customize the loader styles by calculation animationStyle prop.

Usage

In our case, I've used setTimeout to mimic an Asynchronous task. In the existent earth, you lot would exist using it for all sorts of asynchronous tasks like fetching data from an API.

Decision

Now you know how to make a cool animated loader, I hope you'll finish using the old, boring activity indicator for your loaders.

Find the library repo hither.

If you lot like this article, become alee and evidence some love with your claps.

Check out my other articles on React Native:

• React Native FlatList with realtime searching ability
• React Native Location Tracking
• React Native charts with dynamic tooltips

---

Learn to code for costless. freeCodeCamp'south open source curriculum has helped more than than 40,000 people get jobs as developers. Get started

Source: https://www.freecodecamp.org/news/how-to-create-a-beautifully-animated-loader-in-react-native-21da37a8f6b0/

Posted by: spencerwherser.blogspot.com

Share this post