Step progress

In this final example, we'll look at displaying 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.

We're going to modify a navigation example from earlier in the book. We'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. We'll also reuse the ProgressBar component that you implemented 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 to. Here's what the first page (scene) looks like:

The progress bar below the title reflects the fact that the user is 25% through the navigation. Let's see what the third screen looks like:

The progress...