Skip to main content
Version: 1.x

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

Within a stack, you can also use:

  • 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

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.

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 router
  • params - Object - Optional - Params to merge into the destination route
  • action - 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);

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 { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.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 { NavigationActions } from 'react-navigation';

const resetAction = NavigationActions.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 - required - Key of the route to replace.
  • 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 StackNavigator supports animated replace (it currently does not).

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 params
  • key - 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);