Navigator

The Navigator component works a bit differently from its native iOS component, but it's still very powerful to work with. One of the changes with using Navigator is that your routes should be explicitly defined. We can do this by setting up an array of routes and rendering a specific scene based on which route we're accessing. Here's a sample:

export default class Tasks extends Component { 
  render () { 
    const routes = [ 
      { title: 'First Component', index: 0 }, 
      { title: 'Second Component', index: 1 } 
    ]; 

Create a routes array, as shown in the preceding code.

You might notice that we are explicitly defining our routes from the beginning, setting up an initial route and then passing in props to each route's component here:

    return ( 
      <Navigator 
        initialRoute={{ index: 0 }} 
        renderScene={ (routes, navigator) => 
        this._renderScene(routes, navigator) } /> 
    ) 
  } 

The route object passed in to _renderScene contains a passProps object, which we can set when pushing the navigator.

Instead of passing our component when pushing into the Navigator, we pass it an index; this is where the _renderScene method of Navigator identifies which scene to show the user. Here is how pushing to the Navigator looks:

    _renderScene (route, navigator) { 
      if (route.index === 0) { 
        return ( 
          <FirstComponent 
            title={ route.title } 
            navigator={ navigator } /> 
        ) 
    } 

    if (route.index === 1) { 
      return ( 
        <SecondComponent 
         navigator={ navigator } 
         details={ route.passProps.details } /> 
      ) 
    } 
  } 
} 

This is how we would use the Navigator component to push different routes. Notice that instead of passing a component like in in NavigatorIOS, we are passing the index of the route:

  _renderAndroidNavigatorView () { 
    this.props.navigator.push({ 
      index: 1, 
      passProps: { 
        greeting: 'Hello World' 
      } 
    }); 
  } 

If you're comparing this to how we rendered EditTask in iOS, you'll note that we're not setting up our navigation bar at all. Android apps typically handle navigation through a combination of Drawer and ToolbarAndroid components that we will address in a later project. This will help our app by making it look and feel the way any Android app should.