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 Development, Coding Ninjas Studio Problems, Coding Ninjas Courses, Coding Ninjas Studio Contests, Coding Ninjas Studio Interview Bundle, Coding Ninjas Studio Interview Experiences and Coding Ninjas Studio Test Series. Do upvote our blog to help other ninjas grow.
Happy Coding!
568+ registered 
