Apply fix for image zoom issue

Apply fix from jobtoday#191
ls1955 · Dec 24, 2023 · 6d5a352 · 6d5a352
1 parent dd88aa4
commit 6d5a352
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx
@@ -140,6 +140,7 @@ function ImageViewing({
               delayLongPress={delayLongPress}
               swipeToCloseEnabled={swipeToCloseEnabled}
               doubleTapToZoomEnabled={doubleTapToZoomEnabled}
+              currentImageIndex={currentImageIndex}
             />
           )}
           onMomentumScrollEnd={onScroll}

diff --git a/src/components/ImageItem/ImageItem.android.tsx b/src/components/ImageItem/ImageItem.android.tsx
@@ -39,6 +39,7 @@ type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  currentImageIndex: number;
 };
 
 const ImageItem = ({
@@ -49,6 +50,7 @@ const ImageItem = ({
   delayLongPress,
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
+  currentImageIndex
 }: Props) => {
   const imageContainer = useRef<ScrollView & NativeMethodsMixin>(null);
   const imageDimensions = useImageDimensions(imageSrc);
@@ -80,6 +82,7 @@ const ImageItem = ({
     doubleTapToZoomEnabled,
     onLongPress: onLongPressHandler,
     delayLongPress,
+    currentImageIndex,
   });
 
   const imagesStyles = getImageStyles(

diff --git a/src/components/ImageItem/ImageItem.d.ts b/src/components/ImageItem/ImageItem.d.ts
@@ -18,15 +18,19 @@ declare type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  currentImageIndex: number;
 };
 
-declare const _default: React.MemoExoticComponent<({
-  imageSrc,
-  onZoom,
-  onRequestClose,
-  onLongPress,
-  delayLongPress,
-  swipeToCloseEnabled,
-}: Props) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<
+  ({
+    imageSrc,
+    onZoom,
+    onRequestClose,
+    onLongPress,
+    delayLongPress,
+    swipeToCloseEnabled,
+    currentImageIndex,
+  }: Props) => JSX.Element
+>;
 
 export default _default;
diff --git a/src/hooks/usePanResponder.ts b/src/hooks/usePanResponder.ts
@@ -42,6 +42,7 @@ type Props = {
   doubleTapToZoomEnabled: boolean;
   onLongPress: () => void;
   delayLongPress: number;
+  currentImageIndex: number;
 };
 
 const usePanResponder = ({
@@ -51,6 +52,7 @@ const usePanResponder = ({
   doubleTapToZoomEnabled,
   onLongPress,
   delayLongPress,
+  currentImageIndex,
 }: Props): Readonly<
   [GestureResponderHandlers, Animated.Value, Animated.ValueXY]
 > => {
@@ -156,6 +158,20 @@ const usePanResponder = ({
     return () => scaleValue.removeAllListeners();
   });
 
+  useEffect(() => {
+    onZoom(false);
+
+    // workaround for a bug where scaleValue gets incorrectly set after zooming then swiping.
+    // https://github.com/jobtoday/react-native-image-viewing/issues/158
+    const timeout = setTimeout(() => {
+      scaleValue.setValue(initialScale);
+      currentScale = initialScale;
+      currentTranslate = initialTranslate;
+    }, 100);
+
+    return () => clearTimeout(timeout);
+  }, [currentImageIndex]);
+
   const cancelLongPressHandle = () => {
     longPressHandlerRef && clearTimeout(longPressHandlerRef);
   };