React Navigation Document

createStackNavigator

Provides a way for your app to transition between screens where each new screen is placed on top of a stack.

• React Native doesn't have a built-in API for navigation like a web browser does. React Navigation provides this for you, along with the iOS and Android gestures and animations to transition between screens.

• createStackNavigator is a function that takes a route configuration object and an options object and returns a React component.

• The keys in the route configuration object are the route names and the values are the configuration for that route. The only required property on the configuration is the screen (the component to use for the route).

• To specify what the initial route in a stack is, provide an initialRouteName on the stack options object.

• this.props.navigation.navigate('RouteName') pushes a new route to the stack navigator if it's not already in the stack, otherwise it jumps to that screen.

• We can call this.props.navigation.push('RouteName') as many times as we like and it will continue pushing routes.

• The header bar will automatically show a back button, but you can programmatically go back by calling this.props.navigation.goBack(). On Android, the hardware back button just works as expected.

• You can go back to an existing screen in the stack with this.props.navigation.navigate('RouteName'), and you can go back to the first screen in the stack with this.props.navigation.popToTop().

• The navigation prop is available to all screen components (components defined as screens in route configuration and rendered by React Navigation as a route).

• navigate and push accept an optional second argument to let you pass parameters to the route you are navigating to. For example: this.props.navigation.navigate('RouteName', {paramName: 'value'}).

• You can read the params through this.props.navigation.getParam

• As an alternative to getParam, you may use this.props.navigation.state.params. It is null if no parameters are specified.

Configuring the header bar

• You can customize the header inside of the navigationOptions static property on your screen components. Read the full list of options in the API reference.

• The navigationOptions static property can be an object or a function. When it is a function, it is provided with an object with the navigation prop, screenProps, and navigationOptions on it.

• You can also specify shared navigationOptions in the stack navigator configuration when you initialize it. The static property takes precedence over that configuration.

Header buttons

• You can set buttons in the header through the headerLeft and headerRight properties in navigationOptions.

• The back button is fully customizable with headerLeft, but if you just want to change the title or image, there are other navigationOptions for that — headerBackTitle, headerTruncatedBackTitle, and headerBackImage.

Opening a full-screen modal

A modal displays content that temporarily blocks interactions with the main view

• To change the type of transition on a stack navigator you can use the mode configuration. When set to modal, all screens animate-in from bottom to top rather than right to left. This applies to that entire stack navigator, so to use right to left transitions on other screens, we add another navigation stack with the default configuration.

• this.props.navigation.navigate traverses up the navigator tree to find a navigator that can handle the navigate action.

Tab navigation

Possibly the most common style of navigation in mobile apps is tab-based navigation. This can be tabs on the bottom of the screen or on the top below the header (or even instead of a header).

This is similar to how you would customize a stack navigator — there are some properties that are set when you initialize the tab navigator and others that can be customized per-screen in navigationOptions.

• tabBarIcon is a property on navigationOptions, so we know we can use it on our screen components, but in this case chose to put it in the createBottomTabNavigator configuration in order to centralize the icon configuration for convenience.

• tabBarIcon is a function that is given the focused state and tintColor. If you take a peek further down in the configuration you will see tabBarOptions and activeTintColor and inactiveTintColor. These default to the the iOS platform defaults, but you can change them here. The tintColor that is passed through to the tabBarIcon is either the active or inactive one, depending on the focused state (focused is active).

Drawer navigation

class MyHomeScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Home',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./chats-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('Notifications')}
        title="Go to notifications"
      />
    );
  }
}

class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    drawerLabel: 'Notifications',
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./notif-icon.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };

  render() {
    return (
      <Button
        onPress={() => this.props.navigation.goBack()}
        title="Go back home"
      />
    );
  }
}

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

const MyApp = createDrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

To open and close drawer, use the following helpers to open and close the drawer:

this.props.navigation.openDrawer();
this.props.navigation.closeDrawer();

If you would like to toggle the drawer you call the following:

this.props.navigation.toggleDrawer();

Each of these functions, behind the scenes, are simply dispatching actions:

this.props.navigation.dispatch(DrawerActions.openDrawer());
this.props.navigation.dispatch(DrawerActions.closeDrawer());
this.props.navigation.dispatch(DrawerActions.toggleDrawer());

SwitchNavigator

The purpose of SwitchNavigator is to only ever show one screen at a time. By default, it does not handle back actions and it resets routes to their default state when you switch away. This is the exact behavior that we want from the authentication flow: when users sign in, we want to throw away the state of the authentication flow and unmount all of the screens, and when we press the hardware back button we expect to not be able to go back to the authentication flow. We switch between routes in the SwitchNavigator by using the navigate action. You can read more about the SwitchNavigator in the API reference.