react-native-gesture-image-viewer 0.1.0 → 0.2.0

package/lib/module/GestureImageViewer.js

@@ -1,8 +1,8 @@
 "use strict";
 
-import { useCallback } from 'react';
-import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useCallback, useMemo } from 'react';
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { FlatList, Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import { useGestureImageViewer } from "./useGestureImageViewer.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -31,8 +31,11 @@ export function GestureImageViewer({
   } = useWindowDimensions();
   const width = customWidth || screenWidth;
   const {
+    currentIndex,
     flatListRef,
-    panGesture,
+    isZoomed,
+    dismissGesture,
+    zoomGesture,
     onMomentumScrollEnd,
     animatedStyle,
     backdropStyle
@@ -46,31 +49,35 @@ export function GestureImageViewer({
     item,
     index
   }) => {
+    const isActive = index === currentIndex;
     return /*#__PURE__*/_jsx(Animated.View, {
-      style: {
+      style: [{
         width,
         height: '100%',
         justifyContent: 'center',
         alignItems: 'center'
-      },
+      }, isActive && animatedStyle],
       children: renderImage(item, index)
     });
-  }, [width, renderImage]);
+  }, [width, renderImage, animatedStyle, currentIndex]);
   const getItemLayout = useCallback((_, index) => ({
     length: width,
     offset: width * index,
     index
   }), [width]);
   const keyExtractor = useCallback((item, index) => `image-${index}-${item}`, []);
+  const gesture = useMemo(() => {
+    return Gesture.Race(dismissGesture, zoomGesture);
+  }, [zoomGesture, dismissGesture]);
   const listComponent = /*#__PURE__*/_jsx(GestureHandlerRootView, {
     children: /*#__PURE__*/_jsx(GestureDetector, {
-      gesture: panGesture,
+      gesture: gesture,
       children: /*#__PURE__*/_jsxs(View, {
         style: [styles.container, containerStyle],
         children: [/*#__PURE__*/_jsx(Animated.View, {
           style: [styles.background, backdropStyleProps, backdropStyle]
-        }), /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.content, animatedStyle],
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.content,
           children: /*#__PURE__*/_jsx(ListComponent, {
             ref: flatListRef,
             data: data,
@@ -78,6 +85,7 @@ export function GestureImageViewer({
             keyExtractor: keyExtractor,
             horizontal: true,
             pagingEnabled: true,
+            scrollEnabled: !isZoomed,
             showsHorizontalScrollIndicator: false,
             onMomentumScrollEnd: onMomentumScrollEnd,
             getItemLayout: getItemLayout,

package/lib/module/GestureImageViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","FlatList","Platform","StyleSheet","useWindowDimensions","View","GestureDetector","GestureHandlerRootView","Animated","useGestureImageViewer","jsx","_jsx","jsxs","_jsxs","WebPagingFix","OS","children","GestureImageViewer","data","renderImage","renderContainer","ListComponent","width","customWidth","listProps","backdropStyle","backdropStyleProps","containerStyle","initialIndex","props","screenWidth","flatListRef","panGesture","onMomentumScrollEnd","animatedStyle","renderItem","item","index","style","height","justifyContent","alignItems","getItemLayout","_","length","offset","keyExtractor","listComponent","gesture","styles","container","background","content","ref","horizontal","pagingEnabled","showsHorizontalScrollIndicator","initialScrollIndex","windowSize","maxToRenderPerBatch","removeClippedSubviews","dataSet","create","flex","position","top","left","right","bottom","backgroundColor"],"sourceRoot":"../../src","sources":["GestureImageViewer.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useMemo","Platform","StyleSheet","useWindowDimensions","View","FlatList","Gesture","GestureDetector","GestureHandlerRootView","Animated","useGestureImageViewer","jsx","_jsx","jsxs","_jsxs","WebPagingFix","OS","children","GestureImageViewer","data","renderImage","renderContainer","ListComponent","width","customWidth","listProps","backdropStyle","backdropStyleProps","containerStyle","initialIndex","props","screenWidth","currentIndex","flatListRef","isZoomed","dismissGesture","zoomGesture","onMomentumScrollEnd","animatedStyle","renderItem","item","index","isActive","style","height","justifyContent","alignItems","getItemLayout","_","length","offset","keyExtractor","gesture","Race","listComponent","styles","container","background","content","ref","horizontal","pagingEnabled","scrollEnabled","showsHorizontalScrollIndicator","initialScrollIndex","windowSize","maxToRenderPerBatch","removeClippedSubviews","dataSet","create","flex","position","top","left","right","bottom","backgroundColor"],"sourceRoot":"../../src","sources":["GestureImageViewer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/useGestureImageViewer.js

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { InteractionManager, useWindowDimensions } from 'react-native';
 import { Gesture } from 'react-native-gesture-handler';
-import { interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { Easing, interpolate, runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 export const useGestureImageViewer = ({
   data,
   initialIndex = 0,
@@ -16,23 +16,40 @@ export const useGestureImageViewer = ({
   // velocityThreshold = 200,
   animateBackdrop = true,
   enableDismissGesture = true,
-  enableSwipeGesture = true
+  enableSwipeGesture = true,
+  enableZoomGesture = true,
+  enableDoubleTapGesture = true,
+  enableZoomPanGesture = true,
+  maxZoomScale = 2
 }) => {
   const {
-    width: screenWidth
+    width: screenWidth,
+    height: screenHeight
   } = useWindowDimensions();
   const width = customWidth || screenWidth;
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [isZoomed, setIsZoomed] = useState(false);
+  const initialTranslateY = useSharedValue(0);
+  const initialTranslateX = useSharedValue(0);
+  const startScale = useSharedValue(1);
   const translateY = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const scale = useSharedValue(1);
   const backdropOpacity = useSharedValue(1);
   const flatListRef = useRef(null);
   const dataLength = data?.length || 0;
+  useAnimatedReaction(() => scale.value, currentScale => {
+    runOnJS(setIsZoomed)(currentScale > 1);
+  });
 
   // 초기 위치 설정
   useEffect(() => {
     setCurrentIndex(initialIndex);
     translateY.value = 0;
+    translateX.value = 0;
+    scale.value = 1;
     backdropOpacity.value = 1;
+    startScale.value = 1;
     if (initialIndex <= 0 || !flatListRef.current) {
       return;
     }
@@ -47,7 +64,7 @@ export const useGestureImageViewer = ({
     return () => {
       runAfterInteractions?.cancel();
     };
-  }, [initialIndex, translateY, backdropOpacity]);
+  }, [initialIndex, translateY, backdropOpacity, translateX, scale, startScale]);
 
   // 인덱스 변경 알림
   useEffect(() => {
@@ -63,8 +80,14 @@ export const useGestureImageViewer = ({
     const newIndex = Math.round(contentOffset.x / width);
     if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
       setCurrentIndex(newIndex);
+      translateX.value = withTiming(0);
+      translateY.value = withTiming(0);
+      initialTranslateX.value = withTiming(0);
+      initialTranslateY.value = withTiming(0);
+      startScale.value = withTiming(1);
+      scale.value = withTiming(1);
     }
-  }, [currentIndex, dataLength, width, enableSwipeGesture]);
+  }, [currentIndex, dataLength, width, enableSwipeGesture, translateX, translateY, scale, initialTranslateX, initialTranslateY, startScale]);
   const goToIndex = useCallback(index => {
     if (index < 0 || index >= dataLength || !enableSwipeGesture) {
       return;
@@ -85,10 +108,8 @@ export const useGestureImageViewer = ({
       goToIndex(currentIndex + 1);
     }
   }, [currentIndex, dataLength, goToIndex]);
-  const panGesture = useMemo(() => {
-    return Gesture.Pan().minDistance(10).activeOffsetY([-10, 10]).failOffsetX([-10, 10]).onUpdate(event => {
-      'worklet';
-
+  const dismissGesture = useMemo(() => {
+    return Gesture.Pan().minDistance(10).averageTouches(true).activeOffsetY([-10, 10]).failOffsetX([-10, 10]).enabled(!isZoomed).onUpdate(event => {
       translateY.value = event.translationY / resistance;
     }).onEnd(event => {
       'worklet';
@@ -102,18 +123,78 @@ export const useGestureImageViewer = ({
         stiffness: 150
       });
     });
-  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance]);
+  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance, isZoomed]);
+  const zoomPinchGesture = useMemo(() => {
+    return Gesture.Pinch().enabled(enableZoomGesture).onBegin(() => {
+      startScale.value = scale.value;
+    }).onUpdate(event => {
+      scale.value = startScale.value * event.scale;
+    }).onEnd(() => {
+      if (scale.value > maxZoomScale) {
+        scale.value = withTiming(maxZoomScale, {
+          duration: 300,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0)
+        });
+        return;
+      }
+      if (scale.value < 1) {
+        scale.value = withTiming(1, {
+          duration: 300,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0)
+        });
+        translateX.value = withTiming(0);
+        translateY.value = withTiming(0);
+      }
+    });
+  }, [scale, enableZoomGesture, maxZoomScale, translateX, translateY, startScale]);
+  const zoomPanGesture = useMemo(() => {
+    return Gesture.Pan().enabled(enableZoomPanGesture && isZoomed).onBegin(() => {
+      initialTranslateX.value = translateX.value;
+      initialTranslateY.value = translateY.value;
+    }).onUpdate(event => {
+      'worklet';
 
-  // 애니메이션 스타일
+      if (scale.value > 1) {
+        const maxTranslateX = (width * scale.value - width) / 2;
+        const maxTranslateY = (screenHeight * scale.value - screenHeight) / 2;
+        translateX.value = Math.max(-maxTranslateX, Math.min(maxTranslateX, initialTranslateX.value + event.translationX));
+        translateY.value = Math.max(-maxTranslateY, Math.min(maxTranslateY, initialTranslateY.value + event.translationY));
+      }
+    });
+  }, [translateX, translateY, enableZoomPanGesture, isZoomed, scale, initialTranslateX, initialTranslateY, width, screenHeight]);
+  const doubleTapGesture = useMemo(() => {
+    return Gesture.Tap().enabled(enableDoubleTapGesture).numberOfTaps(2).onEnd(() => {
+      const nextScale = scale.value > 1 ? 1 : maxZoomScale;
+      translateX.value = withTiming(0, {
+        duration: 300,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1.0)
+      });
+      translateY.value = withTiming(0, {
+        duration: 300,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1.0)
+      });
+      scale.value = withTiming(nextScale, {
+        duration: 300,
+        easing: Easing.bezier(0.25, 0.1, 0.25, 1.0)
+      });
+    });
+  }, [scale, enableDoubleTapGesture, maxZoomScale, translateX, translateY]);
+  const zoomGesture = useMemo(() => {
+    return Gesture.Simultaneous(zoomPinchGesture, zoomPanGesture, doubleTapGesture);
+  }, [zoomPinchGesture, zoomPanGesture, doubleTapGesture]);
   const animatedStyle = useAnimatedStyle(() => {
     return {
       transform: [{
         translateY: translateY.value
+      }, {
+        translateX: translateX.value
+      }, {
+        scale: scale.value
       }]
     };
-  }, [translateY]);
+  });
   const backdropStyle = useAnimatedStyle(() => {
-    if (!animateBackdrop) {
+    if (!animateBackdrop || scale.value > 1) {
       return {
         opacity: 1
       };
@@ -122,19 +203,21 @@ export const useGestureImageViewer = ({
     return {
       opacity
     };
-  }, [animateBackdrop, translateY]);
+  }, [animateBackdrop]);
   return {
     // State
     currentIndex,
     dataLength,
     translateY,
     flatListRef,
+    isZoomed,
     // Actions
     goToPrevious,
     goToNext,
     goToIndex,
     // Gesture
-    panGesture,
+    dismissGesture,
+    zoomGesture,
     // FlatList handlers
     onMomentumScrollEnd,
     // Animated styles

package/lib/module/useGestureImageViewer.js.map

@@ -1 +1 @@
-{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","InteractionManager","useWindowDimensions","Gesture","interpolate","runOnJS","useAnimatedStyle","useSharedValue","withSpring","useGestureImageViewer","data","initialIndex","onIndexChange","onDismiss","width","customWidth","dismissThreshold","resistance","animateBackdrop","enableDismissGesture","enableSwipeGesture","screenWidth","currentIndex","setCurrentIndex","translateY","backdropOpacity","flatListRef","dataLength","length","value","current","runAfterInteractions","scrollToIndex","index","animated","cancel","onMomentumScrollEnd","event","contentOffset","nativeEvent","newIndex","Math","round","x","goToIndex","goToPrevious","goToNext","panGesture","Pan","minDistance","activeOffsetY","failOffsetX","onUpdate","translationY","onEnd","damping","stiffness","animatedStyle","transform","backdropStyle","opacity"],"sourceRoot":"../../src","sources":["useGestureImageViewer.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useCallback","useEffect","useMemo","useRef","useState","InteractionManager","useWindowDimensions","Gesture","Easing","interpolate","runOnJS","useAnimatedReaction","useAnimatedStyle","useSharedValue","withSpring","withTiming","useGestureImageViewer","data","initialIndex","onIndexChange","onDismiss","width","customWidth","dismissThreshold","resistance","animateBackdrop","enableDismissGesture","enableSwipeGesture","enableZoomGesture","enableDoubleTapGesture","enableZoomPanGesture","maxZoomScale","screenWidth","height","screenHeight","currentIndex","setCurrentIndex","isZoomed","setIsZoomed","initialTranslateY","initialTranslateX","startScale","translateY","translateX","scale","backdropOpacity","flatListRef","dataLength","length","value","currentScale","current","runAfterInteractions","scrollToIndex","index","animated","cancel","onMomentumScrollEnd","event","contentOffset","nativeEvent","newIndex","Math","round","x","goToIndex","goToPrevious","goToNext","dismissGesture","Pan","minDistance","averageTouches","activeOffsetY","failOffsetX","enabled","onUpdate","translationY","onEnd","damping","stiffness","zoomPinchGesture","Pinch","onBegin","duration","easing","bezier","zoomPanGesture","maxTranslateX","maxTranslateY","max","min","translationX","doubleTapGesture","Tap","numberOfTaps","nextScale","zoomGesture","Simultaneous","animatedStyle","transform","backdropStyle","opacity"],"sourceRoot":"../../src","sources":["useGestureImageViewer.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/src/GestureImageViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAWvD,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1C,IAAI,EACJ,WAAW,EACX,eAAe,EACf,aAAwB,EACxB,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAyE5B"}
+{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAWvD,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1C,IAAI,EACJ,WAAW,EACX,eAAe,EACf,aAAwB,EACxB,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CA4F5B"}

package/lib/typescript/src/types.d.ts

@@ -19,6 +19,10 @@ export interface GestureImageViewerProps<T = any> {
     backdropStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     animateBackdrop?: boolean;
+    enableZoomPanGesture?: boolean;
+    enableZoomGesture?: boolean;
+    enableDoubleTapGesture?: boolean;
+    maxZoomScale?: number;
 }
 export interface GestureState {
     currentIndex: number;

package/lib/typescript/src/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,GAAG;IAC9C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC5D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,YAAY,GAAG,UAAU,GAAG,IAAI,CAAC;CACjD"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAE3D,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,GAAG;IAC9C,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,YAAY,CAAC;IAC5D,eAAe,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,KAAK,KAAK,CAAC,YAAY,CAAC;IACvE,aAAa,CAAC,EAAE,GAAG,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACrC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAChC,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,YAAY,GAAG,UAAU,GAAG,IAAI,CAAC;CACjD"}

package/lib/typescript/src/useGestureImageViewer.d.ts

@@ -1,20 +1,32 @@
 import { type NativeScrollEvent, type NativeSyntheticEvent } from 'react-native';
 import type { GestureImageViewerProps } from './types';
 type UseGestureImageViewerProps<T = any> = Omit<GestureImageViewerProps<T>, 'renderImage' | 'renderContainer' | 'ListComponent' | 'listProps' | 'containerStyle' | 'backdropStyle'>;
-export declare const useGestureImageViewer: <T = any>({ data, initialIndex, onIndexChange, onDismiss, width: customWidth, dismissThreshold, resistance, animateBackdrop, enableDismissGesture, enableSwipeGesture, }: UseGestureImageViewerProps<T>) => {
+export declare const useGestureImageViewer: <T = any>({ data, initialIndex, onIndexChange, onDismiss, width: customWidth, dismissThreshold, resistance, animateBackdrop, enableDismissGesture, enableSwipeGesture, enableZoomGesture, enableDoubleTapGesture, enableZoomPanGesture, maxZoomScale, }: UseGestureImageViewerProps<T>) => {
     currentIndex: number;
     dataLength: number;
     translateY: import("react-native-reanimated").SharedValue<number>;
     flatListRef: import("react").RefObject<any>;
+    isZoomed: boolean;
     goToPrevious: () => void;
     goToNext: () => void;
     goToIndex: (index: number) => void;
-    panGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+    dismissGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+    zoomGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/gestureComposition").SimultaneousGesture;
     onMomentumScrollEnd: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
     animatedStyle: {
-        transform: {
+        transform: ({
             translateY: number;
-        }[];
+            translateX?: undefined;
+            scale?: undefined;
+        } | {
+            translateX: number;
+            translateY?: undefined;
+            scale?: undefined;
+        } | {
+            scale: number;
+            translateY?: undefined;
+            translateX?: undefined;
+        })[];
     };
     backdropStyle: {
         opacity: number;

package/lib/typescript/src/useGestureImageViewer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useGestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureImageViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AAGtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD,KAAK,0BAA0B,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAC7C,uBAAuB,CAAC,CAAC,CAAC,EAC1B,aAAa,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACvG,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,CAAC,GAAG,GAAG,EAAE,gKAa5C,0BAA0B,CAAC,CAAC,CAAC;;;;;;;uBA2DpB,MAAM;;iCAhBN,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;CAyGlD,CAAC"}
+{"version":3,"file":"useGestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/useGestureImageViewer.ts"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,iBAAiB,EACtB,KAAK,oBAAoB,EAE1B,MAAM,cAAc,CAAC;AAYtB,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAEvD,KAAK,0BAA0B,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,CAC7C,uBAAuB,CAAC,CAAC,CAAC,EAC1B,aAAa,GAAG,iBAAiB,GAAG,eAAe,GAAG,WAAW,GAAG,gBAAgB,GAAG,eAAe,CACvG,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,CAAC,GAAG,GAAG,EAAE,+OAiB5C,0BAA0B,CAAC,CAAC,CAAC;;;;;;;;uBA6FpB,MAAM;;;iCAjCN,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;CAwNlD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "react-native-gesture-image-viewer",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/GestureImageViewer.tsx

@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
-import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { useCallback, useMemo } from 'react';
+import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { FlatList, Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import type { GestureImageViewerProps } from './types';
 import { useGestureImageViewer } from './useGestureImageViewer';
@@ -29,7 +29,16 @@ export function GestureImageViewer<T = any>({
 
   const width = customWidth || screenWidth;
 
-  const { flatListRef, panGesture, onMomentumScrollEnd, animatedStyle, backdropStyle } = useGestureImageViewer({
+  const {
+    currentIndex,
+    flatListRef,
+    isZoomed,
+    dismissGesture,
+    zoomGesture,
+    onMomentumScrollEnd,
+    animatedStyle,
+    backdropStyle,
+  } = useGestureImageViewer({
     data,
     width,
     initialIndex,
@@ -38,20 +47,25 @@ export function GestureImageViewer<T = any>({
 
   const renderItem = useCallback(
     ({ item, index }: { item: T; index: number }) => {
+      const isActive = index === currentIndex;
+
       return (
         <Animated.View
-          style={{
-            width,
-            height: '100%',
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
+          style={[
+            {
+              width,
+              height: '100%',
+              justifyContent: 'center',
+              alignItems: 'center',
+            },
+            isActive && animatedStyle,
+          ]}
         >
           {renderImage(item, index)}
         </Animated.View>
       );
     },
-    [width, renderImage],
+    [width, renderImage, animatedStyle, currentIndex],
   );
 
   const getItemLayout = useCallback(
@@ -65,12 +79,16 @@ export function GestureImageViewer<T = any>({
 
   const keyExtractor = useCallback((item: T, index: number) => `image-${index}-${item}`, []);
 
+  const gesture = useMemo(() => {
+    return Gesture.Race(dismissGesture, zoomGesture);
+  }, [zoomGesture, dismissGesture]);
+
   const listComponent = (
     <GestureHandlerRootView>
-      <GestureDetector gesture={panGesture}>
+      <GestureDetector gesture={gesture}>
         <View style={[styles.container, containerStyle]}>
           <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
-          <Animated.View style={[styles.content, animatedStyle]}>
+          <View style={styles.content}>
             <ListComponent
               ref={flatListRef}
               data={data}
@@ -78,6 +96,7 @@ export function GestureImageViewer<T = any>({
               keyExtractor={keyExtractor}
               horizontal
               pagingEnabled
+              scrollEnabled={!isZoomed}
               showsHorizontalScrollIndicator={false}
               onMomentumScrollEnd={onMomentumScrollEnd}
               getItemLayout={getItemLayout}
@@ -89,7 +108,7 @@ export function GestureImageViewer<T = any>({
               {...(Platform.OS === 'web' && { dataSet: { 'paging-enabled-fix': true } })}
               {...listProps}
             />
-          </Animated.View>
+          </View>
           <WebPagingFix />
         </View>
       </GestureDetector>

package/src/types.ts

@@ -20,6 +20,10 @@ export interface GestureImageViewerProps<T = any> {
   backdropStyle?: StyleProp<ViewStyle>;
   containerStyle?: StyleProp<ViewStyle>;
   animateBackdrop?: boolean;
+  enableZoomPanGesture?: boolean;
+  enableZoomGesture?: boolean;
+  enableDoubleTapGesture?: boolean;
+  maxZoomScale?: number;
 }
 
 export interface GestureState {

package/src/useGestureImageViewer.ts

@@ -6,7 +6,16 @@ import {
   useWindowDimensions,
 } from 'react-native';
 import { Gesture } from 'react-native-gesture-handler';
-import { interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import {
+  Easing,
+  interpolate,
+  runOnJS,
+  useAnimatedReaction,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
 import type { GestureImageViewerProps } from './types';
 
 type UseGestureImageViewerProps<T = any> = Omit<
@@ -27,24 +36,45 @@ export const useGestureImageViewer = <T = any>({
   animateBackdrop = true,
   enableDismissGesture = true,
   enableSwipeGesture = true,
+  enableZoomGesture = true,
+  enableDoubleTapGesture = true,
+  enableZoomPanGesture = true,
+  maxZoomScale = 2,
 }: UseGestureImageViewerProps<T>) => {
-  const { width: screenWidth } = useWindowDimensions();
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const width = customWidth || screenWidth;
 
   const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const initialTranslateY = useSharedValue(0);
+  const initialTranslateX = useSharedValue(0);
+  const startScale = useSharedValue(1);
 
   const translateY = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const scale = useSharedValue(1);
   const backdropOpacity = useSharedValue(1);
 
   const flatListRef = useRef<any>(null);
 
   const dataLength = data?.length || 0;
 
+  useAnimatedReaction(
+    () => scale.value,
+    (currentScale) => {
+      runOnJS(setIsZoomed)(currentScale > 1);
+    },
+  );
+
   // 초기 위치 설정
   useEffect(() => {
     setCurrentIndex(initialIndex);
     translateY.value = 0;
+    translateX.value = 0;
+    scale.value = 1;
     backdropOpacity.value = 1;
+    startScale.value = 1;
 
     if (initialIndex <= 0 || !flatListRef.current) {
       return;
@@ -61,7 +91,7 @@ export const useGestureImageViewer = <T = any>({
     return () => {
       runAfterInteractions?.cancel();
     };
-  }, [initialIndex, translateY, backdropOpacity]);
+  }, [initialIndex, translateY, backdropOpacity, translateX, scale, startScale]);
 
   // 인덱스 변경 알림
   useEffect(() => {
@@ -80,9 +110,26 @@ export const useGestureImageViewer = <T = any>({
 
       if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
         setCurrentIndex(newIndex);
+        translateX.value = withTiming(0);
+        translateY.value = withTiming(0);
+        initialTranslateX.value = withTiming(0);
+        initialTranslateY.value = withTiming(0);
+        startScale.value = withTiming(1);
+        scale.value = withTiming(1);
       }
     },
-    [currentIndex, dataLength, width, enableSwipeGesture],
+    [
+      currentIndex,
+      dataLength,
+      width,
+      enableSwipeGesture,
+      translateX,
+      translateY,
+      scale,
+      initialTranslateX,
+      initialTranslateY,
+      startScale,
+    ],
   );
 
   const goToIndex = useCallback(
@@ -112,18 +159,19 @@ export const useGestureImageViewer = <T = any>({
     }
   }, [currentIndex, dataLength, goToIndex]);
 
-  const panGesture = useMemo(() => {
+  const dismissGesture = useMemo(() => {
     return Gesture.Pan()
       .minDistance(10)
+      .averageTouches(true)
       .activeOffsetY([-10, 10])
       .failOffsetX([-10, 10])
+      .enabled(!isZoomed)
       .onUpdate((event) => {
-        'worklet';
-
         translateY.value = event.translationY / resistance;
       })
       .onEnd((event) => {
         'worklet';
+
         if (event.translationY > dismissThreshold && enableDismissGesture && onDismiss) {
           runOnJS(onDismiss)();
           return;
@@ -134,24 +182,115 @@ export const useGestureImageViewer = <T = any>({
           stiffness: 150,
         });
       });
-  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance]);
+  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance, isZoomed]);
+
+  const zoomPinchGesture = useMemo(() => {
+    return Gesture.Pinch()
+      .enabled(enableZoomGesture)
+      .onBegin(() => {
+        startScale.value = scale.value;
+      })
+      .onUpdate((event) => {
+        scale.value = startScale.value * event.scale;
+      })
+      .onEnd(() => {
+        if (scale.value > maxZoomScale) {
+          scale.value = withTiming(maxZoomScale, {
+            duration: 300,
+            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
+          });
+          return;
+        }
+
+        if (scale.value < 1) {
+          scale.value = withTiming(1, {
+            duration: 300,
+            easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
+          });
+          translateX.value = withTiming(0);
+          translateY.value = withTiming(0);
+        }
+      });
+  }, [scale, enableZoomGesture, maxZoomScale, translateX, translateY, startScale]);
+
+  const zoomPanGesture = useMemo(() => {
+    return Gesture.Pan()
+      .enabled(enableZoomPanGesture && isZoomed)
+      .onBegin(() => {
+        initialTranslateX.value = translateX.value;
+        initialTranslateY.value = translateY.value;
+      })
+      .onUpdate((event) => {
+        'worklet';
+
+        if (scale.value > 1) {
+          const maxTranslateX = (width * scale.value - width) / 2;
+          const maxTranslateY = (screenHeight * scale.value - screenHeight) / 2;
+
+          translateX.value = Math.max(
+            -maxTranslateX,
+            Math.min(maxTranslateX, initialTranslateX.value + event.translationX),
+          );
+          translateY.value = Math.max(
+            -maxTranslateY,
+            Math.min(maxTranslateY, initialTranslateY.value + event.translationY),
+          );
+        }
+      });
+  }, [
+    translateX,
+    translateY,
+    enableZoomPanGesture,
+    isZoomed,
+    scale,
+    initialTranslateX,
+    initialTranslateY,
+    width,
+    screenHeight,
+  ]);
+
+  const doubleTapGesture = useMemo(() => {
+    return Gesture.Tap()
+      .enabled(enableDoubleTapGesture)
+      .numberOfTaps(2)
+      .onEnd(() => {
+        const nextScale = scale.value > 1 ? 1 : maxZoomScale;
+
+        translateX.value = withTiming(0, {
+          duration: 300,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
+        });
+        translateY.value = withTiming(0, {
+          duration: 300,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
+        });
+
+        scale.value = withTiming(nextScale, {
+          duration: 300,
+          easing: Easing.bezier(0.25, 0.1, 0.25, 1.0),
+        });
+      });
+  }, [scale, enableDoubleTapGesture, maxZoomScale, translateX, translateY]);
+
+  const zoomGesture = useMemo(() => {
+    return Gesture.Simultaneous(zoomPinchGesture, zoomPanGesture, doubleTapGesture);
+  }, [zoomPinchGesture, zoomPanGesture, doubleTapGesture]);
 
-  // 애니메이션 스타일
   const animatedStyle = useAnimatedStyle(() => {
     return {
-      transform: [{ translateY: translateY.value }],
+      transform: [{ translateY: translateY.value }, { translateX: translateX.value }, { scale: scale.value }],
     };
-  }, [translateY]);
+  });
 
   const backdropStyle = useAnimatedStyle(() => {
-    if (!animateBackdrop) {
+    if (!animateBackdrop || scale.value > 1) {
       return { opacity: 1 };
     }
 
     const opacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
 
     return { opacity };
-  }, [animateBackdrop, translateY]);
+  }, [animateBackdrop]);
 
   return {
     // State
@@ -159,6 +298,7 @@ export const useGestureImageViewer = <T = any>({
     dataLength,
     translateY,
     flatListRef,
+    isZoomed,
 
     // Actions
     goToPrevious,
@@ -166,7 +306,8 @@ export const useGestureImageViewer = <T = any>({
     goToIndex,
 
     // Gesture
-    panGesture,
+    dismissGesture,
+    zoomGesture,
 
     // FlatList handlers
     onMomentumScrollEnd,