StackActions reference

StackActions is an object containing methods for generating actions specific to stack-based navigators. Its methods expand upon the actions available in CommonActions.

The following actions are supported:

replace

The replace action allows to replace a route in the navigation state. It takes the following arguments:

• name - string - A destination name of the route that has been registered somewhere.
• params - object - Params to merge into the destination route.

import { StackActions } from '@react-navigation/native';

navigation.dispatch(

StackActions.replace('Profile', {

user: 'jane',

})

);

If you want to replace a particular route, you can add a source property referring to the route key and target property referring to the navigation state key:

import { StackActions } from '@react-navigation/native';

navigation.dispatch({

...StackActions.replace('Profile', {

user: 'jane',

}),

source: route.key,

target: navigation.dangerouslyGetState().key,

});

If the source property is explicitly set to undefined, it'll replace the focused route.

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.

• name - string - Name of the route to push onto the stack.
• params - object - Screen params to merge into the destination route (found in the pushed screen through route.params).

import { StackActions } from '@react-navigation/native';

const pushAction = StackActions.push('Profile', { user: 'Wojtek' });

navigation.dispatch(pushAction);

pop

The pop action takes you back to a previous screen in the stack. It takes one optional argument (count), which allows you to specify how many screens to pop back by.

import { StackActions } from '@react-navigation/native';

const popAction = StackActions.pop(1);

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/native';

navigation.dispatch(StackActions.popToTop());