How to have the back button in a drawer navigator?

Question

I have a DrawerNavigator as the basic block of my app. The reason is that it should be accessible from all screens. As such, it's also the target for all deep links and will only display some of the items in the actual drawer.

The main page consists of a bottom navigator of stacks, and more entries are also stacks themselves.

The problem is that navigating in the drawer doesn't show any back button as navigating in the stacks would. And it would be nice to have these, just like the back gesture on Android works.

Is this something that exists and if yes, how should it be tackled?

satya164 · Answer 1 · 2019-10-18T15:43:57.467

1

You'll need your own header component in each screen which has a back button. You can use a custom one or one from a component library such as react native paper.

function Home({ navigation }) {
  return (
    <React.Fragment>
      <MyCustomHeader title="Home" onBackPress={navigation.goBack} />
      {{
        /* screen content */
      }}
    </React.Fragment>
  );
}

Make sure you pass backBehavior: 'history' to createDrawerNavigator.

edited Oct 18 '19 at 15:43

answered Oct 16 '19 at 23:34

satya164

9,464
2
31
42

No simpler way? Because this sounds heavy, especially it also needs to check if there is something in the navigation stack!! (i.e. if it's the first screen or not) – Matthieu Brucher Oct 17 '19 at 19:19
And actually it doesn't work. `goBack` doesn't work in a `DrawerNavigation`?? – Matthieu Brucher Oct 17 '19 at 20:14
`goBack` works in drawer. Make sure you pass `backBehavior: 'history'` to `createDrawerNavigator` – satya164 Oct 17 '19 at 20:22
Oh, that's an important point, thanks a lot. Will check it this morning. Probably worth mentioning this in your answer ;) (`history` is not mentioned in their doc?) – Matthieu Brucher Oct 18 '19 at 14:19
Does this mean that setting this attribute would also create the button? – Matthieu Brucher Oct 18 '19 at 14:28
I don't have it working at this stage. `goBack` even with `backBehavior:history` is not working at this stage :( – Matthieu Brucher Oct 18 '19 at 18:57

How to have the back button in a drawer navigator?

1 Answers1