Updated March 31, 2023
Definition of React Native ActivityIndicator
React native activity indicator is an indicator component that will be used for creating the loader indicator, in this indicator we can also add custom style and sizes for the indicators (which will be used to make the sizes according to our screen), main power for the react-native activity indicator will be it has animate property(animate property which will be used for hiding the activity indicator ), we can define the color attribute for the given indicator activity (the color attribute which will be used to handle the color of indicator activity for the different situations).
How does React Native ActivityIndicator work?
React native indicator activity working principle we can define in the below-given steps.
- The imported module will be used to pass the parameters (like color, size, and animating)
- When we define animating attributes then we need to pass a boolean value for it (true and false). The value for it will be the deciding factor, if its value is false it will hide the activity indicator.
- It has the color attribute which we will pass in the indicator activity, this attribute will change the color of the indicator. In case if we want to put the indicator in some particular color for example in case of success loading we can put them into green color. In case fail we set some other color also.
- When we pass the value for the attribute size into it, it will change the size of the activity indicator. In many cases where we wanted to put an indicator into any particular size according to the screen, we can define its value and pass the same for it.
React Native ActivityIndicator Props
React native activityindicator props are given below:
Size
This attribute is used to manage the size of indicators, many times it happens that the size may not be appropriate for any given device in that case we can use this attribute to manage various sizes for different application sizes.
Color
Color attribute is used to color the items of the indicator, in case different kinds of indication we can use different color according to the requirement, for example, if it is for any success related we can use the green signal and if it is for any warning or for any danger we can use the color red. It will be cyan and gray for android and IOS in default.
Animating
This attribute is a boolean value that is true or false. This value defines visibility for the indicator in case if it is true then the indicator will be visible and in case if animating is false then the indicator will not visible. For example, suppose we have a situation where we want to show the indicator for some given time only in that case we can define set time and in that set time we can change its value to false and indicator will not be visible.
Examples
The below example contains uses of all the above-mentioned attributes, let me explain the below example with step b step.
Example #1
- In the first step we created a class name indicator example, this class extends the core react-native class of react js.
- We are importing the react-native ActivityIndicator attribute which will be used further.
- We have defined an indicatorAnimating state value that will be true by default, as we have defined the attribute animating which will be used for hiding the indicator.
- We have defined one function closeIndicator which contains the logic for timer for the setting value of indicatorAnimating.
- Inside the render function, we are returning a few indicators. The first indicator is for the pink color and it contains the animator property, which will be changed as we have set the timer function for it. This timer function will invoke and change a value for the indicatorAnimation.We defined its size as the large
- The second indicator we defined for the green color and large in size
- 3rd indicator inside the render function we have defined with small as the size and red as the color.
- Finally, we defined indicatorStyle for it which will be designed to look for the indicators. In this section whatever we write will have to mention the activity indicator.
Please follow the example and screen of the output given below for a better understanding.
Code:
import React, { Component } from 'react'
import {
ActivityIndicator,
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
export default class indicatorExample extends Component {
state = { indicatorAnimating: true }
closeIndicator = () => setTimeout(() => this.setState({
indicatorAnimating: false }), 6000)
componentDidMount = () => this.closeIndicator()
render() {
const indicatorAnimating = this.state.indicatorAnimating
return (
<View style={[indicagtorStyle.containerStyle, indicagtorStyle.horizontalStyle]} >
<ActivityIndicator animating = {indicatorAnimating} size="large" color="pink" />
<ActivityIndicator size="large" color="green" />
<ActivityIndicator size="small" color="red" />
</View>
)
}
}
const indicagtorStyle = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center'
},
horizontalStyle: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 11
}
})
AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)Output:
Example #2
Below example below is for animating attributes of react-native. We can explain this example in the steps below.
- We define one react native class with name indicatorExample which us extending react core class
- Inside the class, we are defining the set timeout function which will change the animating attribute to false which was initialized to animating value true.
- The render function will get a call and it will display the activity indicator for 6 seconds and after that animating value will change to false which will hide the activity indicator.
Code:
import React, { Component } from 'react'
import {
ActivityIndicator,
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native'
export default class indicatorExample extends Component {
state = { indicatorAnimating: true }
closeIndicator = () => setTimeout(() => this.setState({
indicatorAnimating: false }), 6000)
componentDidMount = () => this.closeIndicator()
render() {
const indicatorAnimating = this.state.indicatorAnimating
return (
<View style={[indicagtorStyle.containerStyle, indicagtorStyle.horizontalStyle]} >
<ActivityIndicator animating = {indicatorAnimating} size="large" color="pink" />
</View>
)
}
}
const indicagtorStyle = StyleSheet.create({
containerStyle: {
flex: 1,
justifyContent: 'center'
},
horizontalStyle: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 11
}
})
AppRegistry.registerComponent('App', () => ActivityIndicatorDemo)Output:
Recommended Articles
This is a guide to React Native ActivityIndicator. Here we discuss how does react native activityindicator works along with different examples and its code implementation. You may also look at the following articles to learn more –
