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

package/nitrogen/generated/shared/c++/HybridNitroModalSpec.hpp

@@ -15,8 +15,8 @@
 
 // Forward declaration of `ModalMode` to properly resolve imports.
 namespace margelo::nitro::nitromodal { enum class ModalMode; }
-// Forward declaration of `SheetDetent` to properly resolve imports.
-namespace margelo::nitro::nitromodal { enum class SheetDetent; }
+// Forward declaration of `NamedSheetDetent` to properly resolve imports.
+namespace margelo::nitro::nitromodal { enum class NamedSheetDetent; }
 // Forward declaration of `KeyboardBehavior` to properly resolve imports.
 namespace margelo::nitro::nitromodal { enum class KeyboardBehavior; }
 // Forward declaration of `PopupAnimation` to properly resolve imports.
@@ -27,7 +27,8 @@ namespace margelo::nitro::nitromodal { enum class DismissReason; }
 namespace margelo::nitro::nitromodal { struct ModalContentArea; }
 
 #include "ModalMode.hpp"
-#include "SheetDetent.hpp"
+#include "NamedSheetDetent.hpp"
+#include <variant>
 #include <vector>
 #include <optional>
 #include "KeyboardBehavior.hpp"
@@ -67,8 +68,10 @@ namespace margelo::nitro::nitromodal {
       virtual void setIsOpen(bool isOpen) = 0;
       virtual ModalMode getMode() = 0;
       virtual void setMode(ModalMode mode) = 0;
-      virtual std::vector<SheetDetent> getDetents() = 0;
-      virtual void setDetents(const std::vector<SheetDetent>& detents) = 0;
+      virtual bool getIsInline() = 0;
+      virtual void setIsInline(bool isInline) = 0;
+      virtual std::vector<std::variant<NamedSheetDetent, double>> getDetents() = 0;
+      virtual void setDetents(const std::vector<std::variant<NamedSheetDetent, double>>& detents) = 0;
       virtual double getInitialDetentIndex() = 0;
       virtual void setInitialDetentIndex(double initialDetentIndex) = 0;
       virtual double getBackdropColor() = 0;
@@ -93,6 +96,8 @@ namespace margelo::nitro::nitromodal {
       virtual void setKeyboardBehavior(KeyboardBehavior keyboardBehavior) = 0;
       virtual PopupAnimation getPopupAnimation() = 0;
       virtual void setPopupAnimation(PopupAnimation popupAnimation) = 0;
+      virtual bool getPullToRefreshEnabled() = 0;
+      virtual void setPullToRefreshEnabled(bool pullToRefreshEnabled) = 0;
       virtual std::optional<std::function<void()>> getOnPresent() = 0;
       virtual void setOnPresent(const std::optional<std::function<void()>>& onPresent) = 0;
       virtual std::optional<std::function<void(DismissReason /* reason */)>> getOnDismiss() = 0;
@@ -105,6 +110,10 @@ namespace margelo::nitro::nitromodal {
       virtual void setOnBackButtonPress(const std::optional<std::function<void()>>& onBackButtonPress) = 0;
       virtual std::optional<std::function<void(const ModalContentArea& /* area */)>> getOnContentAreaChange() = 0;
       virtual void setOnContentAreaChange(const std::optional<std::function<void(const ModalContentArea& /* area */)>>& onContentAreaChange) = 0;
+      virtual std::optional<std::function<void()>> getOnPullToRefresh() = 0;
+      virtual void setOnPullToRefresh(const std::optional<std::function<void()>>& onPullToRefresh) = 0;
+      virtual std::optional<std::function<void(double /* top */)>> getOnRestingTopChange() = 0;
+      virtual void setOnRestingTopChange(const std::optional<std::function<void(double /* top */)>>& onRestingTopChange) = 0;
 
     public:
       // Methods

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.1.5",
+  "version": "0.3.0-rc",
   "description": "react native native modal",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",
@@ -47,7 +47,8 @@
   "keywords": [
     "react-native",
     "ios",
-    "android"
+    "android",
+    "web"
   ],
   "repository": {
     "type": "git",

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

@@ -16,17 +16,26 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
-import { callback } from 'react-native-nitro-modules';
 import type {
   DismissReason,
   KeyboardBehavior,
   ModalContentArea,
   ModalMode,
+  NamedSheetDetent,
   NitroModal as NitroModalHybridView,
   PopupAnimation,
   SheetDetent,
 } from './NitroModal.nitro';
-import { NitroModalView } from './NitroModalView';
+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). */
@@ -46,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;
@@ -54,13 +79,13 @@ export interface NitroModalProps {
   backdropColor?: ColorValue;
   /** @default 0.4 */
   backdropOpacity?: number;
-  /** Blur radius (dp/pt) behind the modal. Android 12+; approximated on iOS. @default 0 */
+  /** Blur radius (dp/pt/px) behind the modal. Android 12+; approximated on iOS. @default 0 */
   backdropBlur?: number;
   /** @default true */
   dismissOnBackdropPress?: boolean;
   /** Swipe down to dismiss a `bottomSheet`. @default true */
   dismissOnSwipe?: boolean;
-  /** Android back button/gesture dismisses the modal. @default true */
+  /** Android back button/gesture (Escape on web) dismisses the modal. @default true */
   dismissOnBackButton?: boolean;
   /** @default false */
   showGrabber?: boolean;
@@ -79,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>;
@@ -87,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);
@@ -97,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',
@@ -116,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;
 
@@ -135,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
@@ -146,6 +193,7 @@ export function NitroModal({
     onDetentChange,
     onBackdropPress,
     onBackButtonPress,
+    onPullToRefresh,
   });
   useLayoutEffect(() => {
     latest.current = {
@@ -155,6 +203,7 @@ export function NitroModal({
       onDetentChange,
       onBackdropPress,
       onBackButtonPress,
+      onPullToRefresh,
     };
   });
 
@@ -181,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
@@ -221,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]
   );
 
@@ -241,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}
@@ -257,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.native.tsx

@@ -4,6 +4,10 @@ import { getHostComponent } from 'react-native-nitro-modules';
 const NitroModalConfig = require('react-native-nitro-modal/nitrogen/generated/shared/json/NitroModalConfig.json');
 import type { NitroModalMethods, NitroModalProps } from './NitroModal.nitro';
 
+// Host components need their function props wrapped. Exported from here so
+// web bundles never import `react-native-nitro-modules`.
+export { callback } from 'react-native-nitro-modules';
+
 export const NitroModalView = getHostComponent<
   NitroModalProps,
   NitroModalMethods

package/src/NitroModalView.tsx

@@ -1,22 +1,27 @@
-import type { ReactNativeView } from 'react-native-nitro-modules';
+import type {
+  callback as nitroCallback,
+  ReactNativeView,
+} from 'react-native-nitro-modules';
 import type { NitroModalMethods, NitroModalProps } from './NitroModal.nitro';
 
 let warned = false;
 
 /**
- * Platforms without a native implementation (e.g. web) render nothing.
- * iOS and Android use `NitroModalView.native.tsx`.
+ * Platforms without an implementation render nothing. iOS and Android use
+ * `NitroModalView.native.tsx`, web uses `NitroModalView.web.tsx`.
  */
 function UnsupportedNitroModalView() {
   if (!warned) {
     warned = true;
     console.warn(
-      'react-native-nitro-modal is only implemented on iOS and Android.'
+      'react-native-nitro-modal is only implemented on iOS, Android and web.'
     );
   }
   return null;
 }
 
+export const callback = ((func: unknown) => func) as typeof nitroCallback;
+
 export const NitroModalView =
   UnsupportedNitroModalView as unknown as ReactNativeView<
     NitroModalProps,