A navigator is any React component that has a router on it, to define the navigation behavior. Each navigator is given a
navigation prop, which allows the parent to control the navigation state.
It is possible to take an existing Navigator and extend its behavior, using the following approach:
Now it is possible to render additional things, observe the navigation prop, and override behavior of the router:
Navigator Navigation Prop
The navigation prop passed down to a navigator only includes
addListener. This is the current state of the navigator, and an event channel to send action requests.
All navigators are controlled components: they always display what is coming in through
props.navigation.state, and their only way to change the state is to send actions into
Navigators can specify custom behavior to parent navigators by customizing their router. For example, a navigator is able to specify when actions should be blocked by returning null from
router.getStateForAction. Or a navigator can specify custom URI handling by overriding
router.getActionForPathAndParams to output a relevant navigation action, and handling that action in
The navigation state that is passed into a navigator's
props.navigation.state has the following structure:
A navigator can dispatch navigation actions, such as 'Go to a URI', 'Go back'.
The dispatcher will return
true if the action was successfully handled, otherwise
API for building custom navigators
To help developers implement custom navigators, the following utilities are provided with React Navigation:
createNavigatorAPI has changed in version 2. The old doc for v1 can be accessed here: https://v1.reactnavigation.org/docs/custom-navigators.html
AppNavigator can be rendered as such:
Then the view will be rendered in the following way:
navigation prop is the same navigation prop that was passed into the navigator.
screenProps are simply passed through, as defined above.
Most information about child screens comes through the
descriptors prop. The descriptors is an object map of route keys to scene descriptors. There is one descriptor for each child route.
A scene descriptor has the following properties:
getComponent, a function that returns the component for the screen
options, the flattened navigationOptions for the route
navigation, the child navigation prop, including actions and the route
state, the navigation state for the child screen (a shortcut for
key, the key of the route (a shortcut for