Merge pull request #52302 from QichenZhu/fix/51246

Fix fullscreen video controls difficult to click

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 ? <GestureDetector gesture={gesture}>{children}</GestureDetector> : 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}
                     />
                     <AttachmentCarouselPagerContext.Provider value={context}>
-                        <GestureDetector gesture={pan}>
+                        <DeviceAwareGestureDetector
+                            canUseTouchScreen={canUseTouchScreen}
+                            gesture={pan}
+                        >
                             <Animated.FlatList
                                 keyboardShouldPersistTaps="handled"
                                 horizontal
@@ -309,7 +325,7 @@ function AttachmentCarousel({report, source, onNavigate, setDownloadButtonVisibi
                                 viewabilityConfig={viewabilityConfig}
                                 onViewableItemsChanged={updatePage}
                             />
-                        </GestureDetector>
+                        </DeviceAwareGestureDetector>
                     </AttachmentCarouselPagerContext.Provider>
 
                     <CarouselActions onCycleThroughAttachments={cycleThroughAttachments} />