How to disable Swiping drawer to dismiss

[mamin75dev]

Hi,
I am using react-native-navigation and react-native-navigatioin-drawer-extension.

"react-native": "^0.62.2",
"react-native-navigation": "^7.0.0",
"react-native-navigation-drawer-extension": "^3.0.0",

I want to disable swiping drawer and I try to add swipeToDismiss: false to passProps and options objects. But I didn't get the result that I want. I want that because the drawer make lag and stop in screen when I swiping to dismiss. Please help me to solve this problem.

This is my code to show drawer:

RNNDrawer.showDrawer({
      component: {
        name: Screens.Menu,
        passProps: {
          animationOpenTime: 300,
          animationCloseTime: 300,
          direction: 'right',
          dismissWhenTouchOutside: true,
          fadeOpacity: 0.6,
          swipeToDismiss: false,
          parentComponentId: componentId ? componentId : Screens.Main,
        },
        options: {
          statusBar: statusBar,
        },
      },
      options: {
        swipeToDismiss: false,
      },
    });

[lukebrandonfarrell]

Hey @mamin76dev,

Please do the following:

1. Upgrade to latest version of react-native-navigation-drawer-extension (4.1.0) and see if it solves your problem
2. If it does not solve your problem, include a video of the problem you are having

Thanks

[mamin75dev]

Hey @mamin76dev,

Please do the following:

1. Upgrade to latest version of react-native-navigation-drawer-extension (4.1.0) and see if it solves your problem

2. If it does not solve your problem, include a video of the problem you are having

Thanks

I upgrade the react-nativer-drawer-extension to latest version and the problem has not been resolved yet.
Is there a way I can disable this feature (swiping)? If yes, I want to disable it!

WhatsApp.Video.2021-09-06.at.12.22.21.PM.1.mp4

[CursedWizard]

@mamin75dev, on the video you still have some older version, because the drawer doesn't jump like that on the latest one. Are you sure you upgraded it?

[mamin75dev]

@mamin75dev, on the video you still have some older version, because the drawer doesn't jump like that on the latest one. Are you sure you upgraded it?

Yes, I upgrade it.
Finally, I found the issue! I wrap a list in the menu!!! and this list causing this issue!! If I delete this list everything is ok. But I want this. (both of the flatlist and scrollview not sorking)
Is there any solution to fix this?

[CursedWizard]

@mamin75dev, yeah, there's a bug with ScrollView and other views that are based on it. The problem is that ScrollView claims the touch responsiveness from the parent responder in the drawer, so touch events in the drawer stop being called and thus properly handled. That's a reason why the drawer gets stuck on dragging.
I couldn't find a solid solution to this problem yet. But I guess creating a wrapper around ScrollView, that would toggle scrollEnabled property on / off is the way. I tried this approach though and it didn't seem responsive enough to me.

[lukebrandonfarrell]

@CursedWizard Do you know if with current implementation we can disable swipe to close? @mamin75dev are you using SideMenuView?

[mamin75dev]

@CursedWizard Do you know if with current implementation we can disable swipe to close? @mamin75dev are you using SideMenuView?

Yes, I am using SideMenuView. And also test a simple view.
But I didn't find any solution in here and even in the stackoverflow.
And finally I forced to edit a RNNDrawer.js file in the package and comment all swipe listeners ... :)

[lukebrandonfarrell]

Closed by #63. Version 4.2.0

[CursedWizard]

Just wanted to clarify about my commit. There are two props added: disableDragging and disableSwiping. In order to avoid the bug @mamin75dev experienced, setting disableDragging to true should be enough. It doesn't effect swiping gesture, so it still should close the drawer if swiped from the edge. But you should add enough padding to the wrapper view though for this to work. I tried it with SideMenuView too and it worked good for me, but I still would recommend setting some padding.

If you want to turn off any gesture interaction whatsoever, you also can set disableSwiping to true. But don't use this prop without disableDragging set to true, because it wouldn't make sense and would work weirdly.

@mamin75dev, could you please upgrade to the latest version and verify, that it worked for you?

Also, @lukebrandonfarrell, I wouldn't be so fast about closing this one, since my commit doesn't fix the issue but only adds an option to avoid it.

[mamin75dev]

Just wanted to clarify about my commit. There are two props added: disableDragging and disableSwiping. In order to avoid the bug @mamin75dev experienced, setting disableDragging to true should be enough. It doesn't effect swiping gesture, so it still should close the drawer if swiped from the edge. But you should add enough padding to the wrapper view though for this to work. I tried it with SideMenuView too and it worked good for me, but I still would recommend setting some padding.

If you want to turn off any gesture interaction whatsoever, you also can set disableSwiping to true. But don't use this prop without disableDragging set to true, because it wouldn't make sense and would work weirdly.

@mamin75dev, could you please upgrade to the latest version and verify, that it worked for you?

Also, @lukebrandonfarrell, I wouldn't be so fast about closing this one, since my commit doesn't fix the issue but only adds an option to avoid it.

Thanks for your commit! It's working!

[CursedWizard]

@mamin75dev, good. By the way, check out my bottom sheet library I also built for RNN. Could be useful.