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 is updated to reflect where the user is in the route stack. Let's take a look at the code required to make this happen:

import React from 'react'; 
import { 
  AppRegistry, 
  Navigator, 
  View, 
} from 'react-native'; 
 
import routes from './routes'; 
import styles from './styles'; 
import ProgressBar from './ProgressBar'; 
 
const renderScene = route => (<route.Scene />); 
 
const routeMapper = { 
  Title: (route, navigator) => ( 
    <View style={styles.progress}> 
      <route.Title navigator={navigator} /> 
      { /* The "<ProgressBar>" component is rendered just 
           below the title text. There's no progress label, 
           just the bar itself. The "progress" itself is 
           computed based on where the current route is 
           in the route stack. */ } 
      <ProgressBar 
        label={false} 
        progress={ 
          (routes.indexOf(route) + 1) / routes.length 
        } 
      /> 
    </View> 
  ), 
  LeftButton: (route, navigator) => ( 
    <route.LeftButton navigator={navigator} /> 
  ), 
  RightButton: (route, navigator) => ( 
    <route.RightButton navigator={navigator} /> 
  ), 
}; 
 
const navigationBar = ( 
  <Navigator.NavigationBar 
    style={styles.nav} 
    routeMapper={routeMapper} 
  /> 
); 
 
const StepProgress = () => ( 
  <Navigator 
    initialRoute={routes[0]} 
    initialRouteStack={routes} 
    renderScene={renderScene} 
    navigationBar={navigationBar} 
  /> 
); 
 
AppRegistry.registerComponent( 
  'StepProgress', 
  () => StepProgress 
); 

Take a look at the Title component in routeMapper. This is where the <ProgressBar> component is rendered. The actual progress value is based on where the current route is in the routes array. This determines the complete percentage of moving through the array.