2

I'm using a stack navigator nested in a drawer navigator for a react native app using react navigation 6. I'm only showing the header for the stack navigator. I want to put a hamburger menu button on the far left of the header, BUT I also want the default stack navigation back button to be present.

I found the setting headerBackVisible in the documentation, but haven't been able to find any examples of anyone using it, so I'm not sure if I'm using it properly. I'm trying to pass it as headerBackVisible: true in my screen options. No matter what I do, if I put anything else in headerLeft, I cannot get the header back button to show.

Anyone have any suggestions or examples on how to put something to the left of the header back button?

jthemenace
  • 23
  • 1
  • 3

1 Answers1

6

Yes, headerBackVisible is not working with headerLeft. As a workaround, you can import default back button (HeaderBackButton) from @react-navigation/stack and return it along with your hamburger component. Something like this:

import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack';

  <Stack.Navigator
    screenOptions={({ navigation, route }) => ({
      headerLeft: (props) => {
        return (
          <>
            <Text>Menu</Text> // Replace with your hamburger component
            {props.canGoBack && <HeaderBackButton {...props} />}  // THIS IS WHAT YOU NEED
          </>
        );
      },
    })}> ....
    <Stack.Screen ... />
    <Stack.Screen ... />
  </Stack.Navigator>

Snack link: https://snack.expo.dev/@rabiarashid/react-navigation---stack-navigator-example

Update (for react-navigation v6):

In v6, HeaderBackButton is moved to elements library i.e.

import { HeaderBackButton } from '@react-navigation/elements';

Ref: https://reactnavigation.org/docs/upgrading-from-5.x/#some-exports-are-now-moved-to-the-element-library

artsnr
  • 952
  • 1
  • 10
  • 27
  • 1
    Thank you for this!!! Unfortunately, I'm getting this error and I cannot get past it. I tried clearing all of my cache and re-installing all of my dependencies, still won't get past it. Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. Check the render method of `Header`. – jthemenace Aug 26 '21 at 15:52
  • I have the following at the top of my code import { createStackNavigator, HeaderBackButton } from '@react-navigation/stack'; – jthemenace Aug 26 '21 at 15:54
  • Kindly share your code snippet OR better to share a snack link – artsnr Aug 26 '21 at 16:48
  • It seems like you have issue with component export or return statement. Check out this https://stackoverflow.com/q/42813342/9399066 – artsnr Aug 26 '21 at 16:52
  • 1
    I forgot to mention I'm using Expo, not sure if that matters or not. I tried creating a new expo project and copy/pasted your code in from snack and it's giving me the exact same error. I'm using react navigation 6, maybe it's a bug / issue with that? I see from your snack that you are using version 5. – jthemenace Aug 26 '21 at 18:20
  • 1
    Oh yes I was using v5. In v6, HeaderBackButton is moved to elements library i.e. import { HeaderBackButton } from '@react-navigation/elements'; I have also updated the snack – artsnr Aug 26 '21 at 19:53
  • Got it working now with your help. Thank you. – jthemenace Aug 27 '21 at 14:17
  • Glad to hear. Kindly accept the answer it it worked out – artsnr Aug 27 '21 at 14:24