Home > Mobile >  How do you disable swipe to open drawer navigator, but keep swipe to navigate back?
How do you disable swipe to open drawer navigator, but keep swipe to navigate back?

Time:12-07

I'm in this situation where I have a screen in a drawer navigator that I want to be able to swipe right to navigate back to the previous screen. But since it's in a drawer navigator, my right swipe opens the drawer and I am unable to navigate back without pressing the back arrow. Is there a way to disable to drawer swipe for that screen, but keep the swipe to navigate. Any help is appreciated. TYIA

CodePudding user response:

You need disable swipe to open/close drawer with swipeEnabled prop in screenOptions, like:

<Drawer.Navigator
  screenOptions={{
    // ... defined something
    swipeEnabled: false,
  }}>
  // ... your drawer
</Drawer.Navigator>

And you need define a drawer item in 1 stack be like my example: https://snack.expo.dev/@pqv2210/q-74710170

CodePudding user response:

// Solution 1 
**React Navigation 6**

In screen options: Set edge width to 0.

<Drawer.Navigator
        screenOptions={{
            swipeEdgeWidth: 0,
        }}
    >
        {/* screens */}
</Drawer.Navigator>


**React Navigation 5**

In your createDrawerNavigator config:

const drawerNavigator = createDrawerNavigator({
  Home: {
    screen: Home
  }
}, 
{
  edgeWidth: 0
})

//Solution 2 : This may also work.

You can use the drawerLockMode in the screen navigation options using the option locked-open

locked-open: the drawer will stay opened and not respond to gestures. The drawer may still be opened and closed programmatically

Other options can be viewed here

static navigationOptions = {
     drawerLockMode: 'locked-open',
}
  • Related