How to always navigate to the initial route of the stack on back button press of any screen of the s-CodePudding

I have bottom navigator like below

 <DirectStack.Navigator screenOptions={appStackScreenOption}>
      <DirectStack.Screen name="CList" component={CList}
        options={(navigation) => ({
          headerRight: () => (
            <View style={{ flexDirection: 'row' }}>{AddListButton(navigation)}</View>
          ),
        })} />
      <DirectStack.Screen name="C" component={C} />
      <DirectStack.Screen
        name="AddList"
        component={AddList}
        
      />
    </DirectStack.Navigator >

default when the first load the screen I am at CList and on right button press I navigate to the AddList screen and from AddList screen I navigate to C screen till now everything is fine but when I press the back header button from the C screen I want to navigate to the initial screen that is CList.

currently, when I press the back header button from the C screen I navigated to the AddList screen which I don't want.

CodePudding user response：

You can achieve this by pop all screen the stack by calling navigation.popToTop()

Also refer this popToTop