Subscribe now

Getting Started with React Navigation [01.31.2017]

Last week, React Navigation was launched. It was made as a collaboration of Facebook engineers, Exponent and the React Native community. Navigation capability is something React Native was severely lacking, as you can see in Product Pains. This is really exciting!

Let's see how to get started with it. We have created a simple app to work with React Navigation.

Let's add the library:

yarn add react-navigation

React Navigation has three basic Navigators: Stack, Tab and Drawer.

Stack Navigator

Let's move the content from an empty app to src/App.js. At our index.ios. let's use React Navigation.

At our src/App.js:

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

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

const App = ()  => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome to React Native Navigation Sample!
      </Text>
      <Text style={styles.instructions}>
        To get started, edit index.ios.js
      </Text>
      <Text style={styles.instructions}>
        Press Cmd+R to reload,{'\n'}
        Cmd+D or shake for dev menu
      </Text>
    </View>
  );
}

export default App

Let's see our index.ios.js:

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import App from './src/App'
import { StackNavigator } from 'react-navigation';

class reactNavigationSample extends Component {
  static navigationOptions = {
    title: 'Home Screen',
  };

  render(){
    return (
      <App />
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: reactNavigationSample },
});

AppRegistry.registerComponent('reactNavigationSample', () => SimpleApp);

In the navigationOptions, we can configure information: such as title, header, elements on the right on left and more.

StackNavigatorConfig has the routes for our app, it can have initialRouteName, path and others.

With this configuration, we will have Home Screen in our header. As we don't have any other screens, this will be the only change we can see.

Let's add one more screen and test Stack Navigation.

  • Second Screen
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

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

const SecondScreen = ()  => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        THIS IS THE SECOND SCREEN!
      </Text>
    </View>
  );
}

SecondScreen.navigationOptions = {
  title: 'Second Screen Title',
};

export default SecondScreen

How can we go to our second screen? First we need to add it in our routes and then create a button and use the navigate method.

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import App from './src/App'
import { StackNavigator } from 'react-navigation';
import SecondScreen from './src/SecondScreen'

class reactNavigationSample extends Component {
  static navigationOptions = {
    title: 'Home Screen',
  };

  render(){
    const { navigation } = this.props;

    return (
      <App navigation={ navigation }/>
    );
  }
}

const SimpleApp = StackNavigator({
  Home: { screen: reactNavigationSample },
  SecondScreen: { screen: SecondScreen, title: 'ss' },
});

AppRegistry.registerComponent('reactNavigationSample', () => SimpleApp);

We also have passed the navigation to our firstScreen: App.

In our first screen, we will use the navigation and go to our second screen:

const App = (props)  => {
  const { navigate } = props.navigation;

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>
        Welcome to React Native Navigation Sample!
      </Text>
      <Button
          onPress={() => navigate('SecondScreen')}
          title="Go to Second Screen"
        />
    </View>
  );
}

Done! With this we can go to our second screen!

We have released a tag in our repository with the code so far.

Tab Navigator

Let's check the Tab Navigator. To change to the TabNavigator, what we should do is change our entry point to:

const SimpleApp = TabNavigator({
  Home: { screen: App },
  SecondScreen: { screen: SecondScreen }
});

With this, if you refresh your app, you should be able to see the TabBar. Let's add some icons for each Tab. We set the icons in our navigationOptions.

  • NavigationOptions for tabBar, showing the icon.
App.navigationOptions = {
  tabBar: {
      icon: () => (
        <Image
          source={require('../imgs/home.png')}
          style={[styles.tabIcon, {tintColor: 'black'}]}
        />
  )}
};

We will use the same navigationOptions for the two screens. This will be everything from changing our stack navigation to the TabBar. Also, we don't need to pass navigation as props, because the navigation is completely done by our Tab.

You can find in our repository all the code for TabBar Navigation.

Drawer Navigator

The last type of navigation we will see is the Drawer Navigation. We just need to change the type of navigation at the beginning of our app:

const SimpleApp = DrawerNavigator({
  Home: { screen: App },
  SecondScreen: { screen: SecondScreen }
});

This will already give us a Drawer Navigation with these two screens.

To add the icons, we just need to change the navigationOptions of each screen to be like this:

App.navigationOptions = {
  drawer: {
      icon: () => (
        <Image
          source={require('../imgs/home.png')}
          style={[styles.tabIcon, {tintColor: 'black'}]}
        />
  )}
};

Isn’t this awesome?! It's very easy! You can also see this entire code on our repository.

Hope you enjoyed it!

Resources