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

Time:09-25

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?

CodePudding user response:

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

  • Related