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 4823e722ef..8fef580330 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx @@ -49,7 +49,7 @@ type Props = { onRequestClose: () => void onTap: () => void onZoom: (isZoomed: boolean) => void - isScrollViewBeingDragged: boolean + isPagingAndroid: boolean showControls: boolean dismissSwipePan: PanGesture animatedStyle: StyleProp @@ -58,7 +58,7 @@ const ImageItem = ({ imageSrc, onTap, onZoom, - isScrollViewBeingDragged, + isPagingAndroid, dismissSwipePan, animatedStyle, }: Props) => { @@ -289,7 +289,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( diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx index aa5d09b501..256dd417d4 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx @@ -34,7 +34,7 @@ type Props = { onRequestClose: () => void onTap: () => void onZoom: (scaled: boolean) => void - isScrollViewBeingDragged: boolean + isPagingAndroid: boolean // Unused showControls: boolean dismissSwipePan: PanGesture | null animatedStyle: StyleProp diff --git a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx index a8ac43219e..c25466d7d3 100644 --- a/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx +++ b/src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx @@ -12,7 +12,7 @@ type Props = { onRequestClose: () => void onTap: () => void onZoom: (scaled: boolean) => void - isScrollViewBeingDragged: boolean + isPagingAndroid: boolean showControls: boolean dismissSwipePan: PanGesture | null animatedStyle: StyleProp diff --git a/src/view/com/lightbox/ImageViewing/index.tsx b/src/view/com/lightbox/ImageViewing/index.tsx index fd2f88738e..b9e7f7cbbb 100644 --- a/src/view/com/lightbox/ImageViewing/index.tsx +++ b/src/view/com/lightbox/ImageViewing/index.tsx @@ -38,7 +38,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' @@ -69,7 +69,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) @@ -170,7 +170,13 @@ function ImageViewing({ setIsScaled(false) }} onPageScrollStateChanged={e => { - setIsDragging(e.nativeEvent.pageScrollState !== 'idle') + if (isAndroid) { + // Note this would be downright broken on iOS where this method + // can't actually reliably report idle state if you do an extra + // vertical drag while paginating (you had one job, pager view). + // But it's OK because we only need this state on Android anyway. + setIsPagingAndroid(e.nativeEvent.pageScrollState !== 'idle') + } }} overdrag={true} style={styles.pager}> @@ -182,7 +188,7 @@ function ImageViewing({ onTap={onTap} onZoom={onZoom} isActive={i === imageIndex} - isScrollViewBeingDragged={isDragging} + isPagingAndroid={isPagingAndroid} isFlyingAway={isFlyingAway} isScaled={isScaled} showControls={showControls} @@ -210,7 +216,7 @@ function LightboxPage({ onTap, onZoom, isActive, - isScrollViewBeingDragged, + isPagingAndroid, isFlyingAway, isScaled, showControls, @@ -222,7 +228,7 @@ function LightboxPage({ onTap: () => void onZoom: (scaled: boolean) => void isActive: boolean - isScrollViewBeingDragged: boolean + isPagingAndroid: boolean isFlyingAway: SharedValue isScaled: boolean showControls: boolean @@ -289,7 +295,7 @@ function LightboxPage({ return (