How to show loading indicator in React Native?

Use loading indicators when we want to tell the user that a request they are making on the UI will take time. If the user clicks the submit button after filling the form, or clicks the search button to get some data.

ReactNative provides an ActivityIndicator component, which can display loading indicators on the UI in different ways.

The basic ActivityIndicator component is as follows-

<ActivityIndicator animating = {animating} color = &#39;#bc2b78&#39; size = "large"
style = {yourstyle}/>

To use ActivityIndicator, you need to import it as follows -

import { ActivityIndicator} from 'react-native';

Here are some important properties provided by ActivityIndicator.

Sr.No	Props and Instructions
1	Animation p> Animation for the loading indicator. it takes a boolean value true to show the indicator, false to hide the indicator.
2	Color p> The color displayed by the loading indicator.
3	hidesWhenStopped Stops when the indicator is not animated. Its value is correct incorrect.
4	Size Size indicator. The values ​​range from small to large.

Example: Display of loading indicator

The loading indicator is implemented using ActivityIndicator, so import -# first ##

import { ActivityIndicator, View, StyleSheet } from 'react-native';

This is the ActivityIndicator component used -

<ActivityIndicator
   animating = {animating}
   color = &#39;#bc2b78&#39;
   size = "large"
style = {styles.activityIndicator}/>

The animation is set to the animation variable, and the default setting is true. Call the closeActivityIndicator method in the componentDidMount() function, which will set the animation state to false after 1 minute.

state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()

This is the complete code to display the loading indicator -

import React, { Component } from 'react';
import { ActivityIndicator, View, StyleSheet } from 'react-native';
class ActivityIndicatorExample extends Component {
   state = { animating: true }
   closeActivityIndicator = () => setTimeout(() => this.setState({
   animating: false }), 60000)
   componentDidMount = () => this.closeActivityIndicator()
   render() {
      const animating = this.state.animating
      return (
         
            
         
      )
   }
}
export default ActivityIndicatorExample
const styles = StyleSheet.create ({
   container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 70
   },
   activityIndicator: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      height: 80
   }
})

Output

The above is the detailed content of How to show loading indicator in React Native?. For more information, please follow other related articles on the PHP Chinese website!