React Native simple navigation example

react native navigator example

In this article we will take a look on React Native navigation handling example using Navigator component. A lot of code would be shown here, but I’ll try to make it all clear.

So, to make navigation work in React Native we will use the Navigator component. We also need to create 3 classes:

  • the class containing the Navigator component
  • 2 simple classes to navigate between each one (I called them Main and Stats).

In my example, I placed all classes inside of indes.ios.js.

Navigator example

Here is the class that contains the Navigator:

class Navi extends Component {
  render() {
    return (
      <Navigator
        initialRoute={{ name: 'main' }}
        renderScene={this.renderScene.bind(this)}
      />
    );
  }

  renderScene(route, navigator) {
     if(route.name == 'main') {
       return <Main navigator={navigator}  />
     }
     if(route.name == 'stats') {
       return <Stats navigator={navigator} />
     }
  }
}

Explanation:

Inside the render method we return the Navigator component with specified parameters – initialRoute and renderScene. Initial Route is an object that contains data for the main view.

renderScene parameter specifies a method that return different components depending on route’s name. We pass navigator parameter into each of the returned components to make it reachable via this.props.navigator inside of them.

Navigation between views

And here are the simple classes to navigate between each other using TouchableHighlight element:

class Main extends Component {
  navigate(routeName) {
    this.props.navigator.push({
      name: routeName
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Main
        </Text>
        <TouchableHighlight onPress={this.navigate.bind(this, "stats")}>
          <Text>TO STATS PAGE</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

class Stats extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Stats
        </Text>
        <TouchableHighlight onPress={()=>{this.props.navigator.pop()}}>
          <Text>BACK</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

The 1st one uses navigator.push method for navigation to the next view.

The 2nd uses navigator.pop method to get back to the previous one.

Here is code to wrap the classes above to make it a working React Native file:

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

// A PLACE TO INSERT 3 CLASSES !!!!!!!

const styles = StyleSheet.create({
  container: {
    marginTop:20,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

AppRegistry.registerComponent('navi', () => Navi);

If it was helpful or if you still have any questions – leave me a comment.

Leave a Reply

2 Comments on "React Native simple navigation example"


Guest
Gisa
6 months 29 days ago

Best tutorial i found so far! it should be on the top results