Animated Spinner - React Native

Most of the times in Mobile Development, you might want to have an interactive spinner/activity indicator. In this short article we are going to demonstrate how we can achieve that to an Expo generated React Native app.

We demonstrate this using Lottie React Native, therefore, you need to install the librabry lottie-react-native by running the command yarn add lottie-react-native.

Now, go to https://lottiefiles.com/, you need to create a free account before you can be able to download animations, here you can search and download the animated activity indicator that you want to use, select to download the Lottie JSON file. Take the JSON file and put it inside your react native project (e.g assets/animation.json).

Now, you can create a shared component that you will use throughout your project, or wherever you want to use it. Let's have a look at the example of such component below:

import React from 'react';
import Lottie from 'lottie-react-native';

const LoadingComponent = () => {
   return(
       <Lottie source={require('../src/assets/animation.json')} autoPlay loop />
    );
};
export default LoadingComponent;

Here, we are importing Lottie from 'lottie-react-native', a library that we installed, the component returns and animation which is created from the JSON file we downloaded from https://lottiefiles.com/. Notice, what we return on the component has autoPlay and loop, autoPlay is for making the animation play automatically, and loop is for the animation to continue playing, while rendered.

You can always modify or play around these on the React useEffect, give the animation the behavior you want based on some conditions.

You now have an animated activity indicator on your app.

Thank you very much for reading.🤓😎