React native clear Stack Navigator stack

Question

I have few screens which I navigate through one by one. Screen1->screen2-screen3->screen4-Home

What I want is when I go to home then the previous history of navigation should be cleared and back pressing back button should not go to last navigated screen which is screen 4. Currently When I press back button on home screen it takes me back to the last route in the stack which is screen4. I have used below code. It is giving me error no route defined or key Home. Which I have already defined in Screens class. Any help would be appreciated.

const resetAction = NavigationActions.reset({
  index: 0,                       
  actions: [NavigationActions.navigate({ routeName: 'Home' })],
});

onPress={() =>  this.props.navigation.dispatch(resetAction)}

Working

Refer to the accepted answer here for updated information as of today . #50443951 – Hexavalent

Answer 1

in V5, you can use

this.props.navigation.reset({
              index: 0,
              routes: [{name: 'Home'}],
            });

Using hooks

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

const navigation = useNavigation();

navigation.reset({
        index: 0,
        routes: [{name: 'Events'}],
      });

Mb

Answer 2

As it states in the react-navigation docs for reset action, index should be the current active route's index. The error might be related to that.

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)

Ligamentous

How to get the current index? – Working

@ParasWatts You can use Screen Tracking functionality to get current state and the index of the route. – Ligamentous

@Ligamentous link broken, is reactnavigation.org/docs/en/screen-tracking.html same ? – Kindly

Answer 3

import {NavigationActions} from 'react-navigation';                
const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({ routeName: 'HomeScreen'})
    ] })
this.props.navigation.dispatch(resetAction);

you can use this, this works for me..

Determinable

Answer 4

If you use react-navigation@<=4 you can use a Switch Navigator.

You create a Switch Navigator with createSwitchNavigator. Such navigators do not stack up your navigation. Add your auth screen/navigator in a Switch Navigator with the home screen/stack.

With that, when you navigate from home to log in, the stacks are not kept.

For more on it:
https://reactnavigation.org/docs/4.x/auth-flow/

Mariandi

It was not available earlier – Working

Not available in Version 5 – Equitant

Answer 5

With @react-navigation 5.x you can use CommonActions to reset/clear the stack. I'll leave an example here.

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

const handleSigninNavigation = () => {
 navigation.dispatch(
  CommonActions.reset({
    index: 0,
    routes: [{ name: "your-new-route" }]
  }));
}

Also you can create your own stack while resetting it. Just pass the names of the routes to routes array and give an index to navigate first.

CommonActions.reset({
  index: 1,
  routes: [{ name: "home" }, { name: "signin" }]
}));

Above code will reset the current stack with given routes and will navigate to the signin since we set the index to 1.

Loon

Answer 6

With typed routes and their parameters

type StateRoute<Route extends keyof MyNavigatorParamList> = {
  name: Route;
  params: MyNavigatorParamList[Route];
};

const toNavigationStateRoutes = <Route extends keyof MyNavigatorParamList>(
  ...routes: StateRoute<Route>[]
) => routes;

navigation.dispatch(
  CommonActions.reset({
    index: 1,
    routes: toNavigationStateRoutes(
      {
        name: 'Home',
        params: undefined,
      },
      {
        name: 'Some screen',
        params: { id: "..." },
      },
    ),
  }),
);

Pictish

Answer 7

//import

import { NavigationActions, StackActions } from 'react-navigation';

//reset current navigation stack and create new navigation stack

const loginScreenAction = StackActions.reset({
    index: 0,                       
    actions: [NavigationActions.navigate({ routeName: 'LoginScreen' })],
});

//open new component with new navigation stack

this.props.navigation.dispatch(loginScreenAction)

Stereotropism