How to achieve 'goBack' in React-Navigation/Drawer 6
D

2

6

I'm having problem in implementing goBack function in React-navigation/drawer 6 ("@react-navigation/drawer": "^6.1.4", precisely).

I was able to perfectly achieve it in react-navigation/drawer 5 with the following codes:

<Drawer.Navigator>
    <Drawer.Screen 
        ....
        options={{
          header: ({ scene }) => {
            const { options } = scene.descriptor;
            const title = options.headerTitle;
              return (
                <MyHeader 
                  title={title}
                  iconName={"menu"} 
                  goback={() => scene.descriptor.navigation.goBack()}
                />
              );
          },
        }}
      />
</Drawer.Navigator>

The same revised codes for react-navigation/drawer 6 (as shown below) will take me back to the initial screen (and not on previous screen). It will also give a warning and error message.

<Drawer.Navigator>
    <Drawer.Screen 
        ....
        options={{
          header: ({ navigation, route, options }) => {
              const title = getHeaderTitle(options, route.name);
              return (
                <MyHeader 
                  title={title}
                  iconName={"menu"} 
                  goback={() => navigation.goBack()}
                />
              );
          },
        }}
      />
</Drawer.Navigator>

Please, how can I achieve this 'goBack' in react-navigation/drawer 6?

Din answered 24/9, 2021 at 14:10 Comment(0)
B
11

You need to specify backBehavior

<Drawer.Navigator backBehavior="history">

Please read the upgrade guide when upgrading which documents these changes: https://reactnavigation.org/docs/upgrading-from-5.x/#the-default-value-for-backbehavior-is-now-firstroute-for-tabs-and-drawer

Bibliography answered 24/9, 2021 at 16:6 Comment(3)
Thanks satya. It worked! I didn't really pay much attention to the documentation.Din
After stucking around the issue for 3 to 4 days, finally this simple thing worked for me.Spirogyra
@Aliaksei definitely documented here reactnavigation.org/docs/drawer-navigator#backbehaviorBibliography
E
0

I've faced the same issue and tried to fix it in the way @satya164 provided but then I realised that I just had wrong navigation structure.

If you want to go back from screen B to screen A, they should probably be nested in one Stack rather than in Drawer.

In my case at least it was a better solution.

Emplace answered 16/11, 2022 at 20:5 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.