How to display loading indicator in React Native?

Loading indicators are essential UI components that inform users when a request is processing. In React Native, the ActivityIndicator component provides an elegant solution for displaying loading states during API calls, form submissions, or data fetching operations.

Import Statement

To use the ActivityIndicator, import it from React Native:

import { ActivityIndicator } from 'react-native';

Basic Syntax

<ActivityIndicator 
  animating={animating} 
  color='#bc2b78' 
  size="large"
  style={yourStyle} />

Properties

Example: Basic Loading Indicator

Here's a complete example showing a loading indicator that disappears after 3 seconds:

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

class LoadingIndicatorExample extends Component {
  state = { 
    animating: true 
  }
  
  closeActivityIndicator = () => {
    setTimeout(() => {
      this.setState({ animating: false });
    }, 3000);
  }
  
  componentDidMount = () => {
    this.closeActivityIndicator();
  }
  
  render() {
    const { animating } = this.state;
    
    return (
      <View style={styles.container}>
        {animating ? (
          <View style={styles.loadingContainer}>
            <ActivityIndicator
              animating={animating}
              color='#bc2b78'
              size="large"
              style={styles.activityIndicator}
            />
            <Text style={styles.loadingText}>Loading...</Text>
          </View>
        ) : (
          <Text style={styles.contentText}>Content Loaded!</Text>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5'
  },
  loadingContainer: {
    alignItems: 'center'
  },
  activityIndicator: {
    marginBottom: 10
  },
  loadingText: {
    fontSize: 16,
    color: '#333'
  },
  contentText: {
    fontSize: 18,
    color: '#333',
    fontWeight: 'bold'
  }
});

export default LoadingIndicatorExample;

Common Use Cases

Loading indicators are typically used for:

• API Calls: Show while fetching data from servers
• Form Submissions: Display during form processing
• Navigation: Indicate screen transitions
• File Operations: Show progress during uploads/downloads

Best Practices

• Always provide feedback text alongside the spinner
• Use appropriate colors that match your app theme
• Set reasonable timeouts to prevent infinite loading
• Consider using overlay styles for better visibility

Conclusion

The ActivityIndicator component is essential for creating smooth user experiences in React Native apps. Use it strategically to keep users informed during processing operations and prevent confusion about app responsiveness.