Navigator

Use Navigator to transition between different scenes in your app. To accomplish this, provide route objects to the navigator to identify each scene, and also a renderScene function that the navigator can use to render the scene for a given route.

To change the animation or gesture properties of the scene, provide a configureScene prop to get the config object for a given route. See Navigator.SceneConfigs for default animations and more info on scene config options.

Basic Usage #

  <Navigator
    initialRoute={{name: 'My First Scene', index: 0}}
    renderScene={(route, navigator) =>
      <MySceneComponent
        name={route.name}
        onForward={() => {
          var nextIndex = route.index + 1;
          navigator.push({
            name: 'Scene ' + nextIndex,
            index: nextIndex,
          });
        }}
        onBack={() => {
          if (route.index > 0) {
            navigator.pop();
          }
        }}
      />
    }
  />

Navigator Methods #

If you have a ref to the Navigator element, you can invoke several methods on it to trigger navigation:

getCurrentRoutes() - returns the current list of routes
jumpBack() - Jump backward without unmounting the current scene
jumpForward() - Jump forward to the next scene in the route stack
jumpTo(route) - Transition to an existing scene without unmounting
push(route) - Navigate forward to a new scene, squashing any scenes that you could jumpForward to
pop() - Transition back and unmount the current scene
replace(route) - Replace the current scene with a new route
replaceAtIndex(route, index) - Replace a scene as specified by an index
replacePrevious(route) - Replace the previous scene
immediatelyResetRouteStack(routeStack) - Reset every scene with an array of routes
popToRoute(route) - Pop to a particular scene, as specified by its route. All scenes after it will be unmounted
popToTop() - Pop to the first scene in the stack, unmounting every other scene

Edit on GitHubProps #

configureScene function #

Optional function that allows configuration about scene animations and gestures. Will be invoked with the route and should return a scene configuration object

(route) => Navigator.SceneConfigs.FloatFromRight

initialRoute object #

Specify a route to start on. A route is an object that the navigator will use to identify each scene to render. initialRoute must be a route in the initialRouteStack if both props are provided. The initialRoute will default to the last item in the initialRouteStack.

initialRouteStack [object] #

Provide a set of routes to initially mount. Required if no initialRoute is provided. Otherwise, it will default to an array containing only the initialRoute

navigationBar node #

Optionally provide a navigation bar that persists across scene transitions

navigator object #

Optionally provide the navigator object from a parent Navigator

onDidFocus function #

@deprecated Use navigationContext.addListener('didfocus', callback) instead.

Will be called with the new route of each scene after the transition is complete or after the initial mounting

onWillFocus function #

@deprecated Use navigationContext.addListener('willfocus', callback) instead.

Will emit the target route upon mounting and before each nav transition

renderScene function #

Required function which renders the scene for a given route. Will be invoked with the route and the navigator object

(route, navigator) =>
  <MySceneComponent title={route.title} />

sceneStyle View#style #

Styles to apply to the container of each scene

Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

Polyfills