React-Native ActivityIndicator

Syntax

The ActivityIndicator component in React-Native is used to show a spinner or busy indicator on the screen. It can be used with a combination of state management to show/hide the spinner as needed.

import { ActivityIndicator } from 'react-native';

<ActivityIndicator size="large" color="#0000ff" />

Example

import React, { useState } from 'react';
import { View, Button, ActivityIndicator } from 'react-native';

function MyComponent() {
  const [loading, setLoading] = useState(false);

  const handleButtonClick = () => {
    setLoading(true);

    // Some async operation
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  };

  return (
    <View>
      {loading ? (
        <ActivityIndicator size="large" color="#0000ff" />
      ) : (
        <Button title="Load Data" onPress={handleButtonClick} />
      )}
    </View>
  );
}

export default MyComponent;

Output

The output of the ActivityIndicator component will depend on the values set for its props. In the example above, a spinner will be displayed with a large size and blue color. When the spinner is no longer needed, it will be hidden and replaced with a button.

Explanation

The ActivityIndicator component is used to show a spinner or busy indicator on the screen while waiting for an operation to complete. It can be used to represent loading states, waiting for data, or any other situation where a user may need to wait for an action to complete.

The ActivityIndicator component can be customized using props such as color, size, and animating. It can also be combined with state management to show or hide the spinner as needed.

Use

The ActivityIndicator component can be used in any React-Native application to show a busy indicator while waiting for an operation to complete. Some common use cases include:

• Waiting for data to be loaded
• Waiting for network requests to complete
• Waiting for user input to be processed

Important Points

• The ActivityIndicator component should be used sparingly to avoid creating a poor user experience.
• The size and color of the spinner can be customized using the size and color props.
• The spinner can be hidden or shown depending on the state of the application.

Summary

The ActivityIndicator component in React-Native is a powerful tool for showing a spinner or busy indicator on the screen while waiting for an operation to complete. It can be customized using props and can be used in any React-Native application to improve the user experience.