In the previous example, you told the left and right navigation buttons where they should link to by passing routes within routes. The challenge with this approach is that it takes a lot of work to keep this navigation data up-to-date, especially if all you need is simple back and forward behavior. Let's make some adjustments to the application so that the buttons automatically know which route to use.
First, let's take a look at the UI so that you can see what we're trying to achieve here:
If you take a look at the navigation bar, you'll notice that there are a title and a forward button. But there's no back button. This is because the user is on the first screen, so there's nowhere to navigate back to. When the user moves to the second screen, they'll see a forward and a back button. Now let's take a look at the main module:
import React from 'react';
import {
AppRegistry,
Navigator,
} from 'react-native';
import routes from...