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.