Quick Start

Guides

Guides (iOS)

Guides (Android)

components

apis

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

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

Next →