[MOO-2266] : fix bottom sheet to avoid app crash (#482)

Author: SrirangK

maestro/images/expected/android/bottom_sheet_modal_custom.png

@@ -6,6 +6,18 @@ 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.
+-   Fixed ExpandingDrawer to open correctly and show all elements.
+
+### Changed
+
+-   Improved performance by memoizing all callbacks with useCallback and useMemo across all components.
+-   BottomSheet now uses BottomSheetScrollView instead of BottomSheetView, enabling proper scrolling in expanded states.
+-   NativeBottomSheet now explicitly calculates snapPoints with 90% screen height cap for predictable sizing.
+-   CustomModalSheet now measures content height dynamically with 90% screen height cap, removing offscreen SafeAreaView measurement.
+
 ## [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/CHANGELOG.md

@@ -10,10 +10,12 @@ appId: "${APP_ID}"
     text: "Modal basic non native"
 - tapOn:
     text: "Open"
-# Because the image loading can take some time due to resources on emulator, we need to wait for the image to be visible
-- 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
+
+# Wait until the sheet is actually open (button label changes)
+- extendedWaitUntil:
+    visible: randText
+    optional: true
+    timeout: 25000
+
 - takeScreenshot:
     path: "maestro/images/actual/${PLATFORM}/bottom_sheet_modal_basic_non_native"

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

@@ -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/package.json

@@ -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>
 `;