Web: backgroundInteractionEnabled not working

[Silvallis]

Bug: backgroundInteractionEnabled prop not working on Web

Describe the bug
When using the backgroundInteractionEnabled prop on Web, it does not behave as expected — background interaction is blocked. The same prop works correctly on Android.

Expected behavior
The ActionSheet should allow pointer interactions to pass through to underlying elements when backgroundInteractionEnabled is set to true, even on Web.

Observed behavior
On Web, background interaction is blocked. This seems to be due to the GestureHandlerRootView not having the appropriate pointerEvents style to allow interaction through.

Potential cause
A div for the ActionSheet on Web appears to be missing pointer-events: none , preventing clicks from reaching the background when the sheet is open.

Suggested fix
Conditionally apply pointerEvents: 'box-none' to the GestureHandlerRootView when backgroundInteractionEnabled is true.

Environment:

• Platform: Web
• Library version: ^0.9.7
• React Native version: 0.76.9

Additional context
I’m working on a PR to implement this fix.

Reproduce
Create a new Expo project:
npx create-expo-app@latest --example # (choose 'blank' template)

Install required packages:
npm install react-native-actions-sheet react-native-gesture-handler --save npx expo install @expo/metro-runtime

Replace App.js with the following App.tsx content:

import { useRef } from 'react';
import { View, Text, Button } from 'react-native';
import ActionSheet, { ActionSheetRef } from 'react-native-actions-sheet';

export default function App() {
  const actionSheetRef = useRef<ActionSheetRef>(null);

  return (
    <View style={{ height: '100%' }}>
      <Button title="Expand" onPress={() => actionSheetRef.current?.show()} />
      <Button title="Collapse" onPress={() => actionSheetRef.current?.hide()} />
      <ActionSheet
        ref={actionSheetRef}
        closeOnTouchBackdrop={false}
        defaultOverlayOpacity={0}
        backgroundInteractionEnabled={true}
      >
        <Text>Hi, I am here.</Text>
      </ActionSheet>
    </View>
  );
}

Start the web app:
npm run web

Click the "Expand" button to open the ActionSheet.
Try clicking either button again — they will not respond because pointer events are blocked.

Currently working on a PR, but any insights or opions are welcome. Maybe I am doing something wrong or need additional settings to get the expected behaviour.