@webority-technologies/mobile 0.0.14 → 0.0.15

package/lib/commonjs/components/BottomSheet/BottomSheet.js

@@ -287,10 +287,15 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [keyboardBehavior, keyboardOffset]);
 
   // ───────── Animated styles ─────────
+  const safeAreaTop = insets.top;
   const sheetStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
-    // Don't push past the screen top — keyboard offset is clamped to minTopY.
     const yWithKb = translateY.value + keyboardOffset.value;
-    const clamped = yWithKb < minTopY ? minTopY : yWithKb;
+    // When the keyboard is up, allow the sheet to slide above its natural
+    // max-snap-point top (`minTopY`) so the input area stays visible. We still
+    // clamp to the safe-area top so the sheet doesn't disappear under the
+    // status bar / notch.
+    const lowerBound = keyboardOffset.value < 0 ? safeAreaTop : minTopY;
+    const clamped = yWithKb < lowerBound ? lowerBound : yWithKb;
     return {
       transform: [{
         translateY: clamped
@@ -335,8 +340,13 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     testID: testID,
     accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
-      style: [styles.backdrop, {
-        backgroundColor: theme.colors.background.overlay
+      style: [styles.backdrop,
+      // Solid scrim — the theme `background.overlay` token bakes in alpha
+      // and double-multiplies with `backdropOpacity`, leaving the backdrop
+      // looking washed out. Standard modal scrims are solid black so the
+      // prop controls the actual final opacity.
+      {
+        backgroundColor: '#000'
       }, backdropStyle],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
         style: _reactNative.StyleSheet.absoluteFill,

package/lib/module/components/BottomSheet/BottomSheet.js

@@ -282,10 +282,15 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
   }, [keyboardBehavior, keyboardOffset]);
 
   // ───────── Animated styles ─────────
+  const safeAreaTop = insets.top;
   const sheetStyle = useAnimatedStyle(() => {
-    // Don't push past the screen top — keyboard offset is clamped to minTopY.
     const yWithKb = translateY.value + keyboardOffset.value;
-    const clamped = yWithKb < minTopY ? minTopY : yWithKb;
+    // When the keyboard is up, allow the sheet to slide above its natural
+    // max-snap-point top (`minTopY`) so the input area stays visible. We still
+    // clamp to the safe-area top so the sheet doesn't disappear under the
+    // status bar / notch.
+    const lowerBound = keyboardOffset.value < 0 ? safeAreaTop : minTopY;
+    const clamped = yWithKb < lowerBound ? lowerBound : yWithKb;
     return {
       transform: [{
         translateY: clamped
@@ -330,8 +335,13 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     testID: testID,
     accessibilityViewIsModal: accessibilityViewIsModal ?? isExpanded,
     children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: [styles.backdrop, {
-        backgroundColor: theme.colors.background.overlay
+      style: [styles.backdrop,
+      // Solid scrim — the theme `background.overlay` token bakes in alpha
+      // and double-multiplies with `backdropOpacity`, leaving the backdrop
+      // looking washed out. Standard modal scrims are solid black so the
+      // prop controls the actual final opacity.
+      {
+        backgroundColor: '#000'
       }, backdropStyle],
       children: /*#__PURE__*/_jsx(Pressable, {
         style: StyleSheet.absoluteFill,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority-technologies/mobile",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",