fix: image zooms in fully after swiping on android

jobtoday · Aug 16, 2023 · f193ef6 · f193ef6
1 parent 8a91a9c
commit f193ef6
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 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/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);
   };