Change view in Navigator in React Native

Question

I'm new to react native.

I was using NavigatorIOS but it was too limiting so I'm trying to use Navigator. In NavigatorIOS I can change a view by calling this.props.navigator.push() but it doesn't work in Navigator, it seems to be structured differently. How do I change views in using Navigator?

Answer 1

That's the minimal working navigator - it can do much more (see at the end):

1. You need your main "navigator" view to render Navigator component
2. In the Navigator you need to specify how you should render scenes for different routes (renderScene property)
3. In this "renderScene" method you should render View (scene) based on which route is being rendered. Route is a plain javascript object, and by convention scenes can be identified by "id" parameter of the route. For clarity and separation of concerns I usually define each scene as separate named component and use the name of that components as "id", though it's just a convention. It could be whatever (like scene number for example). Make sure you pass navigator as property to all those views in renderScene so that you can navigate further (see below example)
4. When you want to switch to another view, you in fact push or replace route to that view and navigator takes care about rendering that route as scene and properly animating the scene (though animation set is quite limited) - you can control general animation scheme but also have each scene animating differently (see the official docs for some examples). Navigator keeps stack (or rather array) of routes so you can move freely between those that are already on the stack (by pushing new, popping, replacing etc.)

"Navigator" View:

render: function() {
<Navigator style={styles.navigator}
      renderScene={(route, nav) =>
        {return this.renderScene(route, nav)}}
/>
},

renderScene: function(route,nav) {
   switch (route.id) {
      case "SomeComponent":
        return <SomeComponent navigator={nav} />
      case "SomeOtherComponent:
        return <SomeOtherComponent navigator={nav} />
   }
}

SomeComponent:

onSomethingClicked: function() {
   // this will push the new component on top of me (you can go back)
   this.props.navigator.push({id: "SomeOtherComponent"});
}


onSomethingOtherClicked: function() {
   // this will replace myself with the other component (no going back)
   this.props.navigator.replace({id: "SomeOtherComponent"});
}

More details here https://facebook.github.io/react-native/docs/navigator.html and you can find a lot of examples in Samples project which is part of react-native: https://github.com/facebook/react-native/tree/master/Examples/UIExplorer

Answer 2

I find that Facebook examples are either to simplistic or to complex when demonstrating how the Navigator works. Based on @jarek-potiuk example, I created a simple app that will switch screens back and forth.

In this example I'm using: react-native: 0.36.1

index.android.js

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

import Apple from './app/Apple';
import Orange from './app/Orange'

class wyse extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{screen: 'Apple'}}
        renderScene={(route, nav) => {return this.renderScene(route, nav)}}
      />
    )
  }

  renderScene(route,nav) {
    switch (route.screen) {
      case "Apple":
        return <Apple navigator={nav} />
      case "Orange":
        return <Orange navigator={nav} />
      }
  }
}

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

app/Apple.js

import React, { Component } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

export default class Apple extends Component {
  render() {
    return (
      <View>
        <Text>Apple</Text>
        <TouchableHighlight onPress={this.goOrange.bind(this)}>
          <Text>Go to Orange</Text>
        </TouchableHighlight>
      </View>
    )
  }

  goOrange() {
    console.log("go to orange");
    this.props.navigator.push({ screen: 'Orange' });
  }
}

app/Orange.js

import React, { Component, PropTypes } from 'react';
import { View, Text, TouchableHighlight } from 'react-native';

export default class Orange extends Component {
  render() {
    return (
      <View>
        <Text>Orange</Text>
        <TouchableHighlight onPress={this.goApple.bind(this)}>
          <Text>Go to Apple</Text>
        </TouchableHighlight>
      </View>
    )
  }

  goApple() {
    console.log("go to apple");
    this.props.navigator.push({ screen: 'Apple' });
  }
}