Version: 4.x

Overview

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 some commonly needed navigators such as:

  • createStackNavigator - 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.
  • createBottomTabNavigator - Renders a tab bar that lets the user switch between several screens.
  • createSwitchNavigator - Switch between one screen and another with no UI on top of it, unmount screens when they become inactive.
  • createDrawerNavigator - 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:

  • Screen navigation prop to allow the screen to dispatch navigation actions, such as opening another screen
  • Screen navigationOptions to customize how the screen gets presented by the navigator (e.g. header title, tab label)