The idea is the user should not be able to navigate back to any of the order screens if they use the hamburger menu to navigate to other screens while on any of the order screens.

The Flow:

Given the code…

const handleNavigation = (route: string) => {
    const routes = navigation.getState().routes;
    console.log('routes before:', routes);
    const orderStartIndex = routes.findIndex(route => route.name === navScreens.orderStart.route);
    console.log('orderStartIndex:', orderStartIndex);
    if (orderStartIndex > -1) {
      navigation.dispatch(StackActions.replace(navScreens.orderStart.route, { params: {} }));
      // navigation.getState().routes.splice(orderStartIndex, 1);
    }
    console.log('routes after:', navigation.getState().routes);
    navigation.replace(route);
  };

Expected results after clicking on the settings in the hamburger menu:

I’ve looked at several similar questions, but none give the answer to give these expected results. replace won’t remove the screen in the stack. And splice removes the screen, but also results in a key error crashing the app. pop will only remove the latest screen(s), which would is problematic since the current screen is the hamburger screen and would not finish routing to the selection made.