Previous screen is popped with current screen either, when user goes back by device or browser back button in drawerContent, react-navigation v5

Question

I'm using react-navigation-v5 and react-native-web in a monorepo architecture. My stack hierarchy is like this

-- drawer
  |-- splashScreen
  |-- authStack
  |-- appStack
        |-- categoryListScreen
        |-- searchScreen
        |-- profileScreen
        |-- aboutUsScreen

My first problem was no stack behaviour in web. I fixed it by passing a linking object to NavigationContainer that contains routes, and the heirachy is the exact same as above.

const linking = {
    prefixes: [urlPrefixWeb(), urlPrefixNativeDeepLink()],
    config: {
      splash: {
        path: 'splash',
      },
      auth: {
        path: 'auth',
        screens: {
          login: 'login',
          register: 'register',
        },
      },
      app: {
        path: 'app',
        screens: {
          categoryList: 'categoryList',
          search: 'search',
          profile: 'profile',
          aboutUs: 'aboutUs',
        },
      },
    },
  };

Now, when I navigate to a random screen inside appStack everything works correctly. (ex: from categoryListScreen navigating to searchScreen or profileScreen and then back to the categoryListScreen step by step normally as expected); But when I try to navigate to appStack's screens from drawerContent component and going back to the origin screen by browserBackPress, the previous screen is poped either. For example

categoryScreen -> searchScreen -> profileScreen (click from drawerContent component). Then backPress expected bahaviour is going to searchScreen but searchScreen is being popped either and goes to categoryScreen.

In breaf, props.navigation.navigate function that comes from drawerContent component doesn't work correctly and does some kind of replacement always.

So does any one know a workaround or related issue to mention?

Answer 1

I don't think your stack order is correct. You should insert the routes into the drawer directly.

For example:

  |-- splashScreen
  |-- authStack
  |-- appStack
    |-- drawer
        |-- categoryListScreen
        |-- searchScreen
        |-- profileScreen
        |-- aboutUsScreen