fix(bug)!: fix jumps issue at the end of pan gesture

refs #10
Glazzes · Mar 28, 2024 · 0793748 · 0793748
2 parents f692eb6 + 8422651
commit 0793748
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/src/commons/hooks/usePinchCommons.ts b/src/commons/hooks/usePinchCommons.ts
@@ -4,9 +4,9 @@ import {
   runOnJS,
   type SharedValue,
 } from 'react-native-reanimated';
-import type {
-  GestureUpdateEvent,
-  PinchGestureHandlerEventPayload,
+import {
+  type GestureUpdateEvent,
+  type PinchGestureHandlerEventPayload,
 } from 'react-native-gesture-handler';
 
 import { clamp } from '../utils/clamp';
@@ -69,9 +69,9 @@ export const usePinchCommons = (options: PinchOptions) => {
   } = options;
 
   const [gesturesEnabled, setGesturesEnabled] = useState<boolean>(true);
-  const toggleGestures = () => {
+  const switchGesturesState = (value: boolean) => {
     if (scaleMode === ScaleMode.BOUNCE) {
-      setGesturesEnabled((prev) => !prev);
+      setGesturesEnabled(value);
     }
   };
 
@@ -92,12 +92,13 @@ export const usePinchCommons = (options: PinchOptions) => {
     translate.x.value = withTiming(toX);
     translate.y.value = withTiming(toY);
     scale.value = withTiming(toScale, undefined, () => {
-      runOnJS(toggleGestures)();
+      runOnJS(switchGesturesState)(true);
     });
   };
 
   const onPinchStart = (e: PinchGestureEvent) => {
     'worklet';
+    runOnJS(switchGesturesState)(false);
 
     cancelAnimation(translate.x);
     cancelAnimation(translate.y);
@@ -120,6 +121,9 @@ export const usePinchCommons = (options: PinchOptions) => {
 
   const onPinchUpdate = (e: PinchGestueUpdateEvent) => {
     'worklet';
+    if (e.numberOfPointers !== 2) {
+      return;
+    }
 
     let toScale = e.scale * scaleOffset.value;
     if (scaleMode === ScaleMode.CLAMP) {
@@ -151,8 +155,6 @@ export const usePinchCommons = (options: PinchOptions) => {
   const onPinchEnd = (e: PinchGestureEvent) => {
     'worklet';
 
-    runOnJS(toggleGestures)();
-
     if (userCallbacks?.onPinchEnd) {
       runOnJS(userCallbacks.onPinchEnd)(e);
     }

diff --git a/src/components/crop/CropZoom.tsx b/src/components/crop/CropZoom.tsx
@@ -1,5 +1,5 @@
 import React, { useImperativeHandle } from 'react';
-import { StyleSheet, View, type ViewStyle } from 'react-native';
+import { Platform, StyleSheet, View, type ViewStyle } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
@@ -42,7 +42,7 @@ const CropZoom: React.FC<CropZoomProps> = (props) => {
     maxScale: userMaxScale = -1,
     scaleMode = ScaleMode.BOUNCE,
     panMode = PanMode.FREE,
-    panWithPinch = true,
+    panWithPinch = Platform.OS !== 'ios',
     mode = CropMode.MANAGED,
     onGestureActive = undefined,
     OverlayComponent = undefined,
@@ -164,7 +164,6 @@ const CropZoom: React.FC<CropZoomProps> = (props) => {
   });
 
   const pinch = Gesture.Pinch()
-    .enabled(gesturesEnabled)
     .onStart(onPinchStart)
     .onUpdate(onPinchUpdate)
     .onEnd(onPinchEnd);

diff --git a/src/components/resumable/ResumableZoom.tsx b/src/components/resumable/ResumableZoom.tsx
@@ -1,5 +1,10 @@
 import React, { useImperativeHandle } from 'react';
-import { View, StyleSheet, type LayoutChangeEvent } from 'react-native';
+import {
+  Platform,
+  View,
+  StyleSheet,
+  type LayoutChangeEvent,
+} from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useDerivedValue,
@@ -41,7 +46,7 @@ const ResumableZoom: React.FC<ResumableZoomProps> = (props) => {
     maxScale: userMaxScale = 6,
     panMode = PanMode.CLAMP,
     scaleMode = ScaleMode.BOUNCE,
-    panWithPinch = true,
+    panWithPinch = Platform.OS !== 'ios',
     onTap,
     onGestureActive,
     onSwipeRight,
@@ -160,7 +165,7 @@ const ResumableZoom: React.FC<ResumableZoomProps> = (props) => {
   });
 
   const pinch = Gesture.Pinch()
-    .enabled(pinchEnabled && gesturesEnabled)
+    .enabled(pinchEnabled)
     .hitSlop(hitSlop)
     .onStart(onPinchStart)
     .onUpdate(onPinchUpdate)