react-native-gesture-image-viewer 0.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2025 saseungmin
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+# react-native-gesture-image-viewer
+
+react-native-gesture-image-viewer
+
+## Installation
+
+```sh
+npm install react-native-gesture-image-viewer
+```
+
+## Usage
+
+
+```js
+import { multiply } from 'react-native-gesture-image-viewer';
+
+// ...
+
+const result = await multiply(3, 7);
+```
+
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/GestureImageViewer.js

@@ -0,0 +1,121 @@
+"use strict";
+
+import { useCallback } from 'react';
+import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { 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";
+const WebPagingFix = () => {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("style", {
+    children: `[data-paging-enabled-fix] > div > div > div {height: 100%;}`
+  });
+};
+export function GestureImageViewer({
+  data,
+  renderImage,
+  renderContainer,
+  ListComponent = FlatList,
+  width: customWidth,
+  listProps,
+  backdropStyle: backdropStyleProps,
+  containerStyle,
+  initialIndex = 0,
+  ...props
+}) {
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const width = customWidth || screenWidth;
+  const {
+    flatListRef,
+    panGesture,
+    onMomentumScrollEnd,
+    animatedStyle,
+    backdropStyle
+  } = useGestureImageViewer({
+    data,
+    width,
+    initialIndex,
+    ...props
+  });
+  const renderItem = useCallback(({
+    item,
+    index
+  }) => {
+    return /*#__PURE__*/_jsx(Animated.View, {
+      style: {
+        width,
+        height: '100%',
+        justifyContent: 'center',
+        alignItems: 'center'
+      },
+      children: renderImage(item, index)
+    });
+  }, [width, renderImage]);
+  const getItemLayout = useCallback((_, index) => ({
+    length: width,
+    offset: width * index,
+    index
+  }), [width]);
+  const keyExtractor = useCallback((item, index) => `image-${index}-${item}`, []);
+  const listComponent = /*#__PURE__*/_jsx(GestureHandlerRootView, {
+    children: /*#__PURE__*/_jsx(GestureDetector, {
+      gesture: panGesture,
+      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],
+          children: /*#__PURE__*/_jsx(ListComponent, {
+            ref: flatListRef,
+            data: data,
+            renderItem: renderItem,
+            keyExtractor: keyExtractor,
+            horizontal: true,
+            pagingEnabled: true,
+            showsHorizontalScrollIndicator: false,
+            onMomentumScrollEnd: onMomentumScrollEnd,
+            getItemLayout: getItemLayout,
+            initialScrollIndex: initialIndex,
+            windowSize: 3,
+            maxToRenderPerBatch: 3,
+            removeClippedSubviews: true
+            // NOTE - https://github.com/necolas/react-native-web/issues/1299
+            ,
+            ...(Platform.OS === 'web' && {
+              dataSet: {
+                'paging-enabled-fix': true
+              }
+            }),
+            ...listProps
+          })
+        }), /*#__PURE__*/_jsx(WebPagingFix, {})]
+      })
+    })
+  });
+  return renderContainer ? renderContainer(listComponent) : listComponent;
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  content: {
+    flex: 1,
+    width: '100%',
+    height: '100%'
+  },
+  background: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'black'
+  }
+});
+//# sourceMappingURL=GestureImageViewer.js.map

package/lib/module/GestureImageViewer.js.map

@@ -0,0 +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":[]}

package/lib/module/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export { GestureImageViewer } from "./GestureImageViewer.js";
+//# sourceMappingURL=index.js.map

package/lib/module/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["GestureImageViewer"],"sourceRoot":"../../src","sources":["index.tsx"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,yBAAsB","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}

package/lib/module/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../src","sources":["types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/useGestureImageViewer.js

@@ -0,0 +1,145 @@
+"use strict";
+
+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';
+export const useGestureImageViewer = ({
+  data,
+  initialIndex = 0,
+  onIndexChange,
+  onDismiss,
+  width: customWidth,
+  dismissThreshold = 80,
+  resistance = 2,
+  // swipeThreshold = 0.5,
+  // velocityThreshold = 200,
+  animateBackdrop = true,
+  enableDismissGesture = true,
+  enableSwipeGesture = true
+}) => {
+  const {
+    width: screenWidth
+  } = useWindowDimensions();
+  const width = customWidth || screenWidth;
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+  const translateY = useSharedValue(0);
+  const backdropOpacity = useSharedValue(1);
+  const flatListRef = useRef(null);
+  const dataLength = data?.length || 0;
+
+  // 초기 위치 설정
+  useEffect(() => {
+    setCurrentIndex(initialIndex);
+    translateY.value = 0;
+    backdropOpacity.value = 1;
+    if (initialIndex <= 0 || !flatListRef.current) {
+      return;
+    }
+
+    // FlatList 초기 위치 설정
+    const runAfterInteractions = InteractionManager.runAfterInteractions(() => {
+      flatListRef.current?.scrollToIndex({
+        index: initialIndex,
+        animated: false
+      });
+    });
+    return () => {
+      runAfterInteractions?.cancel();
+    };
+  }, [initialIndex, translateY, backdropOpacity]);
+
+  // 인덱스 변경 알림
+  useEffect(() => {
+    onIndexChange?.(currentIndex);
+  }, [currentIndex, onIndexChange]);
+
+  // FlatList 스크롤 핸들러
+  const onMomentumScrollEnd = useCallback(event => {
+    if (!enableSwipeGesture) {
+      return;
+    }
+    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]);
+  const goToIndex = useCallback(index => {
+    if (index < 0 || index >= dataLength || !enableSwipeGesture) {
+      return;
+    }
+    setCurrentIndex(index);
+    flatListRef.current?.scrollToIndex({
+      index,
+      animated: true
+    });
+  }, [dataLength, enableSwipeGesture]);
+  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(() => {
+    return Gesture.Pan().minDistance(10).activeOffsetY([-10, 10]).failOffsetX([-10, 10]).onUpdate(event => {
+      'worklet';
+
+      translateY.value = event.translationY / resistance;
+    }).onEnd(event => {
+      'worklet';
+
+      if (event.translationY > dismissThreshold && enableDismissGesture && onDismiss) {
+        runOnJS(onDismiss)();
+        return;
+      }
+      translateY.value = withSpring(0, {
+        damping: 15,
+        stiffness: 150
+      });
+    });
+  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance]);
+
+  // 애니메이션 스타일
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{
+        translateY: translateY.value
+      }]
+    };
+  }, [translateY]);
+  const backdropStyle = useAnimatedStyle(() => {
+    if (!animateBackdrop) {
+      return {
+        opacity: 1
+      };
+    }
+    const opacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
+    return {
+      opacity
+    };
+  }, [animateBackdrop, translateY]);
+  return {
+    // State
+    currentIndex,
+    dataLength,
+    translateY,
+    flatListRef,
+    // Actions
+    goToPrevious,
+    goToNext,
+    goToIndex,
+    // Gesture
+    panGesture,
+    // FlatList handlers
+    onMomentumScrollEnd,
+    // Animated styles
+    animatedStyle,
+    backdropStyle
+  };
+};
+//# sourceMappingURL=useGestureImageViewer.js.map

package/lib/module/useGestureImageViewer.js.map

@@ -0,0 +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":[]}

package/lib/typescript/package.json

@@ -0,0 +1 @@
+{"type":"module"}

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

@@ -0,0 +1,3 @@
+import type { GestureImageViewerProps } from './types';
+export declare function GestureImageViewer<T = any>({ data, renderImage, renderContainer, ListComponent, width: customWidth, listProps, backdropStyle: backdropStyleProps, containerStyle, initialIndex, ...props }: GestureImageViewerProps<T>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=GestureImageViewer.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,3 @@
+export { GestureImageViewer } from './GestureImageViewer';
+export type { GestureImageViewerProps } from './types';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC"}

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

@@ -0,0 +1,29 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+export interface GestureImageViewerProps<T = any> {
+    data: T[];
+    initialIndex?: number;
+    onIndexChange?: (index: number) => void;
+    onDismiss?: () => void;
+    renderImage: (item: T, index: number) => React.ReactElement;
+    renderContainer?: (children: React.ReactElement) => React.ReactElement;
+    ListComponent?: any;
+    width?: number;
+    dismissThreshold?: number;
+    swipeThreshold?: number;
+    velocityThreshold?: number;
+    enableDismissGesture?: boolean;
+    enableSwipeGesture?: boolean;
+    resistance?: number;
+    listProps?: any;
+    backdropStyle?: StyleProp<ViewStyle>;
+    containerStyle?: StyleProp<ViewStyle>;
+    animateBackdrop?: boolean;
+}
+export interface GestureState {
+    currentIndex: number;
+    translateY: SharedValue<number>;
+    isGestureActive: boolean;
+    lockDirection: 'horizontal' | 'vertical' | null;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,24 @@
+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>) => {
+    currentIndex: number;
+    dataLength: number;
+    translateY: import("react-native-reanimated").SharedValue<number>;
+    flatListRef: import("react").RefObject<any>;
+    goToPrevious: () => void;
+    goToNext: () => void;
+    goToIndex: (index: number) => void;
+    panGesture: import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture;
+    onMomentumScrollEnd: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    animatedStyle: {
+        transform: {
+            translateY: number;
+        }[];
+    };
+    backdropStyle: {
+        opacity: number;
+    };
+};
+export {};
+//# sourceMappingURL=useGestureImageViewer.d.ts.map

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

@@ -0,0 +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"}

package/package.json

@@ -0,0 +1,127 @@
+{
+  "name": "react-native-gesture-image-viewer",
+  "version": "0.1.0",
+  "description": "react-native-gesture-image-viewer",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-gesture-image-viewer-example run",
+    "test": "jest",
+    "typecheck": "tsc",
+    "lint": "biome format --write",
+    "clean": "del-cli lib",
+    "build": "bob build",
+    "changeset": "changeset"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saseungmin/react-native-gesture-image-viewer.git"
+  },
+  "author": "saseungmin <dbd02169@naver.com> (https://github.com/saseungmin)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/saseungmin/react-native-gesture-image-viewer/issues"
+  },
+  "homepage": "https://github.com/saseungmin/react-native-gesture-image-viewer#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.27.7",
+    "@biomejs/biome": "^2.0.6",
+    "@changesets/cli": "^2.29.5",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@evilmartians/lefthook": "^1.5.0",
+    "@react-native/babel-preset": "0.78.2",
+    "@types/babel__core": "^7",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^19.0.12",
+    "commitlint": "^19.6.1",
+    "del-cli": "^5.1.0",
+    "jest": "^29.7.0",
+    "react": "19.0.0",
+    "react-native": "0.79.4",
+    "react-native-builder-bob": "^0.40.12",
+    "react-native-gesture-handler": "^2.24.0",
+    "react-native-reanimated": "^3.18.0",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.75.0",
+    "react-native-gesture-handler": ">=2.24.0",
+    "react-native-reanimated": ">=3.0.0"
+  },
+  "workspaces": [
+    ".",
+    "example"
+  ],
+  "packageManager": "yarn@4.9.2",
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "create-react-native-library": {
+    "languages": "js",
+    "type": "library",
+    "version": "0.51.1"
+  }
+}

package/src/GestureImageViewer.tsx

@@ -0,0 +1,119 @@
+import { useCallback } from 'react';
+import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
+import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import Animated from 'react-native-reanimated';
+import type { GestureImageViewerProps } from './types';
+import { useGestureImageViewer } from './useGestureImageViewer';
+
+const WebPagingFix = () => {
+  if (Platform.OS !== 'web') {
+    return null;
+  }
+
+  return <style>{`[data-paging-enabled-fix] > div > div > div {height: 100%;}`}</style>;
+};
+
+export function GestureImageViewer<T = any>({
+  data,
+  renderImage,
+  renderContainer,
+  ListComponent = FlatList,
+  width: customWidth,
+  listProps,
+  backdropStyle: backdropStyleProps,
+  containerStyle,
+  initialIndex = 0,
+  ...props
+}: GestureImageViewerProps<T>) {
+  const { width: screenWidth } = useWindowDimensions();
+
+  const width = customWidth || screenWidth;
+
+  const { flatListRef, panGesture, onMomentumScrollEnd, animatedStyle, backdropStyle } = useGestureImageViewer({
+    data,
+    width,
+    initialIndex,
+    ...props,
+  });
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: T; index: number }) => {
+      return (
+        <Animated.View
+          style={{
+            width,
+            height: '100%',
+            justifyContent: 'center',
+            alignItems: 'center',
+          }}
+        >
+          {renderImage(item, index)}
+        </Animated.View>
+      );
+    },
+    [width, renderImage],
+  );
+
+  const getItemLayout = useCallback(
+    (_: any, index: number) => ({
+      length: width,
+      offset: width * index,
+      index,
+    }),
+    [width],
+  );
+
+  const keyExtractor = useCallback((item: T, index: number) => `image-${index}-${item}`, []);
+
+  const listComponent = (
+    <GestureHandlerRootView>
+      <GestureDetector gesture={panGesture}>
+        <View style={[styles.container, containerStyle]}>
+          <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
+          <Animated.View style={[styles.content, animatedStyle]}>
+            <ListComponent
+              ref={flatListRef}
+              data={data}
+              renderItem={renderItem}
+              keyExtractor={keyExtractor}
+              horizontal
+              pagingEnabled
+              showsHorizontalScrollIndicator={false}
+              onMomentumScrollEnd={onMomentumScrollEnd}
+              getItemLayout={getItemLayout}
+              initialScrollIndex={initialIndex}
+              windowSize={3}
+              maxToRenderPerBatch={3}
+              removeClippedSubviews={true}
+              // NOTE - https://github.com/necolas/react-native-web/issues/1299
+              {...(Platform.OS === 'web' && { dataSet: { 'paging-enabled-fix': true } })}
+              {...listProps}
+            />
+          </Animated.View>
+          <WebPagingFix />
+        </View>
+      </GestureDetector>
+    </GestureHandlerRootView>
+  );
+
+  return renderContainer ? renderContainer(listComponent) : listComponent;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
+  },
+  background: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'black',
+  },
+});

package/src/index.tsx

@@ -0,0 +1,2 @@
+export { GestureImageViewer } from './GestureImageViewer';
+export type { GestureImageViewerProps } from './types';

package/src/types.ts

@@ -0,0 +1,30 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+
+export interface GestureImageViewerProps<T = any> {
+  data: T[];
+  initialIndex?: number;
+  onIndexChange?: (index: number) => void;
+  onDismiss?: () => void;
+  renderImage: (item: T, index: number) => React.ReactElement;
+  renderContainer?: (children: React.ReactElement) => React.ReactElement;
+  ListComponent?: any; // FlatList, FlashList 등
+  width?: number;
+  dismissThreshold?: number;
+  swipeThreshold?: number;
+  velocityThreshold?: number;
+  enableDismissGesture?: boolean;
+  enableSwipeGesture?: boolean;
+  resistance?: number;
+  listProps?: any; // FlatList, FlashList에 전달할 추가 props
+  backdropStyle?: StyleProp<ViewStyle>;
+  containerStyle?: StyleProp<ViewStyle>;
+  animateBackdrop?: boolean;
+}
+
+export interface GestureState {
+  currentIndex: number;
+  translateY: SharedValue<number>;
+  isGestureActive: boolean;
+  lockDirection: 'horizontal' | 'vertical' | null;
+}

package/src/useGestureImageViewer.ts

@@ -0,0 +1,178 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
+  InteractionManager,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  useWindowDimensions,
+} from 'react-native';
+import { Gesture } from 'react-native-gesture-handler';
+import { interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import type { GestureImageViewerProps } from './types';
+
+type UseGestureImageViewerProps<T = any> = Omit<
+  GestureImageViewerProps<T>,
+  'renderImage' | 'renderContainer' | 'ListComponent' | 'listProps' | 'containerStyle' | 'backdropStyle'
+>;
+
+export const useGestureImageViewer = <T = any>({
+  data,
+  initialIndex = 0,
+  onIndexChange,
+  onDismiss,
+  width: customWidth,
+  dismissThreshold = 80,
+  resistance = 2,
+  // swipeThreshold = 0.5,
+  // velocityThreshold = 200,
+  animateBackdrop = true,
+  enableDismissGesture = true,
+  enableSwipeGesture = true,
+}: UseGestureImageViewerProps<T>) => {
+  const { width: screenWidth } = useWindowDimensions();
+  const width = customWidth || screenWidth;
+
+  const [currentIndex, setCurrentIndex] = useState(initialIndex);
+
+  const translateY = useSharedValue(0);
+  const backdropOpacity = useSharedValue(1);
+
+  const flatListRef = useRef<any>(null);
+
+  const dataLength = data?.length || 0;
+
+  // 초기 위치 설정
+  useEffect(() => {
+    setCurrentIndex(initialIndex);
+    translateY.value = 0;
+    backdropOpacity.value = 1;
+
+    if (initialIndex <= 0 || !flatListRef.current) {
+      return;
+    }
+
+    // FlatList 초기 위치 설정
+    const runAfterInteractions = InteractionManager.runAfterInteractions(() => {
+      flatListRef.current?.scrollToIndex({
+        index: initialIndex,
+        animated: false,
+      });
+    });
+
+    return () => {
+      runAfterInteractions?.cancel();
+    };
+  }, [initialIndex, translateY, backdropOpacity]);
+
+  // 인덱스 변경 알림
+  useEffect(() => {
+    onIndexChange?.(currentIndex);
+  }, [currentIndex, onIndexChange]);
+
+  // FlatList 스크롤 핸들러
+  const onMomentumScrollEnd = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (!enableSwipeGesture) {
+        return;
+      }
+
+      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],
+  );
+
+  const goToIndex = useCallback(
+    (index: number) => {
+      if (index < 0 || index >= dataLength || !enableSwipeGesture) {
+        return;
+      }
+
+      setCurrentIndex(index);
+      flatListRef.current?.scrollToIndex({
+        index,
+        animated: true,
+      });
+    },
+    [dataLength, enableSwipeGesture],
+  );
+
+  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(() => {
+    return Gesture.Pan()
+      .minDistance(10)
+      .activeOffsetY([-10, 10])
+      .failOffsetX([-10, 10])
+      .onUpdate((event) => {
+        'worklet';
+
+        translateY.value = event.translationY / resistance;
+      })
+      .onEnd((event) => {
+        'worklet';
+        if (event.translationY > dismissThreshold && enableDismissGesture && onDismiss) {
+          runOnJS(onDismiss)();
+          return;
+        }
+
+        translateY.value = withSpring(0, {
+          damping: 15,
+          stiffness: 150,
+        });
+      });
+  }, [translateY, dismissThreshold, enableDismissGesture, onDismiss, resistance]);
+
+  // 애니메이션 스타일
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: translateY.value }],
+    };
+  }, [translateY]);
+
+  const backdropStyle = useAnimatedStyle(() => {
+    if (!animateBackdrop) {
+      return { opacity: 1 };
+    }
+
+    const opacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
+
+    return { opacity };
+  }, [animateBackdrop, translateY]);
+
+  return {
+    // State
+    currentIndex,
+    dataLength,
+    translateY,
+    flatListRef,
+
+    // Actions
+    goToPrevious,
+    goToNext,
+    goToIndex,
+
+    // Gesture
+    panGesture,
+
+    // FlatList handlers
+    onMomentumScrollEnd,
+
+    // Animated styles
+    animatedStyle,
+    backdropStyle,
+  };
+};