react-native-nitro-modal 0.2.0 → 0.3.0-rc

package/nitrogen/generated/shared/c++/{SheetDetent.hpp → NamedSheetDetent.hpp}

@@ -1,5 +1,5 @@
 ///
-/// SheetDetent.hpp
+/// NamedSheetDetent.hpp
 /// This file was generated by nitrogen. DO NOT MODIFY THIS FILE.
 /// https://github.com/mrousavy/nitro
 /// Copyright © Marc Rousavy @ Margelo
@@ -26,9 +26,9 @@
 namespace margelo::nitro::nitromodal {
 
   /**
-   * An enum which can be represented as a JavaScript union (SheetDetent).
+   * An enum which can be represented as a JavaScript union (NamedSheetDetent).
    */
-  enum class SheetDetent {
+  enum class NamedSheetDetent {
     SMALL      SWIFT_NAME(small) = 0,
     MEDIUM      SWIFT_NAME(medium) = 1,
     LARGE      SWIFT_NAME(large) = 2,
@@ -39,28 +39,28 @@ namespace margelo::nitro::nitromodal {
 
 namespace margelo::nitro {
 
-  // C++ SheetDetent <> JS SheetDetent (union)
+  // C++ NamedSheetDetent <> JS NamedSheetDetent (union)
   template <>
-  struct JSIConverter<margelo::nitro::nitromodal::SheetDetent> final {
-    static inline margelo::nitro::nitromodal::SheetDetent fromJSI(jsi::Runtime& runtime, const jsi::Value& arg) {
+  struct JSIConverter<margelo::nitro::nitromodal::NamedSheetDetent> final {
+    static inline margelo::nitro::nitromodal::NamedSheetDetent fromJSI(jsi::Runtime& runtime, const jsi::Value& arg) {
       std::string unionValue = JSIConverter<std::string>::fromJSI(runtime, arg);
       switch (hashString(unionValue.c_str(), unionValue.size())) {
-        case hashString("small"): return margelo::nitro::nitromodal::SheetDetent::SMALL;
-        case hashString("medium"): return margelo::nitro::nitromodal::SheetDetent::MEDIUM;
-        case hashString("large"): return margelo::nitro::nitromodal::SheetDetent::LARGE;
-        case hashString("fitContent"): return margelo::nitro::nitromodal::SheetDetent::FITCONTENT;
+        case hashString("small"): return margelo::nitro::nitromodal::NamedSheetDetent::SMALL;
+        case hashString("medium"): return margelo::nitro::nitromodal::NamedSheetDetent::MEDIUM;
+        case hashString("large"): return margelo::nitro::nitromodal::NamedSheetDetent::LARGE;
+        case hashString("fitContent"): return margelo::nitro::nitromodal::NamedSheetDetent::FITCONTENT;
         default: [[unlikely]]
-          throw std::invalid_argument("Cannot convert \"" + unionValue + "\" to enum SheetDetent - invalid value!");
+          throw std::invalid_argument("Cannot convert \"" + unionValue + "\" to enum NamedSheetDetent - invalid value!");
       }
     }
-    static inline jsi::Value toJSI(jsi::Runtime& runtime, margelo::nitro::nitromodal::SheetDetent arg) {
+    static inline jsi::Value toJSI(jsi::Runtime& runtime, margelo::nitro::nitromodal::NamedSheetDetent arg) {
       switch (arg) {
-        case margelo::nitro::nitromodal::SheetDetent::SMALL: return JSIConverter<std::string>::toJSI(runtime, "small");
-        case margelo::nitro::nitromodal::SheetDetent::MEDIUM: return JSIConverter<std::string>::toJSI(runtime, "medium");
-        case margelo::nitro::nitromodal::SheetDetent::LARGE: return JSIConverter<std::string>::toJSI(runtime, "large");
-        case margelo::nitro::nitromodal::SheetDetent::FITCONTENT: return JSIConverter<std::string>::toJSI(runtime, "fitContent");
+        case margelo::nitro::nitromodal::NamedSheetDetent::SMALL: return JSIConverter<std::string>::toJSI(runtime, "small");
+        case margelo::nitro::nitromodal::NamedSheetDetent::MEDIUM: return JSIConverter<std::string>::toJSI(runtime, "medium");
+        case margelo::nitro::nitromodal::NamedSheetDetent::LARGE: return JSIConverter<std::string>::toJSI(runtime, "large");
+        case margelo::nitro::nitromodal::NamedSheetDetent::FITCONTENT: return JSIConverter<std::string>::toJSI(runtime, "fitContent");
         default: [[unlikely]]
-          throw std::invalid_argument("Cannot convert SheetDetent to JS - invalid value: "
+          throw std::invalid_argument("Cannot convert NamedSheetDetent to JS - invalid value: "
                                     + std::to_string(static_cast<int>(arg)) + "!");
       }
     }

package/nitrogen/generated/shared/c++/views/HybridNitroModalComponent.cpp

@@ -22,7 +22,8 @@ namespace margelo::nitro::nitromodal::views {
     react::ViewProps(context, sourceProps, rawProps, filterObjectKeys),
     isOpen(nitro::ReactProp<bool>::fromRawValue("NitroModal", "isOpen", rawProps, sourceProps.isOpen)),
     mode(nitro::ReactProp<ModalMode>::fromRawValue("NitroModal", "mode", rawProps, sourceProps.mode)),
-    detents(nitro::ReactProp<std::vector<SheetDetent>>::fromRawValue("NitroModal", "detents", rawProps, sourceProps.detents)),
+    isInline(nitro::ReactProp<bool>::fromRawValue("NitroModal", "isInline", rawProps, sourceProps.isInline)),
+    detents(nitro::ReactProp<std::vector<std::variant<NamedSheetDetent, double>>>::fromRawValue("NitroModal", "detents", rawProps, sourceProps.detents)),
     initialDetentIndex(nitro::ReactProp<double>::fromRawValue("NitroModal", "initialDetentIndex", rawProps, sourceProps.initialDetentIndex)),
     backdropColor(nitro::ReactProp<double>::fromRawValue("NitroModal", "backdropColor", rawProps, sourceProps.backdropColor)),
     backdropOpacity(nitro::ReactProp<double>::fromRawValue("NitroModal", "backdropOpacity", rawProps, sourceProps.backdropOpacity)),
@@ -35,18 +36,22 @@ namespace margelo::nitro::nitromodal::views {
     contentBackgroundColor(nitro::ReactProp<std::optional<double>>::fromRawValue("NitroModal", "contentBackgroundColor", rawProps, sourceProps.contentBackgroundColor)),
     keyboardBehavior(nitro::ReactProp<KeyboardBehavior>::fromRawValue("NitroModal", "keyboardBehavior", rawProps, sourceProps.keyboardBehavior)),
     popupAnimation(nitro::ReactProp<PopupAnimation>::fromRawValue("NitroModal", "popupAnimation", rawProps, sourceProps.popupAnimation)),
+    pullToRefreshEnabled(nitro::ReactProp<bool>::fromRawValue("NitroModal", "pullToRefreshEnabled", rawProps, sourceProps.pullToRefreshEnabled)),
     onPresent(nitro::ReactProp<std::optional<std::function<void()>>>::fromRawValue("NitroModal", "onPresent", rawProps, sourceProps.onPresent)),
     onDismiss(nitro::ReactProp<std::optional<std::function<void(DismissReason /* reason */)>>>::fromRawValue("NitroModal", "onDismiss", rawProps, sourceProps.onDismiss)),
     onDetentChange(nitro::ReactProp<std::optional<std::function<void(double /* index */)>>>::fromRawValue("NitroModal", "onDetentChange", rawProps, sourceProps.onDetentChange)),
     onBackdropPress(nitro::ReactProp<std::optional<std::function<void()>>>::fromRawValue("NitroModal", "onBackdropPress", rawProps, sourceProps.onBackdropPress)),
     onBackButtonPress(nitro::ReactProp<std::optional<std::function<void()>>>::fromRawValue("NitroModal", "onBackButtonPress", rawProps, sourceProps.onBackButtonPress)),
     onContentAreaChange(nitro::ReactProp<std::optional<std::function<void(const ModalContentArea& /* area */)>>>::fromRawValue("NitroModal", "onContentAreaChange", rawProps, sourceProps.onContentAreaChange)),
+    onPullToRefresh(nitro::ReactProp<std::optional<std::function<void()>>>::fromRawValue("NitroModal", "onPullToRefresh", rawProps, sourceProps.onPullToRefresh)),
+    onRestingTopChange(nitro::ReactProp<std::optional<std::function<void(double /* top */)>>>::fromRawValue("NitroModal", "onRestingTopChange", rawProps, sourceProps.onRestingTopChange)),
     hybridRef(nitro::ReactProp<std::optional<std::function<void(const std::shared_ptr<HybridNitroModalSpec>& /* ref */)>>>::fromRawValue("NitroModal", "hybridRef", rawProps, sourceProps.hybridRef)) { }
 
   bool HybridNitroModalProps::filterObjectKeys(const std::string& propName) {
     switch (hashString(propName)) {
       case hashString("isOpen"): return true;
       case hashString("mode"): return true;
+      case hashString("isInline"): return true;
       case hashString("detents"): return true;
       case hashString("initialDetentIndex"): return true;
       case hashString("backdropColor"): return true;
@@ -60,12 +65,15 @@ namespace margelo::nitro::nitromodal::views {
       case hashString("contentBackgroundColor"): return true;
       case hashString("keyboardBehavior"): return true;
       case hashString("popupAnimation"): return true;
+      case hashString("pullToRefreshEnabled"): return true;
       case hashString("onPresent"): return true;
       case hashString("onDismiss"): return true;
       case hashString("onDetentChange"): return true;
       case hashString("onBackdropPress"): return true;
       case hashString("onBackButtonPress"): return true;
       case hashString("onContentAreaChange"): return true;
+      case hashString("onPullToRefresh"): return true;
+      case hashString("onRestingTopChange"): return true;
       case hashString("hybridRef"): return true;
       default: return false;
     }

package/nitrogen/generated/shared/c++/views/HybridNitroModalComponent.hpp

@@ -18,7 +18,8 @@
 #include <string>
 
 #include "ModalMode.hpp"
-#include "SheetDetent.hpp"
+#include "NamedSheetDetent.hpp"
+#include <variant>
 #include <vector>
 #include <optional>
 #include "KeyboardBehavior.hpp"
@@ -51,7 +52,8 @@ namespace margelo::nitro::nitromodal::views {
   public:
     nitro::ReactProp<bool> isOpen;
     nitro::ReactProp<ModalMode> mode;
-    nitro::ReactProp<std::vector<SheetDetent>> detents;
+    nitro::ReactProp<bool> isInline;
+    nitro::ReactProp<std::vector<std::variant<NamedSheetDetent, double>>> detents;
     nitro::ReactProp<double> initialDetentIndex;
     nitro::ReactProp<double> backdropColor;
     nitro::ReactProp<double> backdropOpacity;
@@ -64,18 +66,22 @@ namespace margelo::nitro::nitromodal::views {
     nitro::ReactProp<std::optional<double>> contentBackgroundColor;
     nitro::ReactProp<KeyboardBehavior> keyboardBehavior;
     nitro::ReactProp<PopupAnimation> popupAnimation;
+    nitro::ReactProp<bool> pullToRefreshEnabled;
     nitro::ReactProp<std::optional<std::function<void()>>> onPresent;
     nitro::ReactProp<std::optional<std::function<void(DismissReason /* reason */)>>> onDismiss;
     nitro::ReactProp<std::optional<std::function<void(double /* index */)>>> onDetentChange;
     nitro::ReactProp<std::optional<std::function<void()>>> onBackdropPress;
     nitro::ReactProp<std::optional<std::function<void()>>> onBackButtonPress;
     nitro::ReactProp<std::optional<std::function<void(const ModalContentArea& /* area */)>>> onContentAreaChange;
+    nitro::ReactProp<std::optional<std::function<void()>>> onPullToRefresh;
+    nitro::ReactProp<std::optional<std::function<void(double /* top */)>>> onRestingTopChange;
     nitro::ReactProp<std::optional<std::function<void(const std::shared_ptr<HybridNitroModalSpec>& /* ref */)>>> hybridRef;
 
     [[nodiscard]]
     bool hasSameProps(const HybridNitroModalProps& other) const noexcept {
       return isOpen.hasSameValue(other.isOpen) &&
              mode.hasSameValue(other.mode) &&
+             isInline.hasSameValue(other.isInline) &&
              detents.hasSameValue(other.detents) &&
              initialDetentIndex.hasSameValue(other.initialDetentIndex) &&
              backdropColor.hasSameValue(other.backdropColor) &&
@@ -89,12 +95,15 @@ namespace margelo::nitro::nitromodal::views {
              contentBackgroundColor.hasSameValue(other.contentBackgroundColor) &&
              keyboardBehavior.hasSameValue(other.keyboardBehavior) &&
              popupAnimation.hasSameValue(other.popupAnimation) &&
+             pullToRefreshEnabled.hasSameValue(other.pullToRefreshEnabled) &&
              onPresent.hasSameValue(other.onPresent) &&
              onDismiss.hasSameValue(other.onDismiss) &&
              onDetentChange.hasSameValue(other.onDetentChange) &&
              onBackdropPress.hasSameValue(other.onBackdropPress) &&
              onBackButtonPress.hasSameValue(other.onBackButtonPress) &&
              onContentAreaChange.hasSameValue(other.onContentAreaChange) &&
+             onPullToRefresh.hasSameValue(other.onPullToRefresh) &&
+             onRestingTopChange.hasSameValue(other.onRestingTopChange) &&
              hybridRef.hasSameValue(other.hybridRef);
     }
 
@@ -102,6 +111,7 @@ namespace margelo::nitro::nitromodal::views {
     bool hasAnyProvidedProps() const noexcept {
       return isOpen.isProvided() ||
              mode.isProvided() ||
+             isInline.isProvided() ||
              detents.isProvided() ||
              initialDetentIndex.isProvided() ||
              backdropColor.isProvided() ||
@@ -115,12 +125,15 @@ namespace margelo::nitro::nitromodal::views {
              contentBackgroundColor.isProvided() ||
              keyboardBehavior.isProvided() ||
              popupAnimation.isProvided() ||
+             pullToRefreshEnabled.isProvided() ||
              onPresent.isProvided() ||
              onDismiss.isProvided() ||
              onDetentChange.isProvided() ||
              onBackdropPress.isProvided() ||
              onBackButtonPress.isProvided() ||
              onContentAreaChange.isProvided() ||
+             onPullToRefresh.isProvided() ||
+             onRestingTopChange.isProvided() ||
              hybridRef.isProvided();
     }
 

package/nitrogen/generated/shared/json/NitroModalConfig.json

@@ -6,6 +6,7 @@
   "validAttributes": {
     "isOpen": true,
     "mode": true,
+    "isInline": true,
     "detents": true,
     "initialDetentIndex": true,
     "backdropColor": true,
@@ -19,12 +20,15 @@
     "contentBackgroundColor": true,
     "keyboardBehavior": true,
     "popupAnimation": true,
+    "pullToRefreshEnabled": true,
     "onPresent": true,
     "onDismiss": true,
     "onDetentChange": true,
     "onBackdropPress": true,
     "onBackButtonPress": true,
     "onContentAreaChange": true,
+    "onPullToRefresh": true,
+    "onRestingTopChange": true,
     "hybridRef": true
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-nitro-modal",
-  "version": "0.2.0",
+  "version": "0.3.0-rc",
   "description": "react native native modal",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/NitroModal.nitro.ts

@@ -13,13 +13,20 @@ import type {
 export type ModalMode = 'bottomSheet' | 'popup';
 
 /**
- * Resting heights of a `bottomSheet`.
+ * Named resting heights of a `bottomSheet`.
  * - `small`: ~25% of the available height.
  * - `medium`: ~50% of the available height.
  * - `large`: the full available height.
  * - `fitContent`: the measured height of the React content.
  */
-export type SheetDetent = 'small' | 'medium' | 'large' | 'fitContent';
+export type NamedSheetDetent = 'small' | 'medium' | 'large' | 'fitContent';
+
+/**
+ * A resting height of a `bottomSheet`: a named height, or the height
+ * (dp/pt) of the content above the bottom safe area, clamped to the
+ * available height.
+ */
+export type SheetDetent = NamedSheetDetent | number;
 
 /**
  * How the modal reacts to the software keyboard.
@@ -48,6 +55,12 @@ export interface NitroModalProps extends HybridViewProps {
   /** Whether the modal should be presented. */
   isOpen: boolean;
   mode: ModalMode;
+  /**
+   * A `bottomSheet` that lives inside the host view's own bounds instead of
+   * being presented over the app: no backdrop, touches outside the sheet
+   * reach the views behind it, and the user can't dismiss it.
+   */
+  isInline: boolean;
   /** Detents of a `bottomSheet`, smallest first. At most 3 are used on Android. */
   detents: SheetDetent[];
   /** Index into `detents` that the sheet opens at. */
@@ -68,6 +81,11 @@ export interface NitroModalProps extends HybridViewProps {
   contentBackgroundColor?: number;
   keyboardBehavior: KeyboardBehavior;
   popupAnimation: PopupAnimation;
+  /**
+   * Pulling a `bottomSheet` down past its lowest detent calls
+   * `onPullToRefresh`. Needs `dismissOnSwipe` off (always the case inline).
+   */
+  pullToRefreshEnabled: boolean;
 
   /** The present transition finished. */
   onPresent?: () => void;
@@ -80,6 +98,16 @@ export interface NitroModalProps extends HybridViewProps {
   onBackButtonPress?: () => void;
   /** The area available to the content changed (rotation, keyboard, sheet sizing). */
   onContentAreaChange?: (area: ModalContentArea) => void;
+  /**
+   * The user pulled the sheet down past its lowest detent and let go. The
+   * gesture must start with the sheet resting on that detent.
+   */
+  onPullToRefresh?: () => void;
+  /**
+   * Inline sheets: where the sheet's top rests within the host view (or
+   * will, once it settles). Lets React lay the content out where it is shown.
+   */
+  onRestingTopChange?: (top: number) => void;
 }
 
 export interface NitroModalMethods extends HybridViewMethods {

package/src/NitroModal.tsx

@@ -21,12 +21,22 @@ import type {
   KeyboardBehavior,
   ModalContentArea,
   ModalMode,
+  NamedSheetDetent,
   NitroModal as NitroModalHybridView,
   PopupAnimation,
   SheetDetent,
 } from './NitroModal.nitro';
 import { callback, NitroModalView } from './NitroModalView';
 
+/**
+ * Where a `bottomSheet` lives.
+ * - `modal`: presented over the whole app, with a backdrop.
+ * - `inline`: inside the component's own frame (`style`), as part of your
+ *   screen. No backdrop, the views behind it stay interactive, and the user
+ *   can't dismiss it.
+ */
+export type ModalPresentation = 'modal' | 'inline';
+
 export interface NitroModalRef {
   /** Opens the modal. Only for uncontrolled usage (no `isOpen` prop). */
   present(): void;
@@ -45,7 +55,23 @@ export interface NitroModalProps {
   isOpen?: boolean;
   /** @default 'bottomSheet' */
   mode?: ModalMode;
-  /** Sheet heights, smallest first. Android uses at most three. @default ['fitContent'] */
+  /**
+   * `inline` keeps a `bottomSheet` inside this component's frame, like a
+   * persistent sheet that is part of the screen. Popups are always modal.
+   * @default 'modal'
+   */
+  presentation?: ModalPresentation;
+  /**
+   * Inline only: the frame the sheet lives in, laid out like any view.
+   * The sheet rests against its bottom edge and its largest detent reaches its
+   * top edge. @default StyleSheet.absoluteFill
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Sheet heights, smallest first: named sizes, or the content height in
+   * dp/pt above the bottom safe area. Android uses at most three.
+   * @default ['fitContent']
+   */
   detents?: SheetDetent[];
   /** @default 0 */
   initialDetentIndex?: number;
@@ -78,6 +104,13 @@ export interface NitroModalProps {
   onDetentChange?: (index: number) => void;
   onBackdropPress?: () => void;
   onBackButtonPress?: () => void;
+  /**
+   * Pull-to-refresh: the user dragged the sheet down past its lowest detent
+   * and let go. Only for sheets that can't be swiped away (inline, or
+   * `dismissOnSwipe={false}`), and only from a gesture that starts with the
+   * sheet resting on its lowest detent.
+   */
+  onPullToRefresh?: () => void;
   children?: ReactNode;
   testID?: string;
   ref?: Ref<NitroModalRef>;
@@ -86,6 +119,13 @@ export interface NitroModalProps {
 const DEFAULT_DETENTS: SheetDetent[] = ['fitContent'];
 const BLACK = 0xff000000;
 
+function parseDetent(value: string): SheetDetent {
+  const points = Number(value);
+  return value !== '' && Number.isFinite(points)
+    ? points
+    : (value as NamedSheetDetent);
+}
+
 function toNativeColor(color: ColorValue | undefined): number | undefined {
   if (color == null) return undefined;
   const processed = processColor(color);
@@ -96,6 +136,8 @@ function toNativeColor(color: ColorValue | undefined): number | undefined {
 export function NitroModal({
   isOpen,
   mode = 'bottomSheet',
+  presentation = 'modal',
+  style,
   detents = DEFAULT_DETENTS,
   initialDetentIndex = 0,
   backdropColor = 'black',
@@ -115,11 +157,13 @@ export function NitroModal({
   onDetentChange,
   onBackdropPress,
   onBackButtonPress,
+  onPullToRefresh,
   children,
   testID,
   ref,
 }: NitroModalProps) {
   const isControlled = isOpen !== undefined;
+  const isInline = presentation === 'inline' && mode === 'bottomSheet';
   const [internalOpen, setInternalOpen] = useState(false);
   const open = isControlled ? isOpen : internalOpen;
 
@@ -134,6 +178,10 @@ export function NitroModal({
   const renderContent = open || sessionActive;
 
   const [area, setArea] = useState<ModalContentArea | null>(null);
+  // Inline (iOS/Android): where the sheet's top rests in the host. The content
+  // is laid out there so `measure()`, which presses rely on, matches the
+  // screen; native cancels the offset out on screen.
+  const [restingTop, setRestingTop] = useState(0);
   const hybridRef = useRef<NitroModalHybridView | null>(null);
 
   // Native callbacks are created once (stable props, no native updates on
@@ -145,6 +193,7 @@ export function NitroModal({
     onDetentChange,
     onBackdropPress,
     onBackButtonPress,
+    onPullToRefresh,
   });
   useLayoutEffect(() => {
     latest.current = {
@@ -154,6 +203,7 @@ export function NitroModal({
       onDetentChange,
       onBackdropPress,
       onBackButtonPress,
+      onPullToRefresh,
     };
   });
 
@@ -180,6 +230,12 @@ export function NitroModal({
       onBackButtonPress: callback(() => {
         latest.current.onBackButtonPress?.();
       }),
+      onPullToRefresh: callback(() => {
+        latest.current.onPullToRefresh?.();
+      }),
+      onRestingTopChange: callback((top: number) => {
+        setRestingTop(top);
+      }),
       onContentAreaChange: callback((next: ModalContentArea) => {
         setArea((current) =>
           current?.width === next.width && current.height === next.height
@@ -220,7 +276,7 @@ export function NitroModal({
   // Arrays are diffed by identity, so keep one instance per distinct value.
   const detentsKey = detents.join(',');
   const nativeDetents = useMemo(
-    () => [...new Set(detentsKey.split(','))] as SheetDetent[],
+    () => [...new Set(detentsKey.split(','))].map(parseDetent),
     [detentsKey]
   );
 
@@ -240,9 +296,11 @@ export function NitroModal({
 
   return (
     <NitroModalView
-      style={styles.host}
+      style={isInline ? [StyleSheet.absoluteFill, style] : styles.host}
+      pointerEvents={isInline ? 'box-none' : undefined}
       isOpen={open}
       mode={mode}
+      isInline={isInline}
       detents={nativeDetents}
       initialDetentIndex={initialDetentIndex}
       backdropColor={toNativeColor(backdropColor) ?? BLACK}
@@ -256,13 +314,19 @@ export function NitroModal({
       contentBackgroundColor={toNativeColor(backgroundColor)}
       keyboardBehavior={keyboardBehavior}
       popupAnimation={popupAnimation}
+      pullToRefreshEnabled={onPullToRefresh != null}
       {...nativeCallbacks}
     >
       {renderContent ? (
         <View
           collapsable={false}
           testID={testID}
-          style={[styles.container, containerStyle, contentContainerStyle]}
+          style={[
+            styles.container,
+            containerStyle,
+            contentContainerStyle,
+            isInline && restingTop > 0 ? { top: restingTop } : null,
+          ]}
         >
           {children}
         </View>

package/src/NitroModalView.web.tsx

@@ -1,19 +1,23 @@
 /// <reference lib="dom" />
 
 import {
+  useCallback,
   useLayoutEffect,
   useRef,
   useState,
   type CSSProperties,
   type ReactNode,
 } from 'react';
-import { Modal } from 'react-native';
+import { Modal, View, type StyleProp, type ViewStyle } from 'react-native';
 import type { ReactNativeView } from 'react-native-nitro-modules';
 import type { NitroModalMethods, NitroModalProps } from './NitroModal.nitro';
+import { clipOverflow } from './web/dom';
 import { ModalController } from './web/ModalController';
 
 interface WebNitroModalViewProps extends NitroModalProps {
   hybridRef?: (instance: NitroModalMethods) => void;
+  /** Inline: the frame the sheet fills. */
+  style?: StyleProp<ViewStyle>;
   children?: ReactNode;
 }
 
@@ -27,9 +31,13 @@ export function callback<T>(func: T): T {
  * Native Web's `Modal` (a portal with focus trapping, Escape handling and
  * stacking with other modals) and is laid out and animated by the presenters
  * in `./web`. In place, it renders nothing.
+ *
+ * An inline sheet renders in place instead: a view laid out with `style`,
+ * holding the sheet's elements.
  */
 function WebNitroModalView(props: WebNitroModalViewProps) {
   const { hybridRef, children } = props;
+  const isInline = props.isInline && props.mode === 'bottomSheet';
   const [mounted, setMounted] = useState(false);
   const [controller] = useState(() => new ModalController(setMounted));
   const overlay = useRef<HTMLDivElement>(null);
@@ -69,10 +77,46 @@ function WebNitroModalView(props: WebNitroModalViewProps) {
     }
   });
 
-  if (!mounted) return null;
+  const hostRef = useCallback(
+    (node: unknown) => {
+      controller.hostDidChange(node instanceof HTMLElement ? node : null);
+    },
+    [controller]
+  );
 
   // Styles set here never change; the presenters write sizes, positions,
   // colors and animated values straight to the elements.
+  const layer = mounted ? (
+    // Focusable so the modal's focus trap lands here first rather than on the first input.
+    <div
+      ref={overlay}
+      tabIndex={-1}
+      style={
+        isInline
+          ? { ...styles.inlineOverlay, overflow: clipOverflow() }
+          : styles.overlay
+      }
+    >
+      <div ref={backdrop} aria-hidden style={styles.backdrop} />
+      <div ref={surface} style={styles.surface}>
+        <div ref={content} style={styles.content}>
+          {children}
+        </div>
+        <div ref={grabber} aria-hidden style={styles.grabber} />
+      </div>
+    </div>
+  ) : null;
+
+  if (isInline) {
+    return (
+      <View ref={hostRef} style={props.style} pointerEvents="box-none">
+        {layer}
+      </View>
+    );
+  }
+
+  if (!layer) return null;
+
   return (
     <Modal
       visible
@@ -80,16 +124,7 @@ function WebNitroModalView(props: WebNitroModalViewProps) {
       animationType="none"
       onRequestClose={controller.handleBackPress}
     >
-      {/* Focusable so the modal's focus trap lands here first rather than on the first input. */}
-      <div ref={overlay} tabIndex={-1} style={styles.overlay}>
-        <div ref={backdrop} aria-hidden style={styles.backdrop} />
-        <div ref={surface} style={styles.surface}>
-          <div ref={content} style={styles.content}>
-            {children}
-          </div>
-          <div ref={grabber} aria-hidden style={styles.grabber} />
-        </div>
-      </div>
+      {layer}
     </Modal>
   );
 }
@@ -100,6 +135,13 @@ const styles = {
     inset: 0,
     outline: 'none',
   },
+  // Fills the host view; the sheet hides below its bottom edge.
+  inlineOverlay: {
+    position: 'absolute',
+    inset: 0,
+    outline: 'none',
+    pointerEvents: 'none',
+  },
   backdrop: {
     position: 'absolute',
     inset: 0,

package/src/index.tsx

@@ -1,5 +1,6 @@
 export {
   NitroModal,
+  type ModalPresentation,
   type NitroModalProps,
   type NitroModalRef,
 } from './NitroModal';
@@ -7,6 +8,7 @@ export type {
   DismissReason,
   KeyboardBehavior,
   ModalMode,
+  NamedSheetDetent,
   PopupAnimation,
   SheetDetent,
 } from './NitroModal.nitro';

package/src/web/AnimatedValue.ts

@@ -71,6 +71,10 @@ export class AnimatedValue {
     return this.current;
   }
 
+  get isAnimating(): boolean {
+    return this.run != null;
+  }
+
   /** Jumps to `value`, cancelling any animation. */
   set(value: number) {
     this.stop();

package/src/web/ModalConfig.ts

@@ -9,6 +9,11 @@ import type {
 /** Snapshot of the props that shape a presentation. */
 export interface ModalConfig {
   mode: ModalMode;
+  /**
+   * A `bottomSheet` rendered in place, filling the host view: no backdrop,
+   * the page behind stays interactive, and the user can't dismiss it.
+   */
+  isInline: boolean;
   detents: SheetDetent[];
   initialDetentIndex: number;
   /** 0xAARRGGBB, from `processColor`. */
@@ -25,11 +30,15 @@ export interface ModalConfig {
   contentBackgroundColor: number | null;
   keyboardBehavior: KeyboardBehavior;
   popupAnimation: PopupAnimation;
+  pullToRefreshEnabled: boolean;
 }
 
 export function makeConfig(props: NitroModalProps): ModalConfig {
+  // An inline sheet is part of the page; the user can't dismiss it.
+  const isInline = props.isInline && props.mode === 'bottomSheet';
   return {
     mode: props.mode,
+    isInline,
     detents: props.detents,
     initialDetentIndex: Number.isFinite(props.initialDetentIndex)
       ? Math.trunc(props.initialDetentIndex)
@@ -37,14 +46,15 @@ export function makeConfig(props: NitroModalProps): ModalConfig {
     backdropColor: props.backdropColor,
     backdropOpacity: props.backdropOpacity,
     backdropBlurRadius: props.backdropBlurRadius,
-    dismissOnBackdropPress: props.dismissOnBackdropPress,
-    dismissOnSwipe: props.dismissOnSwipe,
-    dismissOnBackButton: props.dismissOnBackButton,
+    dismissOnBackdropPress: props.dismissOnBackdropPress && !isInline,
+    dismissOnSwipe: props.dismissOnSwipe && !isInline,
+    dismissOnBackButton: props.dismissOnBackButton && !isInline,
     grabberVisible: props.grabberVisible,
     cornerRadius: props.cornerRadius >= 0 ? props.cornerRadius : null,
     contentBackgroundColor: props.contentBackgroundColor ?? null,
     keyboardBehavior: props.keyboardBehavior,
     popupAnimation: props.popupAnimation,
+    pullToRefreshEnabled: props.pullToRefreshEnabled,
   };
 }