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}
/>
-
+
-
+