Navigators #

Navigators allow you to define your application's navigation structure. Navigators also render common elements such as headers and tab bars which you can configure.

Under the hood, navigators are plain React components.

Built-in Navigators #

react-navigation includes the following functions to help you create navigators:

  • StackNavigator - Renders one screen at a time and provides transitions between screens. When a new screen is opened it is placed on top of the stack.
  • TabNavigator - Renders a tab bar that lets the user switch between several screens
  • DrawerNavigator - Provides a drawer that slides in from the left of the screen

Rendering screens with Navigators #

The navigators render application screens which are just React components.

To learn how to create screens, read about:

Calling Navigate on Top Level Component #

In case you want to use Navigator from the same level you declare it you can use react's ref option:

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator && this.navigator.dispatch({ type: 'Navigate', routeName, params });
  }
  render() {
    return (
      <AppNavigator ref={nav => { this.navigator = nav; }} />
    );
  }
}

Please notice that this solution should only be used on the top level navigator.

The built in navigators can automatically behave like top-level navigators when the navigation prop is missing. This functionality provides a transparent navigation container, which is where the top-level navigation prop comes from.

When rendering one of the included navigators, the navigation prop is optional. When it is missing, the container steps in and manages its own navigation state. It also handles URLs, external linking, and Android back button integration.

For the purpose of convenience, the built-in navigators have this ability because behind the scenes they use createNavigationContainer. Usually, navigators require a navigation prop in order to function.

onNavigationStateChange(prevState, newState) #

Sometimes it is useful to know when navigation state managed by the top-level navigator changes. For this purpose, this function gets called every time with the previous state and the new state of the navigation.

containerOptions #

These options can be used to configure a navigator when it is used at the top level.

An error will be thrown if a navigator is configured with containerOptions and also receives a navigation prop, because in that case it would be unclear if the navigator should handle its own state.

  • URIPrefix - The prefix of the URIs that the app might handle. This will be used when handling a deep link to extract the path passed to the router.

Edit on GitHubPrevious: Configuring HeadersNext: StackNavigator