The navigation prop passed down to a navigator only includes
dispatch. 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:
All this does behind the scenes is:
Takes in a bare navigator navigation prop with
dispatch, and augments it with all the various functions in a screen navigation prop, such as
navigation.goBack(). These functions are simply helpers to create the actions and send them into
If you want your navigator to be usable as a top-level component, (without a navigation prop being passed in), you can use
createNavigationContainer. This utility will make your navigator act like a top-level navigator when the navigation prop is missing. It will manage the app state, and integrate with app-level nav features, like handling incoming and outgoing links, and Android back button behavior.