React Native

The ActivityIndicator is a component in React Native that displays a circular loading indicator. It is used while fetching data, processing information, or performing the task that takes time. You can also customize color, size, and visibility of the component.

To use the ActivityIndicator component in react-native application, you first need to import it from the react-native package.

import { ActivityIndicator } from 'react-native';

Let’s see its use with an example:

In this example, we have created a state variable, isLoading, using the useState() hook. The setIsLoading function is used to update the value of isLoading. Inside the useEffect() hook, we call setTimeout(), which waits for 3 seconds and then sets the value of isLoading to false. In real applications, we would show the ActivityIndicator while fetching data from an API, processing information, or performing some task that takes time. The ActivityIndicator is displayed when isLoading is true. After 3 seconds, we show the message “Data loaded successfully!” to the user. 

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

export default function App() {
  const [isloading, setIsLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, [])

  return (
    <View style={styles.container}>
      {
        isloading ? <ActivityIndicator size='large' color='#FFA500'></ActivityIndicator> :
          <Text style={styles.textStyle}>Data loaded successfully!</Text>
      }
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  textStyle: {
    fontSize: 24
  }
});

Preview:

In ActivityIndicator, the size prop controls the size of the spinner. Its value can be large or small. The color prop set the color of the spinner.

Best practices:

Show the ActivityIndicator loader only when it is necessary.

Use overlays to prevent accidental clicks during important operations.