Showing Progress

This chapter is all about communicating progress to the user. React Native has different components that are used to handle the different types of progress that you want to communicate. First, you’ll learn why you need to communicate progress in the app. Then, you’ll learn how to implement progress indicators and progress bars. And finally, you’ll see specific examples that show you how to use progress indicators with navigation while data loads and progress bars to communicate the current position in a series of steps.

The following sections are covered in this chapter:

• Understanding progress and usability
• Indicating progress
• Measuring progress
• Exploring navigation indicators
• Step progress

Technical requirements

You can find the code files for this chapter on GitHub at https://github.com/PacktPublishing/React-and-React-Native-5E/tree/main/Chapter24.

Understanding progress and usability

Imagine that you have a microwave oven that has no window and makes no sound. The only way to interact with it is by pressing a button labeled “cook.” As absurd as this device sounds, it’s what many software users face: no indication of progress. Is the microwave cooking anything? If so, how do we know when it will be done?

One way to improve the microwave situation is to add a beep sound. This way, the user gets feedback after pressing the cook button. You’ve overcome one hurdle, but the user is still left asking, “When will my food be ready?” Before you go out of business, you had better add some sort of progress measurement display, such as a timer.

It’s not that UI programmers don’t understand the basic principles of this usability concern; it’s just that they have stuff to do, and this sort of thing simply slips through the cracks in terms of priority. In React Native,...

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...

Exploring navigation indicators

Earlier in this chapter, you were introduced to the ActivityIndicator component. In this section, you’ll learn how it can be used when navigating an application that loads data. For example, the user navigates from page or screen one to page two. However, page two needs to fetch data from the API that it can display to the user. So, while this network call is happening, it makes more sense to display a progress indicator instead of a screen devoid of useful information.

Doing this is actually kind of tricky because you have to make sure that the data that’s required by the screen is fetched from the API each time the user navigates to the screen. Your goals should be as follows:

• Have the Navigator component automatically fetch API data for the scene that’s about to be rendered.
• Use the promise that’s returned by the API call as a means to display the spinner and hide it once the promise has been resolved...

Measuring progress

The downside of just indicating that progress is being made is that there’s no end in sight for the user. This leads to a feeling of unease, like when you’re waiting for food to cook in a microwave with no timer. When you know how much progress has been made and how much is left to go, you feel better. That is why it’s always better to use a deterministic progress bar whenever possible.

Unlike the ActivityIndicator component, there’s no platform-agnostic component in React Native for progress bars. So, we’ll use the react-native-progress library for rendering progress bars.

In the past, React-Native had special components for showing progress bars for iOS and Android, but due to React-Native size optimization, the Meta team is working on moving such components to separate packages. So, ProgressViewIOS and ProgressBarAndroid have been moved outside of the React-Native library.

Now, let’s build the...

Step progress

In this final example, you’ll build an app that displays the user’s progress through a predefined number of steps. For example, it might make sense to split a form into several logical sections and organize them in such a way that, as the user completes one section, they move to the next step. A progress bar would be helpful feedback for the user.

You’ll insert a progress bar into the navigation bar, just below the title, so that the user knows how far they’ve gone and how far is left to go. You’ll also reuse the ProgressBar component that you used earlier in this chapter.

Let’s take a look at the result first. There are four screens in this app that the user can navigate. Here’s what the First page (scene) looks like:

Figure 24.4: The first screen

The progress bar under the title reflects the fact that the user is 25% through the navigation. Let’s see what the Third screen looks like:

...