Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

Activity Indicator in React Native

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

In this tutorial, we will learn how to build activity indicators. A spinning wheel is an Activity Indicator, which signals that a task is being processed. If an action takes an undetermined time to complete, an activity indicator should be displayed to inform the user that the program is not frozen. Let's discuss the properties of the activity indicator.

Properties of Activity Indicator

The activity indicator comes inside the view class, so it inherits the view's properties, you can see all the view's properties on the react-native official site. Along with that, it also has some explicit properties:

We've had enough theories let's consider an example to get a good grasp on the activity indicator.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Example of Activity Indicator

We will create a separate .js file for our activity indicator because this practice will bring modularity to our codebase. Whenever we need the activity indicator, we will call that file repeatedly.

App.js 

Code:

import * as React from 'react';
// You can import from local files
import ActivityIndicatorDemo from './ActivityIndicator.js'
// ActivityIndicator.js is having the class ActivityIndicatorDemo

export default function App() {
  return (
    <ActivityIndicatorDemo/>
  );
}

In App.js, we call the ActivityIndicatorDemo class, in the ActivityIndicator.js.

ActivityIndicator.js 

Code:

import React, { Component } from 'react'  
import {  
    ActivityIndicator,  
    AppRegistry,  
    StyleSheet,  
    Text,  
    View,  
} from 'react-native'  
  
export default class ActivityIndicatorDemo extends Component {  
    state = { animating: true } 
//Method to set the animation time. 
    closeActivityIndicator = () => setTimeout(() => this.setState({  
        animating: false }), 6000)  
    componentDidMount = () => this.closeActivityIndicator()  
    render() {  
        const animating = this.state.animating  
        return (  
            <View style={[styles.container, styles.horizontal]} >  
                <ActivityIndicator  animating = {animating} size="small" color="purple" />  
                <ActivityIndicator size="large" color="red" />  
                <ActivityIndicator size="small" />  
            </View>  
        )  
    }  
}  
  
const styles = StyleSheet.create({  
    container: {  
        flex: 1,  
        justifyContent: 'center'  
    },  
    horizontal: {  
        flexDirection: 'row',  
        justifyContent: 'space-around',  
        padding: 10  
    }  
})  
  
AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)  


Output:


Explanation: In the above ActivityIndicatorDemo class, we have created three activity indicators of size small, large and small respectively and the color purple, red and default respectively. The first activity indicator has a specific timestamp (6 seconds) for its animation, after which it will disappear because its animating property will be set to false.

Frequently Asked Questions

What is the use of setTimeout() function in react-native?

We may occasionally need to run code after a delay. In such circumstances, we use React Native's JavaScript API setTimeout. The SetTimeout method is used to run a function after a certain period has passed.

What is a class component in react-native?

Class components are JavaScript classes that extend the React Component base class. This grants the class (say ActivityIndicatorDemo)  access to the parent's state/props functionality and React lifecycle methods like the render. In the example above, we have used the class component. 

What is a functional component in react-native?

Apart from using class components, we can also use functional components. The functional components are less complicated. They don't have control over their state or access to React Native's lifecycle functions. They're just plain old JavaScript functions, and they're also known as stateless components.

Conclusion

In this article, we have extensively discussed theActivity Indicator in React Native. We’ve discussed its properties and used its method along with an example.
We hope that this blog has helped you enrich your knowledge regarding the Activity Indicator in React Native. Do not forget to check out the awesome content on the Coding Ninjas Website, Android DevelopmentCoding Ninjas Studio ProblemsCoding Ninjas Courses, Coding Ninjas Studio Contests,  Coding Ninjas Studio Interview BundleCoding Ninjas Studio Interview Experiences and Coding Ninjas Studio Test SeriesDo upvote our blog to help other ninjas grow. 
Happy Coding!

Topics covered
1.
Introduction
2.
Properties of Activity Indicator
3.
Example of Activity Indicator
4.
Frequently Asked Questions
4.1.
What is the use of setTimeout() function in react-native?
4.2.
What is a class component in react-native?
4.3.
What is a functional component in react-native?
5.
Conclusion