From 6187a1564ba11d82c87f28d68faca17bd35b02fb Mon Sep 17 00:00:00 2001
From: MorganDavid <morgan@birda.org>
Date: Wed, 16 Aug 2023 09:39:56 +0100
Subject: [PATCH] fix: image zooms in fully after swiping on android

---
 src/ImageViewing.tsx                          |  1 +
 .../ImageItem/ImageItem.android.tsx           |  3 +++
 src/components/ImageItem/ImageItem.d.ts       | 20 +++++++++++--------
 src/hooks/usePanResponder.ts                  | 16 +++++++++++++++
 4 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/src/ImageViewing.tsx b/src/ImageViewing.tsx
index 3782ee0e..c657cb95 100644
--- 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
index f463b0b1..83593209 100644
--- 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
index 57a902e9..fd71ade5 100644
--- 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
index 202eca8e..3df0987f 100644
--- a/src/hooks/usePanResponder.ts
+++ b/src/hooks/usePanResponder.ts
@@ -40,6 +40,7 @@ type Props = {
   doubleTapToZoomEnabled: boolean;
   onLongPress: () => void;
   delayLongPress: number;
+  currentImageIndex: number;
 };
 
 const usePanResponder = ({
@@ -49,6 +50,7 @@ const usePanResponder = ({
   doubleTapToZoomEnabled,
   onLongPress,
   delayLongPress,
+  currentImageIndex,
 }: Props): Readonly<
   [GestureResponderHandlers, Animated.Value, Animated.ValueXY]
 > => {
@@ -120,6 +122,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);
   };