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

package/src/useGestureImageViewer.ts

@@ -6,7 +6,18 @@ 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 { ImageViewerManagerState } from './ImageViewerManager';
+import { registry } from './ImageViewerRegistry';
 import type { GestureImageViewerProps } from './types';
 
 type UseGestureImageViewerProps<T = any> = Omit<
@@ -27,30 +38,92 @@ export const useGestureImageViewer = <T = any>({
   animateBackdrop = true,
   enableDismissGesture = true,
   enableSwipeGesture = true,
+  enableZoomGesture = true,
+  enableDoubleTapGesture = true,
+  enableZoomPanGesture = true,
+  maxZoomScale = 2,
+  id = 'default',
 }: 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 [managerState, setManagerState] = useState<ImageViewerManagerState>({
+    currentIndex: initialIndex,
+    dataLength: data?.length || 0,
+  });
+
+  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(() => {
+    const manager = registry.getManager(id);
+
+    if (!manager) {
+      return;
+    }
+
+    setManagerState(manager.getState());
+
+    return manager.subscribe(setManagerState);
+  }, [id]);
+
+  useEffect(() => {
+    const manager = registry.getManager(id);
+
+    if (!manager) {
+      return;
+    }
+
+    manager.setDataLength(dataLength);
+    manager.setEnableSwipeGesture(enableSwipeGesture);
+    manager.setCurrentIndex(initialIndex);
+    manager.notifyStateChange();
+  }, [dataLength, enableSwipeGesture, initialIndex, id]);
+
+  useEffect(() => {
+    const manager = registry.getManager(id);
+
+    if (!manager || !flatListRef.current) {
+      return;
+    }
+
+    manager.setFlatListRef(flatListRef.current);
+  }, [id]);
+
+  useEffect(() => {
+    onIndexChange?.(managerState.currentIndex);
+  }, [managerState.currentIndex, onIndexChange]);
+
   useEffect(() => {
-    setCurrentIndex(initialIndex);
     translateY.value = 0;
+    translateX.value = 0;
+    scale.value = 1;
     backdropOpacity.value = 1;
+    startScale.value = 1;
 
     if (initialIndex <= 0 || !flatListRef.current) {
       return;
     }
 
-    // FlatList 초기 위치 설정
     const runAfterInteractions = InteractionManager.runAfterInteractions(() => {
       flatListRef.current?.scrollToIndex({
         index: initialIndex,
@@ -61,14 +134,8 @@ export const useGestureImageViewer = <T = any>({
     return () => {
       runAfterInteractions?.cancel();
     };
-  }, [initialIndex, translateY, backdropOpacity]);
-
-  // 인덱스 변경 알림
-  useEffect(() => {
-    onIndexChange?.(currentIndex);
-  }, [currentIndex, onIndexChange]);
+  }, [initialIndex, translateY, backdropOpacity, translateX, scale, startScale]);
 
-  // FlatList 스크롤 핸들러
   const onMomentumScrollEnd = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       if (!enableSwipeGesture) {
@@ -78,52 +145,49 @@ export const useGestureImageViewer = <T = any>({
       const contentOffset = event.nativeEvent.contentOffset;
       const newIndex = Math.round(contentOffset.x / width);
 
-      if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
-        setCurrentIndex(newIndex);
-      }
-    },
-    [currentIndex, dataLength, width, enableSwipeGesture],
-  );
+      if (newIndex !== managerState.currentIndex && newIndex >= 0 && newIndex < dataLength) {
+        const manager = registry.getManager(id);
 
-  const goToIndex = useCallback(
-    (index: number) => {
-      if (index < 0 || index >= dataLength || !enableSwipeGesture) {
-        return;
-      }
+        if (manager) {
+          manager.setCurrentIndex(newIndex);
+        }
 
-      setCurrentIndex(index);
-      flatListRef.current?.scrollToIndex({
-        index,
-        animated: true,
-      });
+        translateX.value = withTiming(0);
+        translateY.value = withTiming(0);
+        initialTranslateX.value = withTiming(0);
+        initialTranslateY.value = withTiming(0);
+        startScale.value = withTiming(1);
+        scale.value = withTiming(1);
+      }
     },
-    [dataLength, enableSwipeGesture],
+    [
+      id,
+      managerState.currentIndex,
+      dataLength,
+      width,
+      enableSwipeGesture,
+      translateX,
+      translateY,
+      scale,
+      initialTranslateX,
+      initialTranslateY,
+      startScale,
+    ],
   );
 
-  const goToPrevious = useCallback(() => {
-    if (currentIndex > 0) {
-      goToIndex(currentIndex - 1);
-    }
-  }, [currentIndex, goToIndex]);
-
-  const goToNext = useCallback(() => {
-    if (currentIndex < dataLength - 1) {
-      goToIndex(currentIndex + 1);
-    }
-  }, [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,44 +198,128 @@ 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
-    currentIndex,
+    currentIndex: managerState.currentIndex,
     dataLength,
     translateY,
     flatListRef,
+    isZoomed,
 
-    // Actions
-    goToPrevious,
-    goToNext,
-    goToIndex,
-
-    // Gesture
-    panGesture,
+    dismissGesture,
+    zoomGesture,
 
-    // FlatList handlers
     onMomentumScrollEnd,
 
-    // Animated styles
     animatedStyle,
     backdropStyle,
   };

package/src/useImageViewerController.ts

@@ -0,0 +1,34 @@
+import { useEffect, useMemo, useState } from 'react';
+import type { ImageViewerManagerState } from './ImageViewerManager';
+import { registry } from './ImageViewerRegistry';
+
+export const useImageViewerController = (id = 'default') => {
+  const [state, setState] = useState<ImageViewerManagerState>({
+    currentIndex: 0,
+    dataLength: 0,
+  });
+
+  useEffect(() => {
+    const manager = registry.createManager(id);
+
+    if (!manager) {
+      return;
+    }
+
+    setState(manager.getState());
+
+    return manager.subscribe(setState);
+  }, [id]);
+
+  const manager = registry.getManager(id);
+
+  const noopFunction = useMemo(() => () => {}, []);
+
+  return {
+    goToIndex: manager?.goToIndex || noopFunction,
+    goToPrevious: manager?.goToPrevious || noopFunction,
+    goToNext: manager?.goToNext || noopFunction,
+    currentIndex: state.currentIndex,
+    totalCount: state.dataLength,
+  };
+};