DEV Community

Ezile Mdodana
Ezile Mdodana

Posted on

4

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;
Enter fullscreen mode Exit fullscreen mode

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.🤓😎

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more