Make iOS-unreliable state Android-only

We didn't really need the only existing xplat usage of it (but it *was* causing bugs).

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -44,7 +44,7 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (isZoomed: boolean) => void
-  isScrollViewBeingDragged: boolean
+  isPagingAndroid: boolean
   showControls: boolean
   dismissSwipePan: PanGesture
 }
@@ -52,7 +52,7 @@ const ImageItem = ({
   imageSrc,
   onTap,
   onZoom,
-  isScrollViewBeingDragged,
+  isPagingAndroid,
   dismissSwipePan,
 }: Props) => {
   const [isScaled, setIsScaled] = useState(false)
@@ -282,7 +282,7 @@ const ImageItem = ({
       committedTransform.value = withClampedSpring(finalTransform)
     })
 
-  const composedGesture = isScrollViewBeingDragged
+  const composedGesture = isPagingAndroid
     ? // If the parent is not at rest, provide a no-op gesture.
       Gesture.Manual()
     : Gesture.Exclusive(

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -29,7 +29,7 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (scaled: boolean) => void
-  isScrollViewBeingDragged: boolean
+  isPagingAndroid: boolean // Not available on iOS
   showControls: boolean
   dismissSwipePan: PanGesture | null
 }

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx

@@ -11,7 +11,7 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (scaled: boolean) => void
-  isScrollViewBeingDragged: boolean
+  isPagingAndroid: boolean
   showControls: boolean
   dismissSwipePan: PanGesture | null
 }

src/view/com/lightbox/ImageViewing/index.tsx

@@ -37,7 +37,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 
 import {colors, s} from '#/lib/styles'
-import {isIOS} from '#/platform/detection'
+import {isAndroid, isIOS} from '#/platform/detection'
 import {Lightbox} from '#/state/lightbox'
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
@@ -68,7 +68,7 @@ function ImageViewing({
 }) {
   const {images, index: initialImageIndex} = lightbox
   const [isScaled, setIsScaled] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
+  const [isPagingAndroid, setIsPagingAndroid] = useState(false)
   const [imageIndex, setImageIndex] = useState(initialImageIndex)
   const [showControls, setShowControls] = useState(true)
   const dismissSwipeTranslateY = useSharedValue(0)
@@ -211,7 +211,13 @@ function ImageViewing({
             setIsScaled(false)
           }}
           onPageScrollStateChanged={e => {
-            setIsDragging(e.nativeEvent.pageScrollState !== 'idle')
+            if (isAndroid) {
+              // This condition isn't reliable on iOS (the pager may send
+              // events out of order if you spam it with vertical pans in
+              // the middle of deceleration). However, we only need this
+              // variable for Android anyway, so let's make that explicit.
+              setIsPagingAndroid(e.nativeEvent.pageScrollState !== 'idle')
+            }
           }}
           overdrag={true}
           style={styles.pager}>
@@ -224,11 +230,9 @@ function ImageViewing({
                 onZoom={onZoom}
                 imageSrc={imageSrc}
                 onRequestClose={onRequestClose}
-                isScrollViewBeingDragged={isDragging}
+                isPagingAndroid={isPagingAndroid}
                 showControls={showControls}
-                dismissSwipePan={
+                dismissSwipePan={imageIndex === i ? dismissSwipePan : null}
-                  imageIndex === i && !isDragging ? dismissSwipePan : null
-                }
               />
             </Animated.View>
           ))}