StackActions reference
StackActions
is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in NavigationActions
.
The following actions are supported:
- Reset - Replace current state with a new state
- Replace - Replace a route at a given key with another route
- Push - Add a route on the top of the stack, and navigate forward to it
- Pop - Navigate back to previous routes
- PopToTop - Navigate to the top route of the stack, dismissing all other routes
reset
The reset
action wipes the whole navigation state and replaces it with the result of several actions.
index
- number - required - Index of the active route onroutes
array in navigationstate
.actions
- array - required - Array of Navigation Actions that will replace the navigation state.key
- string or null - optional - If set, the navigator with the given key will reset. If null, the root navigator will reset.
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
How to use the index
parameter
The index
param is used to specify the current active route.
eg: given a basic stack navigation with two routes Profile
and Settings
.
To reset the state to a point where the active screen was Settings
but have it stacked on top of a Profile
screen, you would do the following:
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 1,
actions: [
NavigationActions.navigate({ routeName: 'Profile' }),
NavigationActions.navigate({ routeName: 'Settings' }),
],
});
this.props.navigation.dispatch(resetAction);
replace
The replace
action replaces the route at the given key with another route.
key
- string - Key of the route to replace. If this is not defined, the most recent route will be replaced.newKey
- string - Key to use for the replacement route. Generated automatically if not provided.routeName
- string -routeName
to use for replacement route.params
- object - Parameters to pass in to the replacement route.action
- object - Optional sub-action.
push
The push
action adds a route on top of the stack and navigates forward to it. This differs from navigate
in that navigate
will pop back to earlier in the stack if a route of the given name is already present there. push
will always add on top, so a route can be present multiple times.
routeName
- string -routeName
to push onto the stack.params
- object - Screen params to merge into the destination route (found in the pushed screen throughthis.props.navigation.state.params
).action
- (advanced) The sub-action to run in the child router, if the screen is a navigator.
import { StackActions } from 'react-navigation';
const pushAction = StackActions.push({
routeName: 'Profile',
params: {
myUserId: 9,
},
});
this.props.navigation.dispatch(pushAction);
pop
The pop
action takes you back to a previous screen in the stack. The n
param allows you to specify how many screens to pop back by.
n
- number - The number of screens to pop back by.
import { StackActions } from 'react-navigation';
const popAction = StackActions.pop({
n: 1,
});
this.props.navigation.dispatch(popAction);
popToTop
The popToTop
action takes you back to the first screen in the stack, dismissing all the others. It's functionally identical to StackActions.pop({n: currentIndex})
.
import { StackActions } from 'react-navigation';
this.props.navigation.dispatch(StackActions.popToTop());