Skip to main content
Version: 3.x

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 on routes array in navigation state.
  • 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.
  • immediate*- boolean -*Currently has no effect, this is a placeholder for when stack navigator supports animated replace (it currently does not).

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 through this.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());