fix(bug)!: fix jump at the end of pinch gesture

Disable pan gesture at the beginning of pinch gesture instead of the end this change has been applied to both ResumableZoom and CropZoom refs #10
Glazzes · Mar 27, 2024 · 948783f · 948783f
1 parent f692eb6
commit 948783f
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 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
@@ -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
@@ -160,7 +160,7 @@ const ResumableZoom: React.FC<ResumableZoomProps> = (props) => {
   });
 
   const pinch = Gesture.Pinch()
-    .enabled(pinchEnabled && gesturesEnabled)
+    .enabled(pinchEnabled)
     .hitSlop(hitSlop)
     .onStart(onPinchStart)
     .onUpdate(onPinchUpdate)