[v2] cannot use a swipeable element on iOS when using side drawer

[ujwal-setlur]

Issue Description

I am using a swipable list view (from native-base) in a tab view layout that has a left side drawer. I want to swipe left from the right, but it does not work on iOS. it works on android. on iOS, I can drag it only for about 10 pixels.

Steps to Reproduce / Code Snippets / Screenshots

[FILL THIS OUT - It will be extremely helpful]

---

Environment

• React Native Navigation version: 2.0.2.412
• React Native version: 0.56.0
• Platform(s) (iOS, Android, or both?): iOS
• Device info (Simulator/Device? OS version? Debug/Release?): both

[ujwal-setlur]

If I don't use a side drawer, it works. But I do need the side drawer :-)

[ujwal-setlur]

I can work around this by returning MMOpenDrawerGestureModeNone in

-(MMOpenDrawerGestureMode)possibleOpenGestureModesForGestureRecognizer

It essentially disables opening the side menu with a gesture...

I will play around with this a bit to see if I can find a happy middle ground.

[ujwal-setlur]

I see an interesting callback in MMDrawerController.h and MMDrawerController.m:

setGestureShouldRecognizeTouchBlock

from the documentation in the MMDrawerController.h:

/**
 Sets a callback to be called to determine if a UIGestureRecognizer should recieve the given UITouch.

 This block provides a way to allow a gesture to be recognized with custom logic. For example, you may have a certain part of your view that should accept a pan gesture recognizer to open the drawer, but not another a part. If you return YES, the gesture is recognized and the appropriate action is taken. This provides similar support to how Facebook allows you to pan on the background view of the main table view, but not the content itself. You can inspect the `openSide` property of the `drawerController` to determine the current state of the drawer, and apply the appropriate logic within your block.

 Note that either `openDrawerGestureModeMask` must contain `MMOpenDrawerGestureModeCustom`, or `closeDrawerGestureModeMask` must contain `MMCloseDrawerGestureModeCustom` for this block to be consulted.

 @param gestureShouldRecognizeTouchBlock A block object to be called to determine if the given `touch` should be recognized by the given gesture.
 */
-(void)setGestureShouldRecognizeTouchBlock:(BOOL(^)(MMDrawerController * drawerController, UIGestureRecognizer * gesture, UITouch * touch))gestureShouldRecognizeTouchBlock;

But I do not see any hooks into the JavaScript world. How do I use this from JavaScript?

[ujwal-setlur]

for now, this patch works for me:

--- a/node_modules/react-native-navigation/lib/ios/RNNSideMenu/MMDrawerController/MMDrawerController.m
+++ b/node_modules/react-native-navigation/lib/ios/RNNSideMenu/MMDrawerController/MMDrawerController.m
@@ -1478,9 +1478,6 @@ -(MMOpenDrawerGestureMode)possibleOpenGestureModesForGestureRecognizer:(UIGestur
         if([self isPointContainedWithinNavigationRect:point]){
             possibleOpenGestureModes |= MMOpenDrawerGestureModePanningNavigationBar;
         }
-        if([self isPointContainedWithinCenterViewContentRect:point]){
-            possibleOpenGestureModes |= MMOpenDrawerGestureModePanningCenterView;
-        }
         if([self isPointContainedWithinLeftBezelRect:point] &&
            self.leftDrawerViewController){
             possibleOpenGestureModes |= MMOpenDrawerGestureModeBezelPanningCenterView;

[mths0x5f]

And with that, can you still use the gesture to open the drawer?

[ujwal-setlur]

@mths0x5f, yes that still works.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. If you believe the issue is still relevant, please test on the latest version and report back. Thank you for your contributions.

[stale[bot]]

The issue has been closed for inactivity.

[ujwal-setlur]

This issue got absolutely no comments from the development team

[ujwal-setlur]

Anyway, I am now using react-native-gesture-handler and its swipeable component, and it seems to work with RNN. But very unfortunate that this issue got closed without actual resolution.

[mtzfactory]

Hi @ujwal-setlur ,

Do you have a minnimal demo? Can you share it?

Thanks.

[ujwal-setlur]

Hi @mtzfactory, I have moved away from react-native-navigation to react-navigation, so I don't have a ready demo. But from what I recall, I had a tabView with one of the tabs showing a list view, and the list item was to swipe-able with react-native-swipeable row. That did not work.

[vshkl]

Hello, @mtzfactory. This issue still persists, so I've made a demo. Here it is: https://github.com/vshkl/RNNDemo

Some clarification: at the first screen you should see two items: the first one is for enabling/disabling side menu, 'cuz the issue occurs only when side menu enabled, and the second one is the swipable item itself. You will be able to swipe the item only when the side menu is disabled. That's the issue.

react-native-swipeable-row is used in this demo, however, I've checked some other similar solutions and they lead to the same result.

Demo made with:

"react-native": "0.57.5",
"react-native-navigation": "2.1.3",

Note: there is a "Reset Root" button in the side menu. Don't pay attention to it. It's for another issue 🙂

[ItsNoHax]

@guyca Could you please re-open this issue

[yogevbd]

5f16bb3 let you set openGestureMode option:

sideMenu: {
  openGestureMode: 'bezel'
}