react-native-gesture-image-viewer 0.5.0 → 0.5.2

package/README.md

@@ -16,7 +16,7 @@ Existing libraries often have limited customization options or performance issue
 - ✅ **External Control API** - Programmatic control from buttons or other components
 - ✅ **Multi-Instance Management** - ID-based independent management of multiple viewers
 - ✅ **Flexible Integration** - Use with FlatList, FlashList, Expo Image, FastImage, and more
-- ✅ **Full TypeScript Support** - Type safety and enhanced developer experience
+- ✅ **Full TypeScript Support** - Enhanced developer experience with smart type inference
 - ✅ **Cross-Platform** - iOS, Android, and Web support
 - ✅ **Easy-to-Use API** - Intuitive and simple implementation without complex setup
 - ✅ **Various Environment Support** - Expo Go and New Architecture support
@@ -168,17 +168,19 @@ function App() {
 
 #### List Components
 
-Support for `ScrollView`, `FlatList`, `FlashList`, and other list components through the `ListComponent` prop.   
-You can also customize the props of each supported list component through `listProps`.
+Support for any list component like `ScrollView`, `FlatList`, `FlashList` through the `ListComponent` prop.   
+The `listProps` provides **type inference based on the selected list component**, ensuring accurate autocompletion and type safety in your IDE.
 
 ```tsx
+import { FlashList } from '@shopify/flash-list';
+
 function App() {
   return (
     <GestureImageViewer
       data={images}
-      ListComponent={FlatList}
+      ListComponent={FlashList}
       listProps={{
-        // ....
+        // ✅ FlashList props autocompletion
       }}
     />
   );

package/lib/module/GestureImageViewer.js

@@ -2,11 +2,11 @@
 
 import { useCallback, useEffect, useMemo } from 'react';
 import { Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { FlatList, Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated from 'react-native-reanimated';
 import { registry } from "./ImageViewerRegistry.js";
 import { useGestureImageViewer } from "./useGestureImageViewer.js";
-import { isFlatListLike, isScrollViewLike } from "./utils.js";
+import { isFlashListLike, isFlatListLike, isScrollViewLike } from "./utils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const WebPagingFix = () => {
   if (Platform.OS !== 'web') {
@@ -21,7 +21,7 @@ export function GestureImageViewer({
   data,
   renderImage,
   renderContainer,
-  ListComponent = FlatList,
+  ListComponent,
   width: customWidth,
   listProps,
   backdropStyle: backdropStyleProps,
@@ -30,6 +30,7 @@ export function GestureImageViewer({
   itemSpacing = 0,
   ...props
 }) {
+  const Component = ListComponent;
   const {
     width: screenWidth
   } = useWindowDimensions();
@@ -98,7 +99,7 @@ export function GestureImageViewer({
           style: [styles.background, backdropStyleProps, backdropStyle]
         }), /*#__PURE__*/_jsx(Animated.View, {
           style: [styles.content, animatedStyle],
-          children: isScrollViewLike(ListComponent) ? /*#__PURE__*/_jsx(ListComponent, {
+          children: isScrollViewLike(Component) ? /*#__PURE__*/_jsx(Component, {
             ref: listRef,
             ...commonProps,
             ...listProps,
@@ -106,19 +107,19 @@ export function GestureImageViewer({
               item,
               index
             }))
-          }) : isFlatListLike(ListComponent) && /*#__PURE__*/_jsx(ListComponent, {
+          }) : isFlatListLike(Component) && /*#__PURE__*/_jsx(Component, {
             ref: listRef,
             ...commonProps,
             data: data,
             renderItem: renderItem,
             initialScrollIndex: initialIndex,
             keyExtractor: keyExtractor,
-            estimatedItemSize: width + itemSpacing,
             windowSize: 3,
             maxToRenderPerBatch: 3,
-            getItemLayout: getItemLayout
-            // NOTE - https://github.com/necolas/react-native-web/issues/1299
-            ,
+            getItemLayout: getItemLayout,
+            ...(isFlashListLike(Component) && {
+              estimatedItemSize: width + itemSpacing
+            }),
             ...(Platform.OS === 'web' && {
               dataSet: {
                 'paging-enabled-fix': true

package/lib/module/GestureImageViewer.js.map

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

package/lib/module/utils.js

@@ -6,6 +6,12 @@ export const isScrollViewLike = component => {
   return component === RNScrollView || component === GestureScrollView;
 };
 export const isFlatListLike = component => {
+  if (component === RNFlatList || component === GestureFlatList || isFlashListLike(component)) {
+    return true;
+  }
+  return false;
+};
+export const isFlashListLike = component => {
   try {
     const FlashList = require('@shopify/flash-list')?.FlashList;
     if (FlashList && component === FlashList) {
@@ -14,9 +20,6 @@ export const isFlatListLike = component => {
   } catch {
     // do nothing
   }
-  if (component === RNFlatList || component === GestureFlatList) {
-    return true;
-  }
   return component?.name === 'FlashList';
 };
 //# sourceMappingURL=utils.js.map

package/lib/module/utils.js.map

@@ -1 +1 @@
-{"version":3,"names":["FlatList","RNFlatList","ScrollView","RNScrollView","GestureFlatList","GestureScrollView","isScrollViewLike","component","isFlatListLike","FlashList","require","name"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":";;AAAA,SAASA,QAAQ,IAAIC,UAAU,EAAEC,UAAU,IAAIC,YAAY,QAAQ,cAAc;AACjF,SAASH,QAAQ,IAAII,eAAe,EAAEF,UAAU,IAAIG,iBAAiB,QAAQ,8BAA8B;AAE3G,OAAO,MAAMC,gBAAgB,GAAIC,SAAc,IAAuC;EACpF,OAAOA,SAAS,KAAKJ,YAAY,IAAII,SAAS,KAAKF,iBAAiB;AACtE,CAAC;AAED,OAAO,MAAMG,cAAc,GAAID,SAAc,IAAqC;EAChF,IAAI;IACF,MAAME,SAAS,GAAGC,OAAO,CAAC,qBAAqB,CAAC,EAAED,SAAS;IAE3D,IAAIA,SAAS,IAAIF,SAAS,KAAKE,SAAS,EAAE;MACxC,OAAO,IAAI;IACb;EACF,CAAC,CAAC,MAAM;IACN;EAAA;EAGF,IAAIF,SAAS,KAAKN,UAAU,IAAIM,SAAS,KAAKH,eAAe,EAAE;IAC7D,OAAO,IAAI;EACb;EAEA,OAAOG,SAAS,EAAEI,IAAI,KAAK,WAAW;AACxC,CAAC","ignoreList":[]}
+{"version":3,"names":["FlatList","RNFlatList","ScrollView","RNScrollView","GestureFlatList","GestureScrollView","isScrollViewLike","component","isFlatListLike","isFlashListLike","FlashList","require","name"],"sourceRoot":"../../src","sources":["utils.ts"],"mappings":";;AAAA,SAASA,QAAQ,IAAIC,UAAU,EAAEC,UAAU,IAAIC,YAAY,QAAQ,cAAc;AACjF,SAASH,QAAQ,IAAII,eAAe,EAAEF,UAAU,IAAIG,iBAAiB,QAAQ,8BAA8B;AAG3G,OAAO,MAAMC,gBAAgB,GAAIC,SAAc,IAAuC;EACpF,OAAOA,SAAS,KAAKJ,YAAY,IAAII,SAAS,KAAKF,iBAAiB;AACtE,CAAC;AAED,OAAO,MAAMG,cAAc,GAAID,SAAc,IAAqC;EAChF,IAAIA,SAAS,KAAKN,UAAU,IAAIM,SAAS,KAAKH,eAAe,IAAIK,eAAe,CAACF,SAAS,CAAC,EAAE;IAC3F,OAAO,IAAI;EACb;EAEA,OAAO,KAAK;AACd,CAAC;AAED,OAAO,MAAME,eAAe,GAAIF,SAAc,IAAuB;EACnE,IAAI;IACF,MAAMG,SAAS,GAAGC,OAAO,CAAC,qBAAqB,CAAC,EAAED,SAAS;IAE3D,IAAIA,SAAS,IAAIH,SAAS,KAAKG,SAAS,EAAE;MACxC,OAAO,IAAI;IACb;EACF,CAAC,CAAC,MAAM;IACN;EAAA;EAGF,OAAOH,SAAS,EAAEK,IAAI,KAAK,WAAW;AACxC,CAAC","ignoreList":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAYvD,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1C,EAAc,EACd,IAAI,EACJ,WAAW,EACX,eAAe,EACf,aAAwB,EACxB,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,CAAC,CAAC,2CAiH5B"}
+{"version":3,"file":"GestureImageViewer.d.ts","sourceRoot":"","sources":["../../../src/GestureImageViewer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,QAAQ,EAAyE,MAAM,cAAc,CAAC;AAIpH,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAYvD,wBAAgB,kBAAkB,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,QAAQ,EAAE,EAChE,EAAc,EACd,IAAI,EACJ,WAAW,EACX,eAAe,EACf,aAAa,EACb,KAAK,EAAE,WAAW,EAClB,SAAS,EACT,aAAa,EAAE,kBAAkB,EACjC,cAAc,EACd,YAAgB,EAChB,WAAe,EACf,GAAG,KAAK,EACT,EAAE,uBAAuB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAmHhC"}

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

@@ -1,6 +1,11 @@
-import type { StyleProp, ViewStyle } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-export interface GestureImageViewerProps<T = any> {
+import type React from 'react';
+import type { FlatList as RNFlatList, ScrollView as RNScrollView, StyleProp, ViewStyle } from 'react-native';
+import type { FlatList as GHFlatList, ScrollView as GHScrollView } from 'react-native-gesture-handler';
+export type FlatListComponent = typeof RNFlatList | typeof GHFlatList;
+export type ScrollViewComponent = typeof RNScrollView | typeof GHScrollView;
+type GetComponentProps<T> = T extends React.ComponentType<infer P> ? P : never;
+type ConditionalListProps<LC> = LC extends FlatListComponent ? React.ComponentProps<LC> : LC extends ScrollViewComponent ? React.ComponentProps<LC> : GetComponentProps<LC>;
+export interface GestureImageViewerProps<T = any, LC = typeof RNFlatList> {
     id?: string;
     data: T[];
     initialIndex?: number;
@@ -8,15 +13,13 @@ export interface GestureImageViewerProps<T = any> {
     onDismiss?: () => void;
     renderImage: (item: T, index: number) => React.ReactElement;
     renderContainer?: (children: React.ReactElement) => React.ReactElement;
-    ListComponent?: any;
+    ListComponent: LC;
     width?: number;
     dismissThreshold?: number;
-    swipeThreshold?: number;
-    velocityThreshold?: number;
     enableDismissGesture?: boolean;
     enableSwipeGesture?: boolean;
     resistance?: number;
-    listProps?: any;
+    listProps?: Partial<ConditionalListProps<LC>>;
     backdropStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     animateBackdrop?: boolean;
@@ -26,10 +29,5 @@ export interface GestureImageViewerProps<T = any> {
     maxZoomScale?: number;
     itemSpacing?: number;
 }
-export interface GestureState {
-    currentIndex: number;
-    translateY: SharedValue<number>;
-    isGestureActive: boolean;
-    lockDirection: 'horizontal' | 'vertical' | null;
-}
+export {};
 //# sourceMappingURL=types.d.ts.map

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,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,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;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;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,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,QAAQ,IAAI,UAAU,EAAE,UAAU,IAAI,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAC7G,OAAO,KAAK,EAAE,QAAQ,IAAI,UAAU,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEvG,MAAM,MAAM,iBAAiB,GAAG,OAAO,UAAU,GAAG,OAAO,UAAU,CAAC;AACtE,MAAM,MAAM,mBAAmB,GAAG,OAAO,YAAY,GAAG,OAAO,YAAY,CAAC;AAE5E,KAAK,iBAAiB,CAAC,CAAC,IAAI,CAAC,SAAS,KAAK,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;AAE/E,KAAK,oBAAoB,CAAC,EAAE,IAAI,EAAE,SAAS,iBAAiB,GACxD,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,GACxB,EAAE,SAAS,mBAAmB,GAC5B,KAAK,CAAC,cAAc,CAAC,EAAE,CAAC,GACxB,iBAAiB,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,uBAAuB,CAAC,CAAC,GAAG,GAAG,EAAE,EAAE,GAAG,OAAO,UAAU;IACtE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,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,EAAE,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAG1B,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC,EAAE,CAAC,CAAC,CAAC;IAC9C,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;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

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

@@ -1,4 +1,5 @@
-import { FlatList as RNFlatList, ScrollView as RNScrollView } from 'react-native';
-export declare const isScrollViewLike: (component: any) => component is typeof RNScrollView;
-export declare const isFlatListLike: (component: any) => component is typeof RNFlatList;
+import type { FlatListComponent, ScrollViewComponent } from './types';
+export declare const isScrollViewLike: (component: any) => component is ScrollViewComponent;
+export declare const isFlatListLike: (component: any) => component is FlatListComponent;
+export declare const isFlashListLike: (component: any) => component is any;
 //# sourceMappingURL=utils.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,IAAI,UAAU,EAAE,UAAU,IAAI,YAAY,EAAE,MAAM,cAAc,CAAC;AAGlF,eAAO,MAAM,gBAAgB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,OAAO,YAErE,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,OAAO,UAgBnE,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/utils.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEtE,eAAO,MAAM,gBAAgB,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,mBAE9D,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,iBAM5D,CAAC;AAEF,eAAO,MAAM,eAAe,GAAI,WAAW,GAAG,KAAG,SAAS,IAAI,GAY7D,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-gesture-image-viewer",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "🖼️ A highly customizable and easy-to-use React Native image viewer with gesture support and external controls",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -13,7 +13,6 @@
     "./package.json": "./package.json"
   },
   "files": [
-    "src",
     "lib",
     "android",
     "ios",

package/src/GestureImageViewer.tsx

@@ -1,163 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { Platform, type ScrollViewProps, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { FlatList, Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
-import Animated from 'react-native-reanimated';
-import { registry } from './ImageViewerRegistry';
-import type { GestureImageViewerProps } from './types';
-import { useGestureImageViewer } from './useGestureImageViewer';
-import { isFlatListLike, isScrollViewLike } from './utils';
-
-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>({
-  id = 'default',
-  data,
-  renderImage,
-  renderContainer,
-  ListComponent = FlatList,
-  width: customWidth,
-  listProps,
-  backdropStyle: backdropStyleProps,
-  containerStyle,
-  initialIndex = 0,
-  itemSpacing = 0,
-  ...props
-}: GestureImageViewerProps<T>) {
-  const { width: screenWidth } = useWindowDimensions();
-
-  const width = customWidth || screenWidth;
-
-  const { listRef, isZoomed, dismissGesture, zoomGesture, onMomentumScrollEnd, animatedStyle, backdropStyle } =
-    useGestureImageViewer({
-      id,
-      data,
-      width,
-      initialIndex,
-      itemSpacing,
-      ...props,
-    });
-
-  const renderItem = useCallback(
-    ({ item, index }: { item: T; index: number }) => {
-      return (
-        <View
-          key={typeof item === 'string' ? item : index}
-          style={[
-            {
-              width: width,
-              height: '100%',
-              justifyContent: 'center',
-              alignItems: 'center',
-              marginHorizontal: itemSpacing / 2,
-            },
-          ]}
-        >
-          {renderImage(item, index)}
-        </View>
-      );
-    },
-    [width, itemSpacing, renderImage],
-  );
-
-  const getItemLayout = useCallback(
-    (_: any, index: number) => ({
-      length: width + itemSpacing,
-      offset: (width + itemSpacing) * index,
-      index,
-    }),
-    [width, itemSpacing],
-  );
-
-  const keyExtractor = useCallback(
-    (item: T, index: number) => (typeof item === 'string' ? item : `image-${index}`),
-    [],
-  );
-
-  const gesture = useMemo(() => {
-    return Gesture.Race(dismissGesture, zoomGesture);
-  }, [zoomGesture, dismissGesture]);
-
-  useEffect(() => {
-    registry.createManager(id);
-
-    return () => registry.deleteManager(id);
-  }, [id]);
-
-  const commonProps: ScrollViewProps = useMemo(
-    () => ({
-      horizontal: true,
-      scrollEnabled: !isZoomed,
-      showsHorizontalScrollIndicator: false,
-      onMomentumScrollEnd: onMomentumScrollEnd,
-      snapToInterval: width + itemSpacing,
-      snapToAlignment: 'center',
-      decelerationRate: 'fast',
-      scrollEventThrottle: 16,
-      removeClippedSubviews: true,
-    }),
-    [width, itemSpacing, isZoomed, onMomentumScrollEnd],
-  );
-
-  const listComponent = (
-    <GestureHandlerRootView>
-      <GestureDetector gesture={gesture}>
-        <View style={[styles.container, containerStyle]}>
-          <Animated.View style={[styles.background, backdropStyleProps, backdropStyle]} />
-          <Animated.View style={[styles.content, animatedStyle]}>
-            {isScrollViewLike(ListComponent) ? (
-              <ListComponent ref={listRef} {...commonProps} {...listProps}>
-                {data.map((item, index) => renderItem({ item, index }))}
-              </ListComponent>
-            ) : (
-              isFlatListLike(ListComponent) && (
-                <ListComponent
-                  ref={listRef}
-                  {...commonProps}
-                  data={data}
-                  renderItem={renderItem}
-                  initialScrollIndex={initialIndex}
-                  keyExtractor={keyExtractor}
-                  estimatedItemSize={width + itemSpacing}
-                  windowSize={3}
-                  maxToRenderPerBatch={3}
-                  getItemLayout={getItemLayout}
-                  // 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/ImageViewerManager.ts

@@ -1,103 +0,0 @@
-export type ImageViewerManagerState = {
-  currentIndex: number;
-  dataLength: number;
-};
-
-class ImageViewerManager {
-  private currentIndex = 0;
-  private dataLength = 0;
-  private width = 0;
-  private listRef: any | null = null;
-  private enableSwipeGesture = true;
-  private listeners = new Set<(state: ImageViewerManagerState) => void>();
-
-  // private updateState(newState: Partial<any>) {
-  //   Object.assign(this, newState);
-  //   this.notifyListeners();
-  // }
-
-  private notifyListeners() {
-    const state = this.getState();
-
-    this.listeners.forEach((listener) => listener(state));
-  }
-
-  subscribe(listener: (state: ImageViewerManagerState) => void) {
-    this.listeners.add(listener);
-
-    return () => {
-      this.listeners.delete(listener);
-    };
-  }
-
-  getState() {
-    return {
-      currentIndex: this.currentIndex,
-      dataLength: this.dataLength,
-    };
-  }
-
-  setWidth(width: number) {
-    this.width = width;
-  }
-
-  setListRef(ref: any) {
-    this.listRef = ref;
-  }
-
-  setDataLength(length: number) {
-    this.dataLength = length;
-  }
-
-  setEnableSwipeGesture(enabled: boolean) {
-    this.enableSwipeGesture = enabled;
-  }
-
-  setCurrentIndex(index: number) {
-    if (index !== this.currentIndex) {
-      this.currentIndex = index;
-    }
-  }
-
-  notifyStateChange() {
-    this.notifyListeners();
-  }
-
-  goToIndex = (index: number) => {
-    if (index < 0 || index >= this.dataLength || !this.enableSwipeGesture || !this.listRef) {
-      return;
-    }
-
-    this.currentIndex = index;
-
-    if (this.listRef.scrollToIndex) {
-      this.listRef.scrollToIndex({ index, animated: true });
-    } else if (this.listRef.scrollTo) {
-      this.listRef.scrollTo({ x: index * this.width, animated: true });
-    }
-
-    this.notifyListeners();
-  };
-
-  goToPrevious = () => {
-    if (this.currentIndex > 0) {
-      this.goToIndex(this.currentIndex - 1);
-    }
-  };
-
-  goToNext = () => {
-    if (this.currentIndex < this.dataLength - 1) {
-      this.goToIndex(this.currentIndex + 1);
-    }
-  };
-
-  cleanUp() {
-    this.listeners.clear();
-    this.listRef = null;
-    this.enableSwipeGesture = true;
-    this.currentIndex = 0;
-    this.dataLength = 0;
-  }
-}
-
-export default ImageViewerManager;

package/src/ImageViewerRegistry.ts

@@ -1,66 +0,0 @@
-import ImageViewerManager from './ImageViewerManager';
-
-class ImageViewerRegistry {
-  private managers = new Map<string, ImageViewerManager>();
-  private subscribers = new Map<string, Set<(manager: ImageViewerManager | null) => void>>();
-
-  subscribeToManager(id: string, callback: (manager: ImageViewerManager | null) => void) {
-    if (!this.subscribers.has(id)) {
-      this.subscribers.set(id, new Set());
-    }
-
-    this.subscribers.get(id)?.add(callback);
-
-    const manager = this.managers.get(id) || null;
-
-    callback(manager);
-
-    return () => {
-      const subscribers = this.subscribers.get(id);
-
-      subscribers?.delete(callback);
-
-      if (subscribers && subscribers.size === 0) {
-        this.subscribers.delete(id);
-      }
-    };
-  }
-
-  createManager(id: string): ImageViewerManager | null {
-    if (this.managers.has(id)) {
-      return this.managers.get(id) || null;
-    }
-
-    const manager = new ImageViewerManager();
-    this.managers.set(id, manager);
-
-    this.notifySubscribers(id, manager);
-
-    return manager;
-  }
-
-  getManager(id: string): ImageViewerManager | null {
-    return this.managers.get(id) || null;
-  }
-
-  deleteManager(id: string) {
-    const manager = this.managers.get(id);
-
-    if (manager) {
-      manager.cleanUp();
-      this.managers.delete(id);
-
-      this.notifySubscribers(id, null);
-    }
-  }
-
-  notifySubscribers(id: string, manager: ImageViewerManager | null) {
-    const listeners = this.subscribers.get(id);
-
-    if (listeners) {
-      [...listeners].forEach((callback) => callback(manager));
-    }
-  }
-}
-
-export const registry = new ImageViewerRegistry();

package/src/index.tsx

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

package/src/types.ts

@@ -1,36 +0,0 @@
-import type { StyleProp, ViewStyle } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
-
-export interface GestureImageViewerProps<T = any> {
-  id?: string;
-  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;
-  enableZoomPanGesture?: boolean;
-  enableZoomGesture?: boolean;
-  enableDoubleTapGesture?: boolean;
-  maxZoomScale?: number;
-  itemSpacing?: number;
-}
-
-export interface GestureState {
-  currentIndex: number;
-  translateY: SharedValue<number>;
-  isGestureActive: boolean;
-  lockDirection: 'horizontal' | 'vertical' | null;
-}

package/src/useGestureImageViewer.ts

@@ -1,346 +0,0 @@
-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 {
-  Easing,
-  interpolate,
-  runOnJS,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  withTiming,
-} from 'react-native-reanimated';
-import type ImageViewerManager from './ImageViewerManager';
-import { registry } from './ImageViewerRegistry';
-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,
-  enableZoomGesture = true,
-  enableDoubleTapGesture = true,
-  enableZoomPanGesture = true,
-  maxZoomScale = 2,
-  itemSpacing = 0,
-  id = 'default',
-}: UseGestureImageViewerProps<T>) => {
-  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
-  const width = customWidth || screenWidth;
-
-  const [isZoomed, setIsZoomed] = useState(false);
-
-  const [currentIndex, setCurrentIndex] = useState(initialIndex);
-  const [manager, setManager] = useState<ImageViewerManager | null>(null);
-
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-
-  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 listRef = useRef<any>(null);
-
-  const dataLength = data?.length || 0;
-
-  useAnimatedReaction(
-    () => scale.value,
-    (currentScale) => {
-      runOnJS(setIsZoomed)(currentScale > 1);
-    },
-  );
-
-  useEffect(() => {
-    const handleManagerChange = (manager: ImageViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-
-      setManager(manager);
-
-      if (manager) {
-        setCurrentIndex(manager.getState().currentIndex);
-        unsubscribeRef.current = manager.subscribe((state) => {
-          setCurrentIndex(state.currentIndex);
-        });
-        return;
-      }
-
-      setCurrentIndex(0);
-    };
-
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
-  }, [id]);
-
-  useEffect(() => {
-    if (!manager) {
-      return;
-    }
-
-    manager.setDataLength(dataLength);
-    manager.setEnableSwipeGesture(enableSwipeGesture);
-    manager.setCurrentIndex(initialIndex);
-    manager.setWidth(width + itemSpacing);
-    manager.notifyStateChange();
-  }, [dataLength, enableSwipeGesture, initialIndex, manager, width, itemSpacing]);
-
-  useEffect(() => {
-    if (!manager || !listRef.current) {
-      return;
-    }
-
-    manager.setListRef(listRef.current);
-  }, [manager]);
-
-  useEffect(() => {
-    onIndexChange?.(currentIndex);
-  }, [currentIndex, onIndexChange]);
-
-  useEffect(() => {
-    translateY.value = 0;
-    translateX.value = 0;
-    scale.value = 1;
-    backdropOpacity.value = 1;
-    startScale.value = 1;
-
-    if (initialIndex <= 0 || !listRef.current) {
-      return;
-    }
-
-    const runAfterInteractions = InteractionManager.runAfterInteractions(() => {
-      if (listRef.current.scrollToIndex) {
-        listRef.current.scrollToIndex({
-          index: initialIndex,
-          animated: false,
-        });
-      } else if (listRef.current.scrollTo) {
-        listRef.current.scrollTo({
-          x: initialIndex * (width + itemSpacing),
-          animated: false,
-        });
-      }
-    });
-
-    return () => {
-      runAfterInteractions?.cancel();
-    };
-  }, [initialIndex, translateY, backdropOpacity, translateX, scale, startScale, width, itemSpacing]);
-
-  const onMomentumScrollEnd = useCallback(
-    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
-      if (!enableSwipeGesture) {
-        return;
-      }
-
-      const contentOffset = event.nativeEvent.contentOffset;
-      const newIndex = Math.round(contentOffset.x / (width + itemSpacing));
-
-      if (newIndex !== currentIndex && newIndex >= 0 && newIndex < dataLength) {
-        if (manager) {
-          manager.setCurrentIndex(newIndex);
-          setCurrentIndex(newIndex);
-          manager.notifyStateChange();
-        }
-
-        translateX.value = withTiming(0);
-        translateY.value = withTiming(0);
-        initialTranslateX.value = withTiming(0);
-        initialTranslateY.value = withTiming(0);
-        startScale.value = withTiming(1);
-        scale.value = withTiming(1);
-      }
-    },
-    [
-      manager,
-      currentIndex,
-      dataLength,
-      width,
-      itemSpacing,
-      enableSwipeGesture,
-      translateX,
-      translateY,
-      scale,
-      initialTranslateX,
-      initialTranslateY,
-      startScale,
-    ],
-  );
-
-  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';
-
-        if (event.translationY > dismissThreshold && enableDismissGesture && onDismiss) {
-          runOnJS(onDismiss)();
-          return;
-        }
-
-        translateY.value = withSpring(0, {
-          damping: 15,
-          stiffness: 150,
-        });
-      });
-  }, [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 }],
-    };
-  });
-
-  const backdropStyle = useAnimatedStyle(() => {
-    if (!animateBackdrop || scale.value > 1) {
-      return { opacity: 1 };
-    }
-
-    const opacity = interpolate(translateY.value, [0, 200], [1, 0], 'clamp');
-
-    return { opacity };
-  }, [animateBackdrop]);
-
-  return {
-    currentIndex,
-    dataLength,
-    translateY,
-    listRef,
-    isZoomed,
-
-    dismissGesture,
-    zoomGesture,
-
-    onMomentumScrollEnd,
-
-    animatedStyle,
-    backdropStyle,
-  };
-};

package/src/useImageViewerController.ts

@@ -1,48 +0,0 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type ImageViewerManager from './ImageViewerManager';
-import type { ImageViewerManagerState } from './ImageViewerManager';
-import { registry } from './ImageViewerRegistry';
-
-export const useImageViewerController = (id = 'default') => {
-  const [state, setState] = useState<ImageViewerManagerState>({
-    currentIndex: 0,
-    dataLength: 0,
-  });
-
-  const [manager, setManager] = useState<ImageViewerManager | null>(null);
-  const unsubscribeRef = useRef<(() => void) | null>(null);
-
-  useEffect(() => {
-    const handleManagerChange = (newManager: ImageViewerManager | null) => {
-      unsubscribeRef.current?.();
-      unsubscribeRef.current = null;
-
-      setManager(newManager);
-
-      if (newManager) {
-        setState(newManager.getState());
-        unsubscribeRef.current = newManager.subscribe(setState);
-        return;
-      }
-
-      setState({ currentIndex: 0, dataLength: 0 });
-    };
-
-    const unsubscribeFromRegistry = registry.subscribeToManager(id, handleManagerChange);
-
-    return () => {
-      unsubscribeFromRegistry();
-      unsubscribeRef.current?.();
-    };
-  }, [id]);
-
-  const noopFunction = useMemo(() => () => {}, []);
-
-  return {
-    goToIndex: manager?.goToIndex || noopFunction,
-    goToPrevious: manager?.goToPrevious || noopFunction,
-    goToNext: manager?.goToNext || noopFunction,
-    currentIndex: state.currentIndex,
-    totalCount: state.dataLength,
-  };
-};

package/src/utils.ts

@@ -1,24 +0,0 @@
-import { FlatList as RNFlatList, ScrollView as RNScrollView } from 'react-native';
-import { FlatList as GestureFlatList, ScrollView as GestureScrollView } from 'react-native-gesture-handler';
-
-export const isScrollViewLike = (component: any): component is typeof RNScrollView => {
-  return component === RNScrollView || component === GestureScrollView;
-};
-
-export const isFlatListLike = (component: any): component is typeof RNFlatList => {
-  try {
-    const FlashList = require('@shopify/flash-list')?.FlashList;
-
-    if (FlashList && component === FlashList) {
-      return true;
-    }
-  } catch {
-    // do nothing
-  }
-
-  if (component === RNFlatList || component === GestureFlatList) {
-    return true;
-  }
-
-  return component?.name === 'FlashList';
-};