diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx index 48771d8aa552..e97d2c1f2313 100644 --- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx +++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.tsx @@ -239,6 +239,9 @@ const BottomSheetDialog = forwardRef< (null); + >(false); useEffect(() => { // Check initial accessibility state - AccessibilityInfo.isScreenReaderEnabled().then(setIsAccessibilityEnabled); + AccessibilityInfo.isScreenReaderEnabled() + .then(setIsAccessibilityEnabled) + .catch((error) => { + // Log the error for debugging + console.warn('AccessibilityInfo.isScreenReaderEnabled failed:', error); + // Fallback to false - assume accessibility is OFF + // This ensures gesture handler will work in ScrollViews + setIsAccessibilityEnabled(false); + }); // Listen for accessibility changes const subscription = AccessibilityInfo.addEventListener( @@ -61,14 +69,16 @@ export const TouchableOpacity = ({ return () => subscription?.remove(); }, []); - // Gesture detection for ScrollView compatibility on Android + // Native gesture handler to prevent interruption from other gestures (BottomSheet pan, etc.) + const native = Gesture.Native().disallowInterruption(true); + + // Gesture detection for ScrollView and BottomSheet compatibility on Android const tap = Gesture.Tap() .runOnJS(true) .shouldCancelWhenOutside(false) .maxDeltaX(20) // Allow some movement while tapping .maxDeltaY(20) - .requireExternalGestureToFail() // Wait for other gestures to fail before activating - .maxDuration(300) // Tight constraint: must complete within 300ms + .maxDuration(200) // Shorter duration for better responsiveness .minPointers(1) .onEnd( ( @@ -116,12 +126,12 @@ export const TouchableOpacity = ({ } return ( - + {children} diff --git a/app/component-library/components/List/ListItemMultiSelect/ListItemMultiSelect.tsx b/app/component-library/components/List/ListItemMultiSelect/ListItemMultiSelect.tsx index 24fd55857769..a4ec9c76e2ce 100644 --- a/app/component-library/components/List/ListItemMultiSelect/ListItemMultiSelect.tsx +++ b/app/component-library/components/List/ListItemMultiSelect/ListItemMultiSelect.tsx @@ -37,14 +37,22 @@ const TouchableOpacity = ({ }) => { const isDisabled = disabled || (props as { isDisabled?: boolean }).isDisabled; - // Track accessibility state - start with null to indicate "unknown" + // Track accessibility state - start with false as default to ensure gesture handler works const [isAccessibilityEnabled, setIsAccessibilityEnabled] = useState< boolean | null - >(null); + >(false); useEffect(() => { // Check initial accessibility state - AccessibilityInfo.isScreenReaderEnabled().then(setIsAccessibilityEnabled); + AccessibilityInfo.isScreenReaderEnabled() + .then(setIsAccessibilityEnabled) + .catch((error) => { + // Log the error for debugging + console.warn('AccessibilityInfo.isScreenReaderEnabled failed:', error); + // Fallback to false - assume accessibility is OFF + // This ensures gesture handler will work in ScrollViews + setIsAccessibilityEnabled(false); + }); // Listen for accessibility changes const subscription = AccessibilityInfo.addEventListener( @@ -55,14 +63,16 @@ const TouchableOpacity = ({ return () => subscription?.remove(); }, []); - // Gesture detection for ScrollView compatibility on Android + // Native gesture handler to prevent interruption from other gestures (BottomSheet pan, etc.) + const native = Gesture.Native().disallowInterruption(true); + + // Gesture detection for ScrollView and BottomSheet compatibility on Android const tap = Gesture.Tap() .runOnJS(true) .shouldCancelWhenOutside(false) .maxDeltaX(20) // Allow some movement while tapping .maxDeltaY(20) - .requireExternalGestureToFail() // Wait for other gestures to fail before activating - .maxDuration(300) // Tight constraint: must complete within 300ms + .maxDuration(200) // Shorter duration for better responsiveness .minPointers(1) .onEnd( ( @@ -110,12 +120,12 @@ const TouchableOpacity = ({ } return ( - + {children} diff --git a/app/component-library/components/List/ListItemSelect/ListItemSelect.tsx b/app/component-library/components/List/ListItemSelect/ListItemSelect.tsx index e029ee46601e..0a6a36d4f98c 100644 --- a/app/component-library/components/List/ListItemSelect/ListItemSelect.tsx +++ b/app/component-library/components/List/ListItemSelect/ListItemSelect.tsx @@ -39,11 +39,19 @@ const TouchableOpacity = ({ // Track accessibility state - start with null to indicate "unknown" const [isAccessibilityEnabled, setIsAccessibilityEnabled] = useState< boolean | null - >(null); + >(false); useEffect(() => { // Check initial accessibility state - AccessibilityInfo.isScreenReaderEnabled().then(setIsAccessibilityEnabled); + AccessibilityInfo.isScreenReaderEnabled() + .then(setIsAccessibilityEnabled) + .catch((error) => { + // Log the error for debugging + console.warn('AccessibilityInfo.isScreenReaderEnabled failed:', error); + // Fallback to false - assume accessibility is OFF + // This ensures gesture handler will work in ScrollViews + setIsAccessibilityEnabled(false); + }); // Listen for accessibility changes const subscription = AccessibilityInfo.addEventListener( @@ -54,14 +62,16 @@ const TouchableOpacity = ({ return () => subscription?.remove(); }, []); - // Gesture detection for ScrollView compatibility on Android + // Native gesture handler to prevent interruption from other gestures (BottomSheet pan, etc.) + const native = Gesture.Native().disallowInterruption(true); + + // Gesture detection for ScrollView and BottomSheet compatibility on Android const tap = Gesture.Tap() .runOnJS(true) .shouldCancelWhenOutside(false) .maxDeltaX(20) // Allow some movement while tapping .maxDeltaY(20) - .requireExternalGestureToFail() // Wait for other gestures to fail before activating - .maxDuration(300) // Tight constraint: must complete within 300ms + .maxDuration(200) // Shorter duration for better responsiveness .minPointers(1) .onEnd( ( @@ -109,12 +119,12 @@ const TouchableOpacity = ({ } return ( - + {children}