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

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

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

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

@@ -1 +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"}
+{"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;AACvD,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC"}

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

@@ -1,6 +1,7 @@
 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;
@@ -19,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 {
     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,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;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,29 @@
 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, id, }: 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;
+    isZoomed: boolean;
+    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;AActB,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,mPAkB5C,0BAA0B,CAAC,CAAC,CAAC;;;;;;;;iCA8FpB,oBAAoB,CAAC,iBAAiB,CAAC;;;;;;;;;;;;;;;;;;;CA0LlD,CAAC"}

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

@@ -0,0 +1,8 @@
+export declare const useImageViewerController: (id?: string) => {
+    goToIndex: (index: number) => void;
+    goToPrevious: () => void;
+    goToNext: () => void;
+    currentIndex: number;
+    totalCount: number;
+};
+//# sourceMappingURL=useImageViewerController.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useImageViewerController.d.ts","sourceRoot":"","sources":["../../../src/useImageViewerController.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,wBAAwB,GAAI,WAAc;;;;;;CA6BtD,CAAC"}

package/package.json

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

package/src/GestureImageViewer.tsx

@@ -1,7 +1,8 @@
-import { useCallback } from 'react';
-import { FlatList, Platform, StyleSheet, useWindowDimensions, View } from 'react-native';
-import { GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
+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 Animated from 'react-native-reanimated';
+import { registry } from './ImageViewerRegistry';
 import type { GestureImageViewerProps } from './types';
 import { useGestureImageViewer } from './useGestureImageViewer';
 
@@ -14,6 +15,7 @@ const WebPagingFix = () => {
 };
 
 export function GestureImageViewer<T = any>({
+  id = 'default',
   data,
   renderImage,
   renderContainer,
@@ -29,7 +31,17 @@ 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({
+    id,
     data,
     width,
     initialIndex,
@@ -38,20 +50,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 +82,22 @@ 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]);
+
+  useEffect(() => {
+    registry.createManager(id);
+
+    return () => registry.deleteManager(id);
+  }, [id]);
+
   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 +105,7 @@ export function GestureImageViewer<T = any>({
               keyExtractor={keyExtractor}
               horizontal
               pagingEnabled
+              scrollEnabled={!isZoomed}
               showsHorizontalScrollIndicator={false}
               onMomentumScrollEnd={onMomentumScrollEnd}
               getItemLayout={getItemLayout}
@@ -89,7 +117,7 @@ export function GestureImageViewer<T = any>({
               {...(Platform.OS === 'web' && { dataSet: { 'paging-enabled-fix': true } })}
               {...listProps}
             />
-          </Animated.View>
+          </View>
           <WebPagingFix />
         </View>
       </GestureDetector>

package/src/ImageViewerManager.ts

@@ -0,0 +1,92 @@
+export type ImageViewerManagerState = {
+  currentIndex: number;
+  dataLength: number;
+};
+
+class ImageViewerManager {
+  private currentIndex = 0;
+  private dataLength = 0;
+  private flatListRef: any = 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,
+    };
+  }
+
+  setFlatListRef(ref: any) {
+    this.flatListRef = 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.flatListRef) {
+      return;
+    }
+
+    this.currentIndex = index;
+    this.flatListRef.scrollToIndex({ index, 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.flatListRef = null;
+    this.enableSwipeGesture = true;
+    this.currentIndex = 0;
+    this.dataLength = 0;
+  }
+}
+
+export default ImageViewerManager;

package/src/ImageViewerRegistry.ts

@@ -0,0 +1,30 @@
+import ImageViewerManager from './ImageViewerManager';
+
+class ImageViewerRegistry {
+  private managers = new Map<string, ImageViewerManager>();
+
+  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);
+    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);
+    }
+  }
+}
+
+export const registry = new ImageViewerRegistry();

package/src/index.tsx

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

package/src/types.ts

@@ -2,6 +2,7 @@ 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;
@@ -20,6 +21,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 {