Backport bottom sheet for issue for 11.6

packages/pluggableWidgets/bottom-sheet-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   Fixed the “non‑worklet function called on the UI thread” error in bottom sheet coming from @gorhom/bottom-sheet usage.
+
 ## [5.0.3] - 2025-12-15
 
 -   Updated react-native-reanimated to v3.17.5. This addresses compatibility issues with React Native 0.78 and later versions.

packages/pluggableWidgets/bottom-sheet-native/e2e/specs/maestro/Modal_basic_non_native.yaml

@@ -14,6 +14,6 @@ appId: "${APP_ID}"
 - extendedWaitUntil: 
      visible: randText  # Any random text that does not exist in the UI
      optional: true  # This should be true so that the test won't fail
-     timeout: 10000 # 10 seconds
+     timeout: 25000 # 10 seconds
 - takeScreenshot:
     path: "maestro/images/actual/${PLATFORM}/bottom_sheet_modal_basic_non_native"

packages/pluggableWidgets/bottom-sheet-native/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bottom-sheet-native",
   "widgetName": "BottomSheet",
-  "version": "5.0.3",
+  "version": "5.0.4",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

packages/pluggableWidgets/bottom-sheet-native/src/__tests__/__snapshots__/BottomSheet.spec.tsx.snap

@@ -2,104 +2,159 @@
 
 exports[`Bottom sheet renders a custom bottom action sheet for ios (Basic modal) with custom style 1`] = `null`;
 
-exports[`Bottom sheet renders a custom modal 1`] = `
+exports[`Bottom sheet renders a custom modal 1`] = `null`;
+
+exports[`Bottom sheet renders a expanding 1`] = `
 <View
+  pointerEvents="box-none"
   style={
     {
       "bottom": 0,
       "left": 0,
-      "opacity": 0,
       "position": "absolute",
       "right": 0,
       "top": 0,
     }
   }
 >
-  <RCTSafeAreaView
-    onLayout={[Function]}
+  <View
     style={
       {
-        "flex": 1,
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "right": 0,
+        "zIndex": -1,
       }
     }
-  />
-</View>
-`;
-
-exports[`Bottom sheet renders a expanding 1`] = `
-<View
-  style={
-    {
-      "bottom": -1334,
-      "position": "absolute",
-    }
-  }
->
-  <View
-    onLayout={[Function]}
-    pointerEvents="box-none"
   >
     <View
       onLayout={[Function]}
       pointerEvents="box-none"
-      style={{}}
     >
       <Text>
         Header
       </Text>
     </View>
-    <Text>
-      Content
-    </Text>
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <Text>
+        Content
+      </Text>
+    </View>
   </View>
 </View>
 `;
 
 exports[`Bottom sheet renders a expanding fullscreen 1`] = `
 <View
+  pointerEvents="box-none"
   style={
     {
       "bottom": 0,
       "left": 0,
-      "opacity": 0,
       "position": "absolute",
       "right": 0,
       "top": 0,
     }
   }
 >
-  <RCTSafeAreaView
-    onLayout={[Function]}
+  <View
     style={
       {
-        "flex": 1,
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "right": 0,
+        "zIndex": -1,
       }
     }
-  />
+  >
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <Text>
+        Header
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <Text>
+        Content
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <Text>
+        Full screen content
+      </Text>
+    </View>
+  </View>
 </View>
 `;
 
 exports[`Bottom sheet renders a expanding fullscreen with custom styles 1`] = `
 <View
+  pointerEvents="box-none"
   style={
     {
       "bottom": 0,
       "left": 0,
-      "opacity": 0,
       "position": "absolute",
       "right": 0,
       "top": 0,
     }
   }
 >
-  <RCTSafeAreaView
-    onLayout={[Function]}
+  <View
     style={
       {
-        "flex": 1,
+        "bottom": 0,
+        "left": 0,
+        "opacity": 0,
+        "pointerEvents": "none",
+        "position": "absolute",
+        "right": 0,
+        "zIndex": -1,
       }
     }
-  />
+  >
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <Text>
+        Header
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <Text>
+        Content
+      </Text>
+    </View>
+    <View
+      onLayout={[Function]}
+      pointerEvents="box-none"
+    >
+      <Text>
+        Full screen content
+      </Text>
+    </View>
+  </View>
 </View>
 `;