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

Question

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?

score 6 · Accepted Answer · answered Sep 24 '21 at 16:06

6

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

answered Sep 24 '21 at 16:06

satya164

9,464
2
31
42

Thanks satya. It worked! I didn't really pay much attention to the documentation. – Onoshe Sep 24 '21 at 18:20
After stucking around the issue for 3 to 4 days, finally this simple thing worked for me. – STBox Feb 08 '22 at 06:15
1

@Aliaksei definitely documented here https://reactnavigation.org/docs/drawer-navigator#backbehavior – satya164 Nov 10 '22 at 03:24

score 0 · Answer 2 · answered Nov 16 '22 at 20:05

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.

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

2 Answers2

Linked