From 868716a7813449285e2be326f0a6756aa5710635 Mon Sep 17 00:00:00 2001
From: Mike Bitsch <mike.bitsch@googlemail.com>
Date: Tue, 29 Apr 2025 10:16:02 +0200
Subject: [PATCH] fix(web): allow backgroundInteractionEnabled to work by
 setting pointerEvents

Adds pointerEvents: 'box-none' to the GestureHandlerRootView when backgroundInteractionEnabled is true, allowing background elements to receive pointer events on Web, consistent with Android behavior.
---
 src/index.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 5a6b3ca..9a82e11 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -268,7 +268,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
             ...config,
             velocity: typeof velocity !== 'number' ? undefined : velocity,
           }).start();
-        }else {
+        } else {
           Animated.spring(animations.translateY, {
             toValue: initialValue.current,
             useNativeDriver: true,
@@ -276,7 +276,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
             velocity: typeof velocity !== 'number' ? undefined : velocity,
           }).start();
         }
-      
+
         notifySnapIndexChanged();
       },
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -349,7 +349,9 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
       if (drawUnderStatusBar || props.onChange) {
         animationListener = animations.translateY.addListener(value => {
           const correctedValue =
-            value.value > minTranslateValue.current ? value.value - minTranslateValue.current : 0;
+            value.value > minTranslateValue.current
+              ? value.value - minTranslateValue.current
+              : 0;
           props?.onChange?.(correctedValue, actionSheetHeight.current);
           if (drawUnderStatusBar) {
             if (lock.current) return;
@@ -1472,7 +1474,10 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
           <Root {...rootProps}>
             <GestureHandlerRoot
               isModal={isModal}
-              style={styles.parentContainer}>
+              style={styles.parentContainer}
+              pointerEvents={
+                props?.backgroundInteractionEnabled ? 'box-none' : 'auto'
+              }>
               <PanGestureRefContext.Provider value={context}>
                 <DraggableNodesContext.Provider value={draggableNodesContext}>
                   <Animated.View
@@ -1654,7 +1659,9 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
 
 const GestureHandlerRoot = (props: any) => {
   return props.isModal ? (
-    <GestureHandlerRootView style={props.style}>
+    <GestureHandlerRootView
+      style={props.style}
+      pointerEvents={props.pointerEvents}>
       {props.children}
     </GestureHandlerRootView>
   ) : (