CODEWITHSUNDEEP
javascriptreact-nativereact-navigation
Benjamin Heinke
Benjamin Heinke

Reputation: 2982

How to handle the back button on iOS when using a React Navigation Drawer?

I am wondering what are common practices of the community, if possible with code, for the following situation:

I have an app that uses the React Navigation Drawer, consequently I always have the hamburger symbol (3 bars) to open the drawer on the top left-hand corner of the navigation bar. In Android everything is fine (thanks to the hardware back button), however, in iOS the hamburger symbol replaces the back button. What solutions are there to cope with this?

Possible ideas that I have are: -replacing the hamburger symbol with the back button in nested screens -leaving the hamburger symbol but disabling the swipe-from-left gesture for the drawer, such that the swipe-from-left gesture goes back -adding an additional back button next to the hamburger (might look awkward)

I appreciate good propositions and solutions.

Upvotes: 2

Views: 8052

Answers (2)

Charana Amarasekara
Charana Amarasekara

Reputation: 76

You can disable iOS slide gesture by adding this piece of code to your class

static navigationOptions = {
        gesturesEnabled: false,
};

Upvotes: 2

NewToCoding
NewToCoding

Reputation: 1

In a custom button component:

<Button title="Back" onClick={() => this.props.navigation.goBack()} />

And then whichever screen you put it on make sure you pass the navigation prop to you component, like so:

<MyCustomButton navigation={this.props.navigation} />

Upvotes: 0

Related Questions