Disbale panGesture partially

[waheedakhtar694]

I have some nested components inside the modalize and panGesture is making problem while working interacting with these components, These components work fine if I disable the gesture with this panGestureEnabled={false}.

Now my question is, Is there a way for disabling the gesture for some particular area or some specific component? Like in the react-navigation v5 the modal has gesture enabled for some upper portion of the screen.

[jeremybarbet]

Hey,

First if the interactions don’t work, have you try to set this props to false?

Second, no it’s not possible to define certain area of the scrollview enable or disable and I don’t think it can be done.

Last thing I see, it could be possible to enable the header/footer/floating components gestures while the scrollview gestures are disabled, but it’s the only workaround that could be done I’m afraid.

[waheedakhtar694]

@jeremybarbet As you said it's possible to enable the header/footer/floating components gestures while the scrollview gestures are disabled, Is there any way we can disable the gesture of these components ?

[jeremybarbet]

For now, it's not possible. You are only able to enable/disable all gestures altogether.

Even though, it would be very easy to add a boolean to enable/disable only the header/footer/floating component and not the scollview and vice versa.

Feel free to open a PR if you have a fix for it :)

[seralexeev]

Hey, we had a similar problem. We use react-native-modalize for all modals in our application, and would not want to pull something else because we like it. But now we have a need to display an always open modal, on the main screen halfway across the screen. Inside the modalize component with refresh control. We want to disable panGesture in this state so that the user can make a pool then refresh and the modal does not try to close in this state, and it can only be closed by the header or handler. For this purpose, we listen to the event onPositionChange, depending on this we set panGestureEnabled. But this behaviour also disables panGesture for the header and the handler. In general, I don't understand the case when you should disable panGesture for the handler.

Here is example:

And here is workaround for patch-package:

@@ -0,0 +1,22 @@
diff --git a/node_modules/react-native-modalize/lib/index.js b/node_modules/react-native-modalize/lib/index.js
index 0e84b56..a356f8b 100644
--- a/node_modules/react-native-modalize/lib/index.js
+++ b/node_modules/react-native-modalize/lib/index.js
@@ -470,7 +470,7 @@ onOpen, onOpened, onClose, onClosed, onBackButtonPress, onPositionChange, onOver
             handleStyles.push(styles_1.default.handleBottom);
             shapeStyles.push(styles_1.default.handle__shapeBottom, handleStyle);
         }
-        return (React.createElement(react_native_gesture_handler_1.PanGestureHandler, { enabled: panGestureEnabled, simultaneousHandlers: tapGestureModalizeRef, shouldCancelWhenOutside: false, onGestureEvent: handleGestureEvent, onHandlerStateChange: handleComponent },
+        return (React.createElement(react_native_gesture_handler_1.PanGestureHandler, { enabled: true, simultaneousHandlers: tapGestureModalizeRef, shouldCancelWhenOutside: false, onGestureEvent: handleGestureEvent, onHandlerStateChange: handleComponent },
             React.createElement(react_native_1.Animated.View, { style: handleStyles },
                 React.createElement(react_native_1.View, { style: shapeStyles }))));
     };
@@ -492,7 +492,7 @@ onOpen, onOpened, onClose, onClosed, onBackButtonPress, onPositionChange, onOver
         const obj = react_native_1.StyleSheet.flatten((_a = tag === null || tag === void 0 ? void 0 : tag.props) === null || _a === void 0 ? void 0 : _a.style);
         const absolute = (obj === null || obj === void 0 ? void 0 : obj.position) === 'absolute';
         const zIndex = obj === null || obj === void 0 ? void 0 : obj.zIndex;
-        return (React.createElement(react_native_gesture_handler_1.PanGestureHandler, { enabled: panGestureEnabled, shouldCancelWhenOutside: false, onGestureEvent: handleGestureEvent, onHandlerStateChange: handleComponent },
+        return (React.createElement(react_native_gesture_handler_1.PanGestureHandler, { enabled: true, shouldCancelWhenOutside: false, onGestureEvent: handleGestureEvent, onHandlerStateChange: handleComponent },
             React.createElement(react_native_1.Animated.View, { style: { zIndex }, onLayout: (e) => handleComponentLayout(e, name, absolute) }, tag)));
     };
     const renderContent = () => {

A little later, I'll try to do PR for disabling panGesture partially.

[waheed25]

@jeremybarbet here is the PR #260

[jeremybarbet]

Doing a bit of tidying up in the issues, closing this. Feel free to reopen 🤘