An Intro to React Navigation for React Native

When you first sit down to write a React Native app, you’ll find that after making your first screen, you don’t have an easy way to navigate to another. React Native doesn’t have that functionality built in, but in this post, I’ll outline how to use a library that makes it possible: React Navigation.

React Navigation’s Three Navigators

Want simple flows like a stack of screens, a drawer navigator, or a tab navigator? React Navigation has built-in components that make it easy to create and organize these flows.

  • The first, StackNavigator, is best used for a sequence of screens–for example, in a tutorial, or for setting preferences at app start-up.
  • The second, DrawerNavigator, is used for a drawer menu on the right or left side of a screen. This is particularly useful when you want a menu or list of options to be accessible from a home screen.
  • The third is TabNavigator, which allows you to have small tabs at the bottom or top of a screen so a user can navigate back and forth with single taps.

Where React Navigation becomes truly useful, though, is in the combination of these different navigators. Because each navigator is technically a component, they can be nested. So this allows you to use a SwitchNavigator to (you guessed it) switch between screens or navigators.

One example is a button nested in a DrawerNavigator menu. If you set the button to navigate to another navigator’s screen, you can achieve some more complex navigation within your app.

Adding React Navigation

Here’s how you can set up React Navigation.

1. Install React Navigation

yarn add react-navigation

or

npm install --save react-navigation

2. Have a couple of components in your app

For example, you could use these:

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

class ComponentOneScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Here's Screen One</Text>
      </View>
    );
  }
}
class ComponentTwoScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Here's Screen Two</Text>
      </View>
     );
  }
}

3. Organize them into a StackNavigator

import {createStackNavigator} from 'react-navigation';

export default createStackNavigator {
  ComponentOne: ComponentOneScreen,
  ComponentTwo: ComponentTwoScreen,
};

4. Add a way for one component to navigate to the other

We can do it here by making the text a button and adding an onPress event:

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

class ComponentOneScreen extends React.Component {
  render() {
    return (
      <TouchableOpacity onPress={() => this.props.navigation.navigate('ComponentTwo')}>
        <Text>Here's Screen One</Text>
      </TouchableOpacity>
    );
  }
}
class ComponentTwoScreen extends React.Component {
  render() {
    return (
      <View>
        <Text>Here's Screen Two</Text>
      </View>
     );
  }
}

And that’s it! You now have two screens that the user can navigate.

 

No matter what kind of navigator you use, whether it’s the Stack Navigator, Tab Navigator, or Switch Navigator, setting them up is all the same as I showed above. This makes it so you can spend less time worrying about how your screens can navigate between themselves, and more time actually working on them.