react-native-gesture-image-viewer 2.3.0 → 2.3.2

package/src/useGestureViewer.ts

@@ -19,6 +19,7 @@ import { useGestureViewerPaging } from './useGestureViewerPaging';
 import { createBoundsConstraint, createScrollAction } from './utils';
 import { getDismissDistance, shouldDismissByDirection } from './utils/dismiss';
 import { applyTapZoomAtPoint } from './utils/tapZoom';
+import { calculateFocalPointTranslation, shouldAcceptFocalPoint } from './utils/zoom';
 
 type UseGestureViewerProps<ItemT, LC> = Omit<
   GestureViewerProps<ItemT, LC>,
@@ -95,6 +96,9 @@ export const useGestureViewer = <ItemT, LC>({
 
   const lastFocalX = useSharedValue(0);
   const lastFocalY = useSharedValue(0);
+  const startFocalX = useSharedValue(0);
+  const startFocalY = useSharedValue(0);
+  const hasActiveFocal = useSharedValue(false);
 
   const dataLength = data?.length || 0;
 
@@ -147,13 +151,13 @@ export const useGestureViewer = <ItemT, LC>({
   );
 
   const resetTransformState = useCallback(() => {
-    translateX.value = withTiming(0);
-    translateY.value = withTiming(0);
-    initialTranslateX.value = withTiming(0);
-    initialTranslateY.value = withTiming(0);
-    startScale.value = withTiming(1);
-    scale.value = withTiming(1);
-    rotation.value = 0;
+    translateX.set(withTiming(0));
+    translateY.set(withTiming(0));
+    initialTranslateX.set(withTiming(0));
+    initialTranslateY.set(withTiming(0));
+    startScale.set(withTiming(1));
+    scale.set(withTiming(1));
+    rotation.set(0);
   }, [initialTranslateX, initialTranslateY, rotation, scale, startScale, translateX, translateY]);
 
   const syncPendingIndex = useCallback(
@@ -201,7 +205,7 @@ export const useGestureViewer = <ItemT, LC>({
   }, []);
 
   useAnimatedReaction(
-    () => scale.value,
+    () => scale.get(),
     (currentScale, previousScale) => {
       if (currentScale !== previousScale) {
         scheduleOnRN(emitZoomChange, currentScale, previousScale);
@@ -212,7 +216,7 @@ export const useGestureViewer = <ItemT, LC>({
   );
 
   useAnimatedReaction(
-    () => rotation.value,
+    () => rotation.get(),
     (currentRotation, previousRotation) => {
       if (currentRotation !== previousRotation) {
         scheduleOnRN(emitRotationChange, currentRotation, previousRotation);
@@ -286,12 +290,12 @@ export const useGestureViewer = <ItemT, LC>({
   }, [manager]);
 
   useEffect(() => {
-    translateY.value = 0;
-    translateX.value = 0;
-    scale.value = 1;
-    backdropOpacity.value = 1;
-    startScale.value = 1;
-    rotation.value = 0;
+    translateY.set(0);
+    translateX.set(0);
+    scale.set(1);
+    backdropOpacity.set(1);
+    startScale.set(1);
+    rotation.set(0);
 
     if (adjustedInitialIndex <= 0 || !listRef.current) {
       return;
@@ -340,23 +344,27 @@ export const useGestureViewer = <ItemT, LC>({
         triggerRectRef.current.height / height,
       );
 
-      triggerScale.value = initialScaleFromTrigger;
-      triggerTranslateX.value = startX;
-      triggerTranslateY.value = startY;
-      triggerOpacity.value = 0;
+      triggerScale.set(initialScaleFromTrigger);
+      triggerTranslateX.set(startX);
+      triggerTranslateY.set(startY);
+      triggerOpacity.set(0);
 
-      triggerScale.value = withTiming(1, animationConfig, (finished) => {
-        if (finished) {
-          scheduleOnRN(onAnimationComplete);
-        }
-      });
-      triggerTranslateX.value = withTiming(0, animationConfig);
-      triggerTranslateY.value = withTiming(0, animationConfig);
-      triggerOpacity.value = withTiming(1, {
-        duration: animationConfig.duration / 2,
-        easing: animationConfig.easing,
-        reduceMotion: animationConfig.reduceMotion,
-      });
+      triggerScale.set(
+        withTiming(1, animationConfig, (finished) => {
+          if (finished) {
+            scheduleOnRN(onAnimationComplete);
+          }
+        }),
+      );
+      triggerTranslateX.set(withTiming(0, animationConfig));
+      triggerTranslateY.set(withTiming(0, animationConfig));
+      triggerOpacity.set(
+        withTiming(1, {
+          duration: animationConfig.duration / 2,
+          easing: animationConfig.easing,
+          reduceMotion: animationConfig.reduceMotion,
+        }),
+      );
 
       setShouldStartTriggerAnimation(false);
     }
@@ -391,7 +399,7 @@ export const useGestureViewer = <ItemT, LC>({
       }
 
       triggerRectRef.current = nextTriggerRect;
-      triggerOpacity.value = 0;
+      triggerOpacity.set(0);
       setShouldStartTriggerAnimation(true);
       registry.clearActiveTriggerNode(id);
     });
@@ -409,14 +417,16 @@ export const useGestureViewer = <ItemT, LC>({
       const endY = rect.y + rect.height / 2 - height / 2;
       const endScale = Math.min(rect.width / width, rect.height / height);
 
-      triggerScale.value = withTiming(endScale, animationConfig);
-      triggerTranslateX.value = withTiming(endX, animationConfig);
-      triggerTranslateY.value = withTiming(endY, animationConfig);
-      triggerOpacity.value = withTiming(0, animationConfig, (finished) => {
-        if (finished && onDismiss) {
-          scheduleOnRN(onDismiss);
-        }
-      });
+      triggerScale.set(withTiming(endScale, animationConfig));
+      triggerTranslateX.set(withTiming(endX, animationConfig));
+      triggerTranslateY.set(withTiming(endY, animationConfig));
+      triggerOpacity.set(
+        withTiming(0, animationConfig, (finished) => {
+          if (finished && onDismiss) {
+            scheduleOnRN(onDismiss);
+          }
+        }),
+      );
     },
     [
       animationConfig,
@@ -486,7 +496,7 @@ export const useGestureViewer = <ItemT, LC>({
       .withRef(dismissGestureRef)
       .enabled(canDismiss)
       .onUpdate((event) => {
-        translateY.value = event.translationY / dismissOptions.resistance;
+        translateY.set(event.translationY / dismissOptions.resistance);
       })
       .onEnd((event) => {
         if (
@@ -501,13 +511,15 @@ export const useGestureViewer = <ItemT, LC>({
           return;
         }
 
-        translateY.value = withSpring(0, {
-          damping: 50,
-          energyThreshold: 6e-9,
-          mass: 4,
-          overshootClamping: false,
-          stiffness: 600,
-        });
+        translateY.set(
+          withSpring(0, {
+            damping: 50,
+            energyThreshold: 6e-9,
+            mass: 4,
+            overshootClamping: false,
+            stiffness: 600,
+          }),
+        );
       });
   }, [translateY, dismissOptions, handleDismiss, isZoomed]);
 
@@ -520,40 +532,66 @@ export const useGestureViewer = <ItemT, LC>({
             scheduleOnRN(setIsPinching, true);
           }
         })
-        .onBegin((event) => {
-          startScale.value = scale.value;
-          initialTranslateX.value = translateX.value;
-          initialTranslateY.value = translateY.value;
-          lastFocalX.value = event.focalX;
-          lastFocalY.value = event.focalY;
+        .onStart((event) => {
+          startScale.set(scale.get());
+          initialTranslateX.set(translateX.get());
+          initialTranslateY.set(translateY.get());
+          startFocalX.set(event.focalX);
+          startFocalY.set(event.focalY);
+          lastFocalX.set(event.focalX);
+          lastFocalY.set(event.focalY);
+          hasActiveFocal.set(false);
         })
         .onUpdate((event) => {
-          const newScale = startScale.value * event.scale;
+          const initialScale = startScale.get();
+          const newScale = initialScale * event.scale;
 
-          scale.value = newScale;
+          scale.set(newScale);
 
           if (newScale <= 1) {
-            translateX.value = withTiming(0);
-            translateY.value = withTiming(0);
+            translateX.set(withTiming(0));
+            translateY.set(withTiming(0));
             return;
           }
 
-          const focalDeltaX = Math.abs(event.focalX - lastFocalX.value);
-          const focalDeltaY = Math.abs(event.focalY - lastFocalY.value);
           const threshold = 50;
 
-          if (focalDeltaX < threshold && focalDeltaY < threshold) {
-            lastFocalX.value = event.focalX;
-            lastFocalY.value = event.focalY;
+          if (
+            shouldAcceptFocalPoint({
+              focalX: event.focalX,
+              focalY: event.focalY,
+              hasActiveFocal: hasActiveFocal.get(),
+              lastFocalX: lastFocalX.get(),
+              lastFocalY: lastFocalY.get(),
+              threshold,
+            })
+          ) {
+            if (!hasActiveFocal.get()) {
+              startFocalX.set(event.focalX);
+              startFocalY.set(event.focalY);
+            }
+
+            lastFocalX.set(event.focalX);
+            lastFocalY.set(event.focalY);
+            hasActiveFocal.set(true);
           }
 
-          const deltaScale = newScale - startScale.value;
-          const centerX = lastFocalX.value - width / 2;
-          const centerY = lastFocalY.value - height / 2;
-
-          // NOTE 새로운 이동값 = 기존 이동값 - (중심점 거리 × 스케일 변화량) / 원래 스케일 (중심점이 화면 중심에서 멀수록, 확대 배율이 클수록 더 많이 이동)
-          const newTranslateX = initialTranslateX.value - (centerX * deltaScale) / startScale.value;
-          const newTranslateY = initialTranslateY.value - (centerY * deltaScale) / startScale.value;
+          const nextLastFocalX = lastFocalX.get();
+          const nextLastFocalY = lastFocalY.get();
+
+          const { translateX: newTranslateX, translateY: newTranslateY } =
+            calculateFocalPointTranslation({
+              currentFocalX: nextLastFocalX,
+              currentFocalY: nextLastFocalY,
+              height,
+              initialScale,
+              initialTranslateX: initialTranslateX.get(),
+              initialTranslateY: initialTranslateY.get(),
+              nextScale: newScale,
+              startFocalX: startFocalX.get(),
+              startFocalY: startFocalY.get(),
+              width,
+            });
 
           const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
             constrainTranslation({
@@ -562,55 +600,63 @@ export const useGestureViewer = <ItemT, LC>({
               translateY: newTranslateY,
             });
 
-          translateX.value = constrainedTranslateX;
-          translateY.value = constrainedTranslateY;
+          translateX.set(constrainedTranslateX);
+          translateY.set(constrainedTranslateY);
         })
         .onEnd(() => {
-          if (scale.value > maxZoomScale) {
-            scale.value = withTiming(maxZoomScale, {
-              duration: 300,
-              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-            });
+          const currentScale = scale.get();
+
+          if (currentScale > maxZoomScale) {
+            scale.set(
+              withTiming(maxZoomScale, {
+                duration: 300,
+                easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+              }),
+            );
 
             const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
               constrainTranslation({
                 scale: maxZoomScale,
-                translateX: translateX.value,
-                translateY: translateY.value,
+                translateX: translateX.get(),
+                translateY: translateY.get(),
               });
 
-            translateX.value = withTiming(constrainedTranslateX);
-            translateY.value = withTiming(constrainedTranslateY);
+            translateX.set(withTiming(constrainedTranslateX));
+            translateY.set(withTiming(constrainedTranslateY));
 
             return;
           }
 
-          if (scale.value < 1) {
-            scale.value = withTiming(1, {
-              duration: 300,
-              easing: Easing.bezier(0.25, 0.1, 0.25, 1),
-            });
-            translateX.value = withTiming(0);
-            translateY.value = withTiming(0);
-            initialTranslateX.value = withTiming(0);
-            initialTranslateY.value = withTiming(0);
+          if (currentScale < 1) {
+            scale.set(
+              withTiming(1, {
+                duration: 300,
+                easing: Easing.bezier(0.25, 0.1, 0.25, 1),
+              }),
+            );
+            translateX.set(withTiming(0));
+            translateY.set(withTiming(0));
+            initialTranslateX.set(withTiming(0));
+            initialTranslateY.set(withTiming(0));
+            hasActiveFocal.set(false);
             return;
           }
 
           const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
             constrainTranslation({
-              scale: scale.value,
-              translateX: translateX.value,
-              translateY: translateY.value,
+              scale: currentScale,
+              translateX: translateX.get(),
+              translateY: translateY.get(),
             });
 
-          translateX.value = withTiming(constrainedTranslateX);
-          translateY.value = withTiming(constrainedTranslateY);
+          translateX.set(withTiming(constrainedTranslateX));
+          translateY.set(withTiming(constrainedTranslateY));
         })
         .onTouchesUp(() => {
           scheduleOnRN(setIsPinching, false);
         })
         .onFinalize(() => {
+          hasActiveFocal.set(false);
           scheduleOnRN(setIsPinching, false);
         }),
     [
@@ -627,6 +673,9 @@ export const useGestureViewer = <ItemT, LC>({
       constrainTranslation,
       lastFocalX,
       lastFocalY,
+      startFocalX,
+      startFocalY,
+      hasActiveFocal,
     ],
   );
 
@@ -637,23 +686,25 @@ export const useGestureViewer = <ItemT, LC>({
         .activeCursor('grabbing')
         .averageTouches(true)
         .onBegin(() => {
-          initialTranslateX.value = translateX.value;
-          initialTranslateY.value = translateY.value;
+          initialTranslateX.set(translateX.get());
+          initialTranslateY.set(translateY.get());
         })
         .onUpdate((event) => {
-          if (scale.value > 1) {
-            const newTranslateX = initialTranslateX.value + event.translationX;
-            const newTranslateY = initialTranslateY.value + event.translationY;
+          const currentScale = scale.get();
+
+          if (currentScale > 1) {
+            const newTranslateX = initialTranslateX.get() + event.translationX;
+            const newTranslateY = initialTranslateY.get() + event.translationY;
 
             const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } =
               constrainTranslation({
-                scale: scale.value,
+                scale: currentScale,
                 translateX: newTranslateX,
                 translateY: newTranslateY,
               });
 
-            translateX.value = constrainedTranslateX;
-            translateY.value = constrainedTranslateY;
+            translateX.set(constrainedTranslateX);
+            translateY.set(constrainedTranslateY);
           }
         }),
     [
@@ -733,27 +784,27 @@ export const useGestureViewer = <ItemT, LC>({
   );
 
   const animatedStyle = useAnimatedStyle(() => ({
-    opacity: triggerOpacity.value,
+    opacity: triggerOpacity.get(),
     transform: [
-      { translateX: triggerTranslateX.value },
-      { translateY: triggerTranslateY.value },
-      { scale: triggerScale.value },
-
-      { translateY: translateY.value },
-      { translateX: translateX.value },
-      { scale: scale.value },
-      { rotate: `${rotation.value}deg` },
+      { translateX: triggerTranslateX.get() },
+      { translateY: triggerTranslateY.get() },
+      { scale: triggerScale.get() },
+
+      { translateY: translateY.get() },
+      { translateX: translateX.get() },
+      { scale: scale.get() },
+      { rotate: `${rotation.get()}deg` },
     ],
   }));
 
   const backdropStyle = useAnimatedStyle(() => {
-    const baseOpacity = triggerOpacity.value;
+    const baseOpacity = triggerOpacity.get();
 
-    if (!dismissOptions.fadeBackdrop || scale.value !== 1) {
+    if (!dismissOptions.fadeBackdrop || scale.get() !== 1) {
       return { opacity: baseOpacity };
     }
 
-    const dismissDistance = getDismissDistance(translateY.value, dismissOptions.direction);
+    const dismissDistance = getDismissDistance(translateY.get(), dismissOptions.direction);
     const dismissOpacity = interpolate(dismissDistance, [0, 200], [1, 0], 'clamp');
 
     return { opacity: baseOpacity * dismissOpacity };

package/src/utils/tapZoom.ts

@@ -22,7 +22,7 @@ export const applyTapZoomAtPoint = ({
 }) => {
   'worklet';
 
-  const nextScale = scale.value > 1 ? 1 : maxZoomScale;
+  const nextScale = scale.get() > 1 ? 1 : maxZoomScale;
   const timingConfig = {
     duration: 300,
     easing: Easing.bezier(0.25, 0.1, 0.25, 1),
@@ -33,12 +33,12 @@ export const applyTapZoomAtPoint = ({
     const centerY = y - height / 2;
 
     // NOTE 확대로 밀려난 거리만큼 반대로 이동해서 탭 지점을 제자리에 유지
-    translateX.value = withTiming(-centerX * (nextScale - 1), timingConfig);
-    translateY.value = withTiming(-centerY * (nextScale - 1), timingConfig);
+    translateX.set(withTiming(-centerX * (nextScale - 1), timingConfig));
+    translateY.set(withTiming(-centerY * (nextScale - 1), timingConfig));
   } else {
-    translateX.value = withTiming(0, timingConfig);
-    translateY.value = withTiming(0, timingConfig);
+    translateX.set(withTiming(0, timingConfig));
+    translateY.set(withTiming(0, timingConfig));
   }
 
-  scale.value = withTiming(nextScale, timingConfig);
+  scale.set(withTiming(nextScale, timingConfig));
 };

package/src/utils/zoom.ts

@@ -0,0 +1,60 @@
+export const calculateFocalPointTranslation = ({
+  currentFocalX,
+  currentFocalY,
+  height,
+  initialScale,
+  initialTranslateX,
+  initialTranslateY,
+  nextScale,
+  startFocalX,
+  startFocalY,
+  width,
+}: {
+  currentFocalX: number;
+  currentFocalY: number;
+  height: number;
+  initialScale: number;
+  initialTranslateX: number;
+  initialTranslateY: number;
+  nextScale: number;
+  startFocalX: number;
+  startFocalY: number;
+  width: number;
+}) => {
+  'worklet';
+
+  const scaleRatio = nextScale / initialScale;
+  const currentCenterX = currentFocalX - width / 2;
+  const currentCenterY = currentFocalY - height / 2;
+  const startCenterX = startFocalX - width / 2;
+  const startCenterY = startFocalY - height / 2;
+
+  return {
+    translateX: initialTranslateX * scaleRatio + currentCenterX - startCenterX * scaleRatio,
+    translateY: initialTranslateY * scaleRatio + currentCenterY - startCenterY * scaleRatio,
+  };
+};
+
+export const shouldAcceptFocalPoint = ({
+  focalX,
+  focalY,
+  hasActiveFocal,
+  lastFocalX,
+  lastFocalY,
+  threshold,
+}: {
+  focalX: number;
+  focalY: number;
+  hasActiveFocal: boolean;
+  lastFocalX: number;
+  lastFocalY: number;
+  threshold: number;
+}) => {
+  'worklet';
+
+  if (!hasActiveFocal) {
+    return true;
+  }
+
+  return Math.abs(focalX - lastFocalX) < threshold && Math.abs(focalY - lastFocalY) < threshold;
+};