diff --git a/src/components/Attachments/AttachmentCarousel/index.tsx b/src/components/Attachments/AttachmentCarousel/index.tsx index 335f1811b3b56..560edcbbf099c 100644 --- a/src/components/Attachments/AttachmentCarousel/index.tsx +++ b/src/components/Attachments/AttachmentCarousel/index.tsx @@ -3,7 +3,7 @@ import type {MutableRefObject} from 'react'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; import type {ListRenderItemInfo} from 'react-native'; import {Keyboard, PixelRatio, View} from 'react-native'; -import type {GestureType} from 'react-native-gesture-handler'; +import type {ComposedGesture, GestureType} from 'react-native-gesture-handler'; import {Gesture, GestureDetector} from 'react-native-gesture-handler'; import {useOnyx} from 'react-native-onyx'; import Animated, {scrollTo, useAnimatedRef, useSharedValue} from 'react-native-reanimated'; @@ -38,6 +38,19 @@ const viewabilityConfig = { const MIN_FLING_VELOCITY = 500; +type DeviceAwareGestureDetectorProps = { + canUseTouchScreen: boolean; + gesture: ComposedGesture | GestureType; + children: React.ReactNode; +}; + +function DeviceAwareGestureDetector({canUseTouchScreen, gesture, children}: DeviceAwareGestureDetectorProps) { + // Don't render GestureDetector on non-touchable devices to prevent unexpected pointer event capture. + // This issue is left out on touchable devices since finger touch works fine. + // See: https://github.com/Expensify/App/issues/51246 + return canUseTouchScreen ? {children} : children; +} + function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibility, type, accountID, onClose, attachmentLink}: AttachmentCarouselProps) { const theme = useTheme(); const {translate} = useLocalize(); @@ -290,7 +303,10 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi cancelAutoHideArrow={cancelAutoHideArrows} /> - + - +