Theory

The ActivityIndicator component in is used to indicate that a task is ongoing, providing visual feedback to the user. It typically appears as a spinning wheel or other animated indicator to convey that the application is busy performing an operation.

Why Do We Need It?

Indicates that the application is working on a task, preventing the user from assuming the application has frozen.

How to Work with ActivityIndicator

• The ActivityIndicator is straightforward to use and does not require state management;

• We can control its visibility by conditionally rendering it based on the status of a task.

Example

Explanation

• Initially, the component renders a welcome message using the Text component and a button using the TouchableOpacity component;

• When the button is pressed, the fetchData function is called, which sets isLoading to true to display the ActivityIndicator;

• After a 3-second delay (simulating data fetching), the fetchData function sets isLoading back to false and updates the additionalData state with some text;

• The ActivityIndicator is displayed while isLoading is true, and once isLoading becomes false, the additionalData is shown using the Text component.

Result

In Practice