@webority-technologies/mobile 0.0.13 → 0.0.15

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

@@ -49,6 +49,7 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
     enableBackdropPress = true,
     backdropOpacity = 0.5,
     keyboardBehavior = 'none',
+    mode = 'modal',
     handleIndicatorStyle,
     containerStyle,
     children,
@@ -84,6 +85,10 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   const currentIndexShared = (0, _reactNativeReanimated.useSharedValue)(-1);
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(-1);
   const isAnimatingRef = (0, _react.useRef)(false);
+  // Drives the native <Modal>'s visible prop in modal mode. We mount the modal
+  // synchronously on open and unmount only after the close animation finishes
+  // so the slide-down stays visible.
+  const [modalVisible, setModalVisible] = (0, _react.useState)(false);
 
   // Convert a snap-point index → translateY position. -1 = closed.
   const yForIndex = (0, _react.useCallback)(idx => {
@@ -111,14 +116,26 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [onAnimate, translateY]);
   const markAnimationDone = (0, _react.useCallback)(() => {
     isAnimatingRef.current = false;
-  }, []);
+    // If we just finished a close animation, unmount the modal wrapper.
+    if (mode === 'modal' && currentIndexShared.value < 0) {
+      setModalVisible(false);
+    }
+  }, [mode, currentIndexShared]);
   const expand = (0, _react.useCallback)(idx => {
     const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
     const fromIndex = currentIndexShared.value;
     const to = yForIndex(target);
+    // Mount the Modal before kicking off the spring so the sheet has a
+    // host to animate into.
+    if (mode === 'modal') setModalVisible(true);
+    // Reset translateY to the closed position so the first open animates
+    // up from off-screen rather than snapping in place.
+    if (fromIndex < 0) {
+      translateY.value = closedY;
+    }
     setIndexJS(target);
     animateTo(to, fromIndex, target);
-  }, [animateTo, currentIndex, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  }, [animateTo, closedY, currentIndex, currentIndexShared, mode, resolvedSnapPoints.length, setIndexJS, translateY, yForIndex]);
   const collapse = (0, _react.useCallback)(() => {
     if (resolvedSnapPoints.length === 0) return;
     const fromIndex = currentIndexShared.value;
@@ -270,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
@@ -300,23 +322,31 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
   }, [enableBackdropPress, close]);
 
   // Don't render the heavy gesture tree at all when nothing's been opened yet.
-  // We still mount once `currentIndex` ≥ 0 OR an animation has started.
-  // For controlled `index`, we treat any value ≠ -1 as "opened".
+  // For inline mode we keep the legacy "mount on first open" behavior; modal
+  // mode is gated entirely by `modalVisible`.
   const everOpenedRef = (0, _react.useRef)(false);
   if (isExpanded || controlledIndex !== undefined) {
     everOpenedRef.current = true;
   }
-  if (!everOpenedRef.current) {
+  if (mode === 'inline' && !everOpenedRef.current) {
+    return null;
+  }
+  if (mode === 'modal' && !modalVisible) {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+  const sheetTree = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: _reactNative.StyleSheet.absoluteFill,
     pointerEvents: "box-none",
     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,
@@ -356,6 +386,22 @@ const BottomSheet = exports.BottomSheet = /*#__PURE__*/(0, _react.forwardRef)((p
       })
     })]
   });
+  if (mode === 'modal') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
+      transparent: true,
+      visible: modalVisible,
+      onRequestClose: close,
+      statusBarTranslucent: true,
+      presentationStyle: "overFullScreen",
+      animationType: "none",
+      supportedOrientations: ['portrait', 'landscape'],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeGestureHandler.GestureHandlerRootView, {
+        style: styles.modalRoot,
+        children: sheetTree
+      })
+    });
+  }
+  return sheetTree;
 });
 BottomSheet.displayName = 'BottomSheet';
 
@@ -395,6 +441,9 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
   },
   content: {
     flex: 1
+  },
+  modalRoot: {
+    flex: 1
   }
 });
 var _default = exports.default = BottomSheet;

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

@@ -20,8 +20,8 @@
  */
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Dimensions, Keyboard, Platform, Pressable, StyleSheet, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { Dimensions, Keyboard, Modal, Platform, Pressable, StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from "../../theme/index.js";
@@ -44,6 +44,7 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
     enableBackdropPress = true,
     backdropOpacity = 0.5,
     keyboardBehavior = 'none',
+    mode = 'modal',
     handleIndicatorStyle,
     containerStyle,
     children,
@@ -79,6 +80,10 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
   const currentIndexShared = useSharedValue(-1);
   const [currentIndex, setCurrentIndex] = useState(-1);
   const isAnimatingRef = useRef(false);
+  // Drives the native <Modal>'s visible prop in modal mode. We mount the modal
+  // synchronously on open and unmount only after the close animation finishes
+  // so the slide-down stays visible.
+  const [modalVisible, setModalVisible] = useState(false);
 
   // Convert a snap-point index → translateY position. -1 = closed.
   const yForIndex = useCallback(idx => {
@@ -106,14 +111,26 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
   }, [onAnimate, translateY]);
   const markAnimationDone = useCallback(() => {
     isAnimatingRef.current = false;
-  }, []);
+    // If we just finished a close animation, unmount the modal wrapper.
+    if (mode === 'modal' && currentIndexShared.value < 0) {
+      setModalVisible(false);
+    }
+  }, [mode, currentIndexShared]);
   const expand = useCallback(idx => {
     const target = typeof idx === 'number' ? clamp(idx, 0, resolvedSnapPoints.length - 1) : currentIndex >= 0 ? currentIndex : 0;
     const fromIndex = currentIndexShared.value;
     const to = yForIndex(target);
+    // Mount the Modal before kicking off the spring so the sheet has a
+    // host to animate into.
+    if (mode === 'modal') setModalVisible(true);
+    // Reset translateY to the closed position so the first open animates
+    // up from off-screen rather than snapping in place.
+    if (fromIndex < 0) {
+      translateY.value = closedY;
+    }
     setIndexJS(target);
     animateTo(to, fromIndex, target);
-  }, [animateTo, currentIndex, currentIndexShared, resolvedSnapPoints.length, setIndexJS, yForIndex]);
+  }, [animateTo, closedY, currentIndex, currentIndexShared, mode, resolvedSnapPoints.length, setIndexJS, translateY, yForIndex]);
   const collapse = useCallback(() => {
     if (resolvedSnapPoints.length === 0) return;
     const fromIndex = currentIndexShared.value;
@@ -265,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
@@ -295,23 +317,31 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
   }, [enableBackdropPress, close]);
 
   // Don't render the heavy gesture tree at all when nothing's been opened yet.
-  // We still mount once `currentIndex` ≥ 0 OR an animation has started.
-  // For controlled `index`, we treat any value ≠ -1 as "opened".
+  // For inline mode we keep the legacy "mount on first open" behavior; modal
+  // mode is gated entirely by `modalVisible`.
   const everOpenedRef = useRef(false);
   if (isExpanded || controlledIndex !== undefined) {
     everOpenedRef.current = true;
   }
-  if (!everOpenedRef.current) {
+  if (mode === 'inline' && !everOpenedRef.current) {
+    return null;
+  }
+  if (mode === 'modal' && !modalVisible) {
     return null;
   }
-  return /*#__PURE__*/_jsxs(View, {
+  const sheetTree = /*#__PURE__*/_jsxs(View, {
     style: StyleSheet.absoluteFill,
     pointerEvents: "box-none",
     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,
@@ -351,6 +381,22 @@ const BottomSheet = /*#__PURE__*/forwardRef((props, ref) => {
       })
     })]
   });
+  if (mode === 'modal') {
+    return /*#__PURE__*/_jsx(Modal, {
+      transparent: true,
+      visible: modalVisible,
+      onRequestClose: close,
+      statusBarTranslucent: true,
+      presentationStyle: "overFullScreen",
+      animationType: "none",
+      supportedOrientations: ['portrait', 'landscape'],
+      children: /*#__PURE__*/_jsx(GestureHandlerRootView, {
+        style: styles.modalRoot,
+        children: sheetTree
+      })
+    });
+  }
+  return sheetTree;
 });
 BottomSheet.displayName = 'BottomSheet';
 
@@ -390,6 +436,9 @@ const buildStyles = _theme => StyleSheet.create({
   },
   content: {
     flex: 1
+  },
+  modalRoot: {
+    flex: 1
   }
 });
 export { BottomSheet };

package/lib/typescript/commonjs/components/BottomSheet/BottomSheet.d.ts

@@ -20,6 +20,7 @@ import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export type SnapPoint = number | `${number}%`;
 export type KeyboardBehavior = 'none' | 'shift';
+export type BottomSheetMode = 'modal' | 'inline';
 export interface BottomSheetProps {
     snapPoints: SnapPoint[];
     index?: number;
@@ -37,6 +38,15 @@ export interface BottomSheetProps {
      *   sheet itself.
      */
     keyboardBehavior?: KeyboardBehavior;
+    /**
+     * How the sheet is mounted in the view tree.
+     * - `'modal'` (default): rendered inside a native `<Modal>` so the backdrop
+     *   covers the entire screen (status bar, headers, tab bars) — the standard
+     *   bottom-sheet UX.
+     * - `'inline'`: rendered as an `absoluteFill` overlay inside the parent
+     *   component. Useful when embedding a sheet within a bounded area.
+     */
+    mode?: BottomSheetMode;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;

package/lib/typescript/module/components/BottomSheet/BottomSheet.d.ts

@@ -20,6 +20,7 @@ import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export type SnapPoint = number | `${number}%`;
 export type KeyboardBehavior = 'none' | 'shift';
+export type BottomSheetMode = 'modal' | 'inline';
 export interface BottomSheetProps {
     snapPoints: SnapPoint[];
     index?: number;
@@ -37,6 +38,15 @@ export interface BottomSheetProps {
      *   sheet itself.
      */
     keyboardBehavior?: KeyboardBehavior;
+    /**
+     * How the sheet is mounted in the view tree.
+     * - `'modal'` (default): rendered inside a native `<Modal>` so the backdrop
+     *   covers the entire screen (status bar, headers, tab bars) — the standard
+     *   bottom-sheet UX.
+     * - `'inline'`: rendered as an `absoluteFill` overlay inside the parent
+     *   component. Useful when embedding a sheet within a bounded area.
+     */
+    mode?: BottomSheetMode;
     handleIndicatorStyle?: StyleProp<ViewStyle>;
     containerStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;

package/package.json

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