Quick Start

Community Resources

Guides

Guides (iOS)

Guides (Android)

Polyfills

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

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.