Indicating progress

In this section, you'll learn how to use the <ActivityIndicator> component. As the 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 means to show that something is happening, despite there being no results to display yet.

We'll create a super simple example just, so you can see what this component looks like. Here's the main module for the app:

import React from 'react'; 
import { 
  AppRegistry, 
  View, 
  ActivityIndicator, 
} from 'react-native'; 
 
import styles from './styles'; 
 
// Renders an "<ActivityIndicator>" component in the 
// middle of the screen. It will animate on it's own 
// while displayed. 
const IndicatingProgress = () => ( 
  <View style={styles.container}> 
    <ActivityIndicator size="large" /> 
  </View>...