React Navigation Add-ons
NOTE: This is an experiment. If you want to use this in your app, please copy the files instead of using the repo directly. The API can change anytime or the repo might be deleted.
Useful addons for React Navigation.
Usage
You'd need to wrap the navigators with our enhance
function. For example, to wrap StackNavigator
:
;; = Home: screen: HomeScreen Settings: screen: SettingsScreen ;
API
navigation.setOptions
Navigation options are usually tightly coupled to your component. This method allows you to configure and update the navigation options from your component rather than using the static property and params, which means you can use your component's props and state, as well as any instance methods.
Example:
{ thispropsnavigation; } { thispropsnavigation; } { ... }; { ... }
Calling setOptions
with an plain object does a merge with previous options. You don't have to pass the full configuration object again.
navigation.addListener
Sometimes you want to do something when the screen comes into focus, for example fetch some data, and cancel the operation when screen goes out of focus. This method allows you to listen to events like focus
and blur
.
Example:
{ thispropsnavigation; thispropsnavigation; } { thispropsnavigation; thispropsnavigation; } { ... }; { ... }; { ... }
In addition to focus
and blur
, this also allows you to listen to a change
event which fires whenever the navigation state changes. The listener receives the state as the argument.
Example:
{ thispropsnavigation; } { thispropsnavigation; } { ... }; { ... }
navigation.getParent
Many times you need a reference to the parent navigation prop if you want to dispatch an action on the parent navigator. This method returns a reference to the navigation prop of the parent navigator.
Example:
{ const parent = thispropsnavigation; if parent parent; }; { ... }
If there's no parent navigator, this method will return undefined
.