fix problem with no handling gestures

software-mansion-labs · Nov 14, 2024 · 3ad4eab · 3ad4eab
1 parent ed4e2e9
commit 3ad4eab
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/src/components/Modal/ReactNativeModal/Modal.tsx b/src/components/Modal/ReactNativeModal/Modal.tsx
@@ -47,10 +47,15 @@ function ReactNativeModal(incomingProps: ModalProps) {
     const [deviceHeight, setDeviceHeight] = useState(Dimensions.get('window').height);
     const [pan, setPan] = useState<Animated.ValueXY>(new Animated.ValueXY());
     const [panResponder, setPanResponder] = useState<PanResponderInstance | null>(null);
-    const [currentSwipingDirection, setCurrentSwipingDirection] = useState<Direction | null>(null);
     const [inSwipeClosingState, setInSwipeClosingState] = useState(false);
     const isSwipeable = !!props.swipeDirection;
 
+    const currentSwipingDirectionRef = useRef<Direction | null>(null);
+
+    const setCurrentSwipingDirection = (direction: Direction | null) => {
+        currentSwipingDirectionRef.current = direction;
+    };
+
     const animEvt = useRef<AnimationEvent | null>(null);
 
     const setAnimEvt = (currentAnim: AnimationEvent | null): void => {
@@ -67,8 +72,8 @@ function ReactNativeModal(incomingProps: ModalProps) {
             PanResponder.create({
                 onMoveShouldSetPanResponder: onMoveShouldSetPanResponder(props, setAnimEvt, setCurrentSwipingDirection, pan),
                 onStartShouldSetPanResponder: (a, b) => onStartShouldSetPanResponder(props, setCurrentSwipingDirection)(a as EnhancedGestureEvent, b),
-                onPanResponderMove: onPanResponderMove(props, currentSwipingDirection, setCurrentSwipingDirection, setAnimEvt, animEvt, pan, deviceHeight, deviceWidth),
-                onPanResponderRelease: onPanResponderRelease(props, currentSwipingDirection, setInSwipeClosingState, pan),
+                onPanResponderMove: onPanResponderMove(props, currentSwipingDirectionRef, setCurrentSwipingDirection, setAnimEvt, animEvt, pan, deviceHeight, deviceWidth),
+                onPanResponderRelease: onPanResponderRelease(props, currentSwipingDirectionRef, setInSwipeClosingState, pan),
             }),
         );
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps

diff --git a/src/components/Modal/ReactNativeModal/panResponders.ts b/src/components/Modal/ReactNativeModal/panResponders.ts
@@ -75,7 +75,7 @@ const onStartShouldSetPanResponder = (props: RemainingModalProps, setCurrentSwip
 
 const onPanResponderMove = (
     props: RemainingModalProps,
-    currentSwipingDirection: Direction | null,
+    currentSwipingDirectionRef: MutableRefObject<Direction | null>,
     setCurrentSwipingDirection: (direction: Direction | null) => void,
     setCurrentAnimEvt: (currentAnim: AnimationEvent | null) => void,
     animEvt: MutableRefObject<AnimationEvent | null>,
@@ -84,15 +84,14 @@ const onPanResponderMove = (
     deviceWidth: number,
 ) => {
     return (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        const currentSwipingDirection = currentSwipingDirectionRef.current;
         if (!currentSwipingDirection) {
             if (gestureState.dx === 0 && gestureState.dy === 0) {
                 return;
             }
-
             setCurrentSwipingDirection(getSwipingDirection(gestureState));
             setCurrentAnimEvt(createAnimationEventForSwipe(currentSwipingDirection, pan));
         }
-
         if (isSwipeDirectionAllowed(gestureState, currentSwipingDirection)) {
             const newOpacityFactor = 1 - calcDistancePercentage(gestureState, currentSwipingDirection, props.deviceHeight ?? deviceHeight, props.deviceWidth ?? deviceWidth);
 
@@ -123,8 +122,15 @@ const onPanResponderMove = (
         }
     };
 };
-const onPanResponderRelease = (props: RemainingModalProps, currentSwipingDirection: Direction | null, setInSwipeClosingState: (val: boolean) => void, pan: Animated.ValueXY) => {
+
+const onPanResponderRelease = (
+    props: RemainingModalProps,
+    currentSwipingDirectionRef: MutableRefObject<Direction | null>,
+    setInSwipeClosingState: (val: boolean) => void,
+    pan: Animated.ValueXY,
+) => {
     return (evt: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+        const currentSwipingDirection = currentSwipingDirectionRef.current;
         const accDistance = getAccDistancePerDirection(gestureState, currentSwipingDirection);
         if (accDistance > props.swipeThreshold && isSwipeDirectionAllowed(gestureState, currentSwipingDirection, props.swipeDirection)) {
             if (props.onSwipeComplete) {