@webority-technologies/mobile 0.0.13 → 0.0.14

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;
@@ -300,16 +317,19 @@ 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,
@@ -356,6 +376,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 +431,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;
@@ -295,16 +312,19 @@ 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,
@@ -351,6 +371,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 +426,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.14",
   "description": "Beautiful, animated, accessible React Native components plus API/auth/logging/network/storage utilities for Webority projects.",
   "keywords": [
     "react-native",