NavigationActions reference
All NavigationActions
return an object that can be sent to the router using navigation.dispatch()
method.
Note that if you want to dispatch react-navigation actions you should use the action creators provided in this library.
The following actions are supported:
- Navigate - Navigate to another route
- Back - Go back to previous state
- Set Params - Set Params for given route
- Init - Used to initialize first state if state is undefined
For actions specific to a StackNavigator, see StackActions.
The action creator functions define toString()
to return the action type, which enables easy usage with third-party Redux libraries, including redux-actions and redux-saga.
navigate
The navigate
action will update the current state with the result of a navigate
action.
routeName
- String - Required - A destination routeName that has been registered somewhere in the app's routerparams
- Object - Optional - Params to merge into the destination routeaction
- Object - Optional - (advanced) The sub-action to run in the child router, if the screen is a navigator. Any one of the actions described in this doc can be set as a sub-action.key
- String - Optional - The identifier for the route to navigate to. Navigate back to this route if it already exists
import { NavigationActions } from 'react-navigation';
const navigateAction = NavigationActions.navigate({
routeName: 'Profile',
params: {},
action: NavigationActions.navigate({ routeName: 'SubProfileRoute' }),
});
this.props.navigation.dispatch(navigateAction);
back
Go back to previous screen and close current screen. back
action creator takes in one optional parameter:
key
- string or null - optional - If set, navigation will go back from the given key. If null, navigation will go back anywhere.
import { NavigationActions } from 'react-navigation';
const backAction = NavigationActions.back({
key: 'Profile',
});
this.props.navigation.dispatch(backAction);
setParams
When dispatching setParams
, the router will produce a new state that has changed the params of a particular route, as identified by the key
params
- object - required - New params to be merged into existing route paramskey
- string - required - Route key that should get the new params
import { NavigationActions } from 'react-navigation';
const setParamsAction = NavigationActions.setParams({
params: { title: 'Hello' },
key: 'screen-123',
});
this.props.navigation.dispatch(setParamsAction);