Indicating progress

In this section, you’ll learn how to use the ActivityIndicator component. As its name suggests, you render this component when you need to indicate to the user that something is happening. The actual progress may be indeterminate, but at least you have a standardized way to show that something is happening, despite there being no results to display yet.

Let’s create an example so that you can see what this component looks like. Here’s the App component:

import React from "react";
import { View, ActivityIndicator } from "react-native";
import styles from "./styles";
export default function App() {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" />
    </View>
  );
}

The <ActivityIndicator /> component is platform-agnostic. Here’s how it looks on iOS:

Figure 24.1: An activity indicator on iOS

It renders an animated...