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();
          }
        }}
      />
    }
  />

Props

configureScene function

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

(route, routeStack) => Navigator.SceneConfigs.FloatFromRight

Available options are:

  • Navigator.SceneConfigs.PushFromRight (default)
  • Navigator.SceneConfigs.FloatFromRight
  • Navigator.SceneConfigs.FloatFromLeft
  • Navigator.SceneConfigs.FloatFromBottom
  • Navigator.SceneConfigs.FloatFromBottomAndroid
  • Navigator.SceneConfigs.FadeAndroid
  • Navigator.SceneConfigs.HorizontalSwipeJump
  • Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
  • Navigator.SceneConfigs.VerticalUpSwipeJump
  • Navigator.SceneConfigs.VerticalDownSwipeJump

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 component as navigation bar that persists across scene transitions. The component will receive two props: navigator and navState. It will be rerendered when the routes change.

navigator object

Optionally provide the navigator object from a parent Navigator

onDidFocus function

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

onWillFocus function

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} navigator={navigator} />

sceneStyle View#style

Styles to apply to the container of each scene

Methods

immediatelyResetRouteStack(nextRouteStack: RouteStack)

Reset every scene with an array of routes.

jumpTo(route)

Transition to an existing scene without unmounting

jumpForward()

Jump forward to the next scene in the route stack.

jumpBack()

Jump backward without unmounting the current scene.

push(route)

Navigate forward to a new scene, squashing any scenes that you could jumpForward to.

pop()

Transition back and unmount the current scene.

replaceAtIndex(route, index, cb)

Replace a scene as specified by an index

index specifies the route in the stack that should be replaced. If it's negative, it counts from the back.

replace(route)

Replace the current scene with a new route.

replacePrevious(route)

Replace the previous scene.

popToTop()

Pop to the first scene in the stack, unmounting every other scene.

popToRoute(route)

Pop to a particular scene, as specified by its route. All scenes after it will be unmounted.

replacePreviousAndPop(route)

Replace the previous scene and pop to it.

resetTo(route)

Navigate to a new scene and reset route stack.

getCurrentRoutes()

Returns the current list of routes.

Navigator#immediatelyResetRouteStack()

immediatelyResetRouteStack(nextRouteStack: RouteStack) Reset every scene with an array of routes.

2016-06-23 04:24:38
Navigator#renderScene

renderScene function Required function which renders the scene for a given route. Will be invoked with

2016-06-23 04:24:40
Navigator#initialRoute

initialRoute object Specify a route to start on. A route is an object that the navigator will use to identify

2016-06-23 04:24:38