How to reset nested navigators (react-navigation v5)

Question

Having two sets of stack navigators;

const SetOneScreens = () => (
  <Stack.Navigator initialRouteName="AScreen">
    <Stack.Screen name="AScreen" component={AScreen} />
    <Stack.Screen name="BScreen" component={BScreen} />
  </Stack.Navigator>
);
const SetTwoScreens = () => (
  <Stack.Navigator initialRouteName="CScreen">
    <Stack.Screen name="CScreen" component={CScreen} />
    <Stack.Screen name="DScreen" component={DScreen} />
  </Stack.Navigator>
);

Which are nested in a Drawer navigator

    <NavigationContainer>
      <Drawer.Navigator initialRouteName="SetOneScreens">
        <Drawer.Screen name="SetOneScreens" component={SetOneScreens} />
        <Drawer.Screen name="SetTwoScreens" component={SetTwoScreens} options={{swipeEnabled: false}} />
      </Drawer.Navigator>
    </NavigationContainer>

I want to navigate From BScreen to DScreen and reset the stack (in order to not letting hardware back button in android get back to BScreen)

As in the nesting situation, we should first define the navigator name; how should I define the screen in reset action.

// For navigation 
props.navigation.navigate('setTwoScreens',{screen:'DScreen'})

// For reset I can only navigate to initial screen 
props.navigation.reset({index:0,routes:[{name:'setTwoScreens'}]})

How should I handle the reset with navigation or CommonActions

score 52 · Accepted Answer · edited Oct 14 '22 at 18:14

As written in the documentation of react-navigation-v5, you need to dispatch CommonAction with reset-action to clear back-stack of your application, so that application doesn't go back to previous screen when user press hardware back-button of device, check below example,

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

props.navigation.dispatch({
  CommonActions.reset({
    index: 0,
    routes: [{ name: "AnotherStackNavigator" }]
  })
});

Or if you want to reset to specific screen in that StackNavigator you can do like this:

props.navigation.dispatch({
  CommonActions.reset({
    index: 0,
    routes: [
      {
        name: "AnotherStackNavigator",
        state: {
          routes: [
            {
              name: "AnotherStackNavigatorScreen",
              params: {         
                  ...
              }
            }
          ]
        }
      }
    ]
  })
});

with this solution I am facing one problem. I am able to navigate to different stack at specified depth but the back button won't go to the root of the new stack. how to fix this? — Waheed Akhter, Aug 20 '21 at 15:52
@WaheedAkhter this is answered here: https://stackoverflow.com/a/71835841/4490052 — joejknowles, Dec 11 '22 at 06:47

score 7 · Answer 2 · answered Apr 12 '22 at 01:01

I tried the solution from Aditya, but had issues with the back button not going back to the root of the new stack.

This seemed to fix that issue for me though:

props.navigation.dispatch({
  CommonActions.reset({
    index: 0,
    routes: [
      {
        name: "AnotherStackNavigator",
        state: {
          routes: [
            {
              name: "AnotherStackNavigatorRootScreen"
            },
            {
              name: "AnotherStackNavigatorScreen",
              params: {         
                  ...
              }
            }
          ]
        }
      }
    ]
  })
});

How to reset nested navigators (react-navigation v5)

2 Answers2

Linked