From 115d60d616e8fc044ccd8b63693edeea818de8f9 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 3 Oct 2023 04:48:35 +0100
Subject: [PATCH] Work around the pinch/scroll conflict

---
 .../components/ImageItem/ImageItem.android.tsx |  2 ++
 src/view/com/lightbox/ImageViewing/index.tsx   | 18 +++++++++++++++++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
index 93a5b4fa00..1b7bea468b 100644
--- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
+++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx
@@ -156,6 +156,7 @@ const ImageItem = ({
   delayLongPress,
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
+  gestureRef,
 }: Props) => {
   const [isScaled, setIsScaled] = useState(false)
   const [isLoaded, setIsLoaded] = useState(false)
@@ -223,6 +224,7 @@ const ImageItem = ({
   }
 
   const pinch = Gesture.Pinch()
+    .withRef(gestureRef)
     .onStart((e) => {
       pinchOrigin.value = {
         x: e.focalX - SCREEN.width/2,
diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx
index fe6246ea3f..7a50bdd434 100644
--- a/src/view/com/lightbox/ImageViewing/index.tsx
+++ b/src/view/com/lightbox/ImageViewing/index.tsx
@@ -10,10 +10,12 @@
 
 import React, {
   ComponentType,
+  createRef,
   useCallback,
   useRef,
   useEffect,
   useMemo,
+  useState,
 } from 'react'
 import {
   Animated,
@@ -33,6 +35,7 @@ import useAnimatedComponents from './hooks/useAnimatedComponents'
 import useImageIndexChange from './hooks/useImageIndexChange'
 import useRequestClose from './hooks/useRequestClose'
 import {ImageSource} from './@types'
+import {ScrollView} from 'react-native-gesture-handler';
 import {Edge, SafeAreaView} from 'react-native-safe-area-context'
 
 type Props = {
@@ -109,6 +112,13 @@ function ImageViewing({
     return null
   }
 
+  const [gestureRefs] = useState(new Map())
+  for (let imageSrc of images) {
+    if (!gestureRefs.get(imageSrc)) {
+      gestureRefs.set(imageSrc, createRef())
+    }
+  }
+
   return (
     <SafeAreaView
       style={styles.screen}
@@ -132,7 +142,6 @@ function ImageViewing({
           data={images}
           horizontal
           pagingEnabled
-          nestedScrollEnabled
           showsHorizontalScrollIndicator={false}
           showsVerticalScrollIndicator={false}
           getItem={(_, index) => images[index]}
@@ -151,6 +160,13 @@ function ImageViewing({
               delayLongPress={delayLongPress}
               swipeToCloseEnabled={swipeToCloseEnabled}
               doubleTapToZoomEnabled={doubleTapToZoomEnabled}
+              gestureRef={gestureRefs.get(imageSrc)}
+            />
+          )}
+          renderScrollComponent={props => (
+            <ScrollView
+              {...props}
+              waitFor={Array.from(gestureRefs.values())}
             />
           )}
           onMomentumScrollEnd={onScroll}