CODEWITHSUNDEEP
react-nativenavigation-drawerswipe
midnighttfoxx
midnighttfoxx

Reputation: 41

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

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

Upvotes: 0

Views: 1383

Answers (2)

Akanksha Ingle
Akanksha Ingle

Reputation: 41

// 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',
}

Upvotes: 0

Vu Phung
Vu Phung

Reputation: 705

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

Upvotes: 2

Related Questions