react-native-gesture-image-viewer 1.2.3 → 1.4.0

package/src/useGestureViewer.ts

@@ -19,6 +19,7 @@ import {
 import type GestureViewerManager from './GestureViewerManager';
 import { registry } from './GestureViewerRegistry';
 import type { GestureViewerProps } from './types';
+import { createBoundsConstraint } from './utils';
 
 type UseGestureViewerProps<T = any> = Omit<
   GestureViewerProps<T>,
@@ -50,7 +51,7 @@ export const useGestureViewer = <T = any>({
   const width = useSnap ? customWidth || screenWidth : screenWidth;
 
   const [isZoomed, setIsZoomed] = useState(false);
-
+  const [isRotated, setIsRotated] = useState(false);
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
   const [manager, setManager] = useState<GestureViewerManager | null>(null);
 
@@ -64,29 +65,14 @@ export const useGestureViewer = <T = any>({
   const translateX = useSharedValue(0);
   const scale = useSharedValue(1);
   const backdropOpacity = useSharedValue(1);
+  const rotation = useSharedValue(0);
 
   const listRef = useRef<any>(null);
 
   const dataLength = data?.length || 0;
 
-  const constrainToBounds = useCallback(
-    (translateX: number, translateY: number, scale: number) => {
-      'worklet';
-      if (scale <= 1) {
-        return {
-          x: translateX,
-          y: translateY,
-        };
-      }
-
-      const maxTranslateX = (width * scale - width) / 2;
-      const maxTranslateY = (screenHeight * scale - screenHeight) / 2;
-
-      return {
-        x: Math.max(-maxTranslateX, Math.min(maxTranslateX, translateX)),
-        y: Math.max(-maxTranslateY, Math.min(maxTranslateY, translateY)),
-      };
-    },
+  const constrainTranslation = useMemo(
+    () => createBoundsConstraint({ width, height: screenHeight }),
     [width, screenHeight],
   );
 
@@ -97,6 +83,13 @@ export const useGestureViewer = <T = any>({
     },
   );
 
+  useAnimatedReaction(
+    () => rotation.value,
+    (currentRotation) => {
+      runOnJS(setIsRotated)(currentRotation % 360 !== 0);
+    },
+  );
+
   useEffect(() => {
     const handleManagerChange = (manager: GestureViewerManager | null) => {
       unsubscribeRef.current?.();
@@ -132,8 +125,24 @@ export const useGestureViewer = <T = any>({
     manager.setEnableSwipeGesture(enableSwipeGesture);
     manager.setCurrentIndex(initialIndex);
     manager.setWidth(width + itemSpacing);
+    manager.setHeight(screenHeight);
+    manager.setZoomSharedValues(scale, translateX, translateY, maxZoomScale);
+    manager.setRotation(rotation);
     manager.notifyStateChange();
-  }, [dataLength, enableSwipeGesture, initialIndex, manager, width, itemSpacing]);
+  }, [
+    dataLength,
+    enableSwipeGesture,
+    initialIndex,
+    manager,
+    width,
+    itemSpacing,
+    maxZoomScale,
+    scale,
+    screenHeight,
+    translateX,
+    translateY,
+    rotation,
+  ]);
 
   useEffect(() => {
     if (!manager || !listRef.current) {
@@ -153,6 +162,7 @@ export const useGestureViewer = <T = any>({
     scale.value = 1;
     backdropOpacity.value = 1;
     startScale.value = 1;
+    rotation.value = 0;
 
     if (initialIndex <= 0 || !listRef.current) {
       return;
@@ -175,7 +185,7 @@ export const useGestureViewer = <T = any>({
     return () => {
       runAfterInteractions?.cancel();
     };
-  }, [initialIndex, translateY, backdropOpacity, translateX, scale, startScale, width, itemSpacing]);
+  }, [initialIndex, translateY, backdropOpacity, translateX, scale, startScale, width, itemSpacing, rotation]);
 
   const onMomentumScrollEnd = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
@@ -199,6 +209,7 @@ export const useGestureViewer = <T = any>({
         initialTranslateY.value = withTiming(0);
         startScale.value = withTiming(1);
         scale.value = withTiming(1);
+        rotation.value = 0;
       }
     },
     [
@@ -214,6 +225,7 @@ export const useGestureViewer = <T = any>({
       initialTranslateX,
       initialTranslateY,
       startScale,
+      rotation,
     ],
   );
 
@@ -252,25 +264,30 @@ export const useGestureViewer = <T = any>({
       .onUpdate((event) => {
         const newScale = startScale.value * event.scale;
 
+        scale.value = newScale;
+
+        if (newScale <= 1) {
+          translateX.value = withTiming(0);
+          translateY.value = withTiming(0);
+          return;
+        }
+
         const deltaScale = newScale - startScale.value;
         const centerX = event.focalX - width / 2;
         const centerY = event.focalY - screenHeight / 2;
 
-        scale.value = newScale;
         // NOTE 새로운 이동값 = 기존 이동값 - (중심점 거리 × 스케일 변화량) / 원래 스케일 (중심점이 화면 중심에서 멀수록, 확대 배율이 클수록 더 많이 이동)
         const newTranslateX = initialTranslateX.value - (centerX * deltaScale) / startScale.value;
         const newTranslateY = initialTranslateY.value - (centerY * deltaScale) / startScale.value;
 
-        const constrained = constrainToBounds(newTranslateX, newTranslateY, newScale);
-
-        if (newScale <= 1) {
-          translateX.value = withTiming(0);
-          translateY.value = withTiming(0);
-          return;
-        }
+        const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
+          translateX: newTranslateX,
+          translateY: newTranslateY,
+          scale: newScale,
+        });
 
-        translateX.value = constrained.x;
-        translateY.value = constrained.y;
+        translateX.value = constrainedTranslateX;
+        translateY.value = constrainedTranslateY;
       })
       .onEnd(() => {
         if (scale.value > maxZoomScale) {
@@ -279,10 +296,14 @@ export const useGestureViewer = <T = any>({
             easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
           });
 
-          const constrained = constrainToBounds(translateX.value, translateY.value, maxZoomScale);
+          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
+            translateX: translateX.value,
+            translateY: translateY.value,
+            scale: maxZoomScale,
+          });
 
-          translateX.value = withTiming(constrained.x);
-          translateY.value = withTiming(constrained.y);
+          translateX.value = withTiming(constrainedTranslateX);
+          translateY.value = withTiming(constrainedTranslateY);
 
           return;
         }
@@ -299,9 +320,14 @@ export const useGestureViewer = <T = any>({
           return;
         }
 
-        const finalConstrained = constrainToBounds(translateX.value, translateY.value, scale.value);
-        translateX.value = withTiming(finalConstrained.x);
-        translateY.value = withTiming(finalConstrained.y);
+        const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
+          translateX: translateX.value,
+          translateY: translateY.value,
+          scale: scale.value,
+        });
+
+        translateX.value = withTiming(constrainedTranslateX);
+        translateY.value = withTiming(constrainedTranslateY);
       });
   }, [
     scale,
@@ -314,7 +340,7 @@ export const useGestureViewer = <T = any>({
     initialTranslateY,
     width,
     screenHeight,
-    constrainToBounds,
+    constrainTranslation,
   ]);
 
   const zoomPanGesture = useMemo(() => {
@@ -331,10 +357,14 @@ export const useGestureViewer = <T = any>({
           const newTranslateX = initialTranslateX.value + event.translationX;
           const newTranslateY = initialTranslateY.value + event.translationY;
 
-          const constrained = constrainToBounds(newTranslateX, newTranslateY, scale.value);
+          const { translateX: constrainedTranslateX, translateY: constrainedTranslateY } = constrainTranslation({
+            translateX: newTranslateX,
+            translateY: newTranslateY,
+            scale: scale.value,
+          });
 
-          translateX.value = constrained.x;
-          translateY.value = constrained.y;
+          translateX.value = constrainedTranslateX;
+          translateY.value = constrainedTranslateY;
         }
       });
   }, [
@@ -345,7 +375,7 @@ export const useGestureViewer = <T = any>({
     scale,
     initialTranslateX,
     initialTranslateY,
-    constrainToBounds,
+    constrainTranslation,
   ]);
 
   const doubleTapGesture = useMemo(() => {
@@ -392,7 +422,12 @@ export const useGestureViewer = <T = any>({
 
   const animatedStyle = useAnimatedStyle(() => {
     return {
-      transform: [{ translateY: translateY.value }, { translateX: translateX.value }, { scale: scale.value }],
+      transform: [
+        { translateY: translateY.value },
+        { translateX: translateX.value },
+        { scale: scale.value },
+        { rotate: `${rotation.value}deg` },
+      ],
     };
   });
 
@@ -412,7 +447,7 @@ export const useGestureViewer = <T = any>({
     translateY,
     listRef,
     isZoomed,
-
+    isRotated,
     dismissGesture,
     zoomGesture,
 

package/src/useGestureViewerController.ts

@@ -42,6 +42,10 @@ export const useGestureViewerController = (id = 'default') => {
     goToIndex: manager?.goToIndex || noopFunction,
     goToPrevious: manager?.goToPrevious || noopFunction,
     goToNext: manager?.goToNext || noopFunction,
+    zoomIn: manager?.zoomIn || noopFunction,
+    zoomOut: manager?.zoomOut || noopFunction,
+    resetZoom: manager?.resetZoom || noopFunction,
+    rotate: manager?.rotate || noopFunction,
     currentIndex: state.currentIndex,
     totalCount: state.dataLength,
   };

package/src/utils.ts

@@ -27,3 +27,24 @@ export const isFlashListLike = (component: any): component is any => {
 
   return component?.name === 'FlashList';
 };
+
+export const createBoundsConstraint =
+  ({ width, height }: { width: number; height: number }) =>
+  ({ scale, translateX, translateY }: { translateX: number; translateY: number; scale: number }) => {
+    'worklet';
+
+    if (scale <= 1) {
+      return {
+        translateX,
+        translateY,
+      };
+    }
+
+    const maxTranslateX = (width * scale - width) / 2;
+    const maxTranslateY = (height * scale - height) / 2;
+
+    return {
+      translateX: Math.max(-maxTranslateX, Math.min(maxTranslateX, translateX)),
+      translateY: Math.max(-maxTranslateY, Math.min(maxTranslateY, translateY)),
+    };
+  };