React Native #6 - Navigator

In React Native, to add navigation to your app you can use the Navigator component. You can have as many navigators as you want in your app e.g. you may have one for your whole app or multiple if you are using tabs with different navigation stacks for each tab. This tutorial will explain how to add a single navigator to your react native app. Firstly, add the navigator as the base for your application so specify it in the index.ios.js and the index.android.js:

  // Import the Navigator from React Native 
  import React, { Component } from 'react';
  import {
    AppRegistry,
    Navigator
  } from 'react-native';

  import MainScene from './app/scenes/mainScene'
  import AddGoalScene from './app/scenes/addGoalScene'

  export default class Goalie extends Component {
    renderScene(route, navigator) {
      // Specify the properties to pass to the scene you will 
      // render. It is useful to pass the navigator around the
      // scenes so that you can push and pop to the navigation
      // stack. 
      var globalNavigatorProps = {
        navigator: navigator,
        goal: route.goal
      };

      // Based on the route passed to the navigator you can
      // determine which scene to render.
      switch(route.ident) {
        case "MainScene":
          return ( <MainScene {...globalNavigatorProps} />);
        case "AddGoalScene":
          return ( <AddGoalScene {...globalNavigatorProps} />);
        default:
          return ( <MainScene {...globalNavigatorProps}  />);
      }

    }

    render() {
      return (
        // Render your navigator
        // You must specify an initial route, which will become
        // your root view for the app. The initialRoute is just 
        // an object with an identifier you can use to define 
        // which screen should be displayed, and whatever other
        // info you would like to pass in.
        // You must also specify a renderScene function which
        // has the args route and navigator, this must return
        // what you would like to render on the navigation stack.
        <Navigator 
          initialRoute={{ident: "MainScene", goal: "MainScene" }} 
          renderScene={this.renderScene} />
      );
    }
  }

  AppRegistry.registerComponent('Goalie', () => Goalie);

The next step is to be able to add and remove from the navigation stack. For simplicity, I will demonstrate this using back and forward buttons:

  import React, { Component } from 'react';
  import {
    Button
  } from 'react-native';

  import ViewContainer from 
    '../components/viewContainer/ViewContainer'

  export default class MainScene extends Component {

    // Passes new route to the navigator, the scene
    // with the corresponding identifier will get rendered.
    navigateToAddGoal() {
      this.props.navigator.push({
        ident: "AddGoalScene",
        goal: this.props.goal
      });
    }

    // Removes the current scene from the navigator's
    // stack, and goes back to the previous scene. 
    goBack() {
      this.props.navigator.pop();
    }

    render() {
      return (
        <ViewContainer>
          <Button title= "Back" 
            onPress = { (event) => this.goBack() }/>
          <Button title= "Forward" 
            onPress = { (event) => this.navigateToAddGoal() }/>
        </ViewContainer>
      );
    }
  }