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

package/ios/HybridNitroModal.swift

@@ -12,6 +12,9 @@ import UIKit
 /// Presentation is a small state machine so that rapid `isOpen` toggles,
 /// interactive dismissals and unmounts always settle on a consistent state,
 /// and every accepted present request ends with exactly one `onDismiss`.
+///
+/// A modal is presented as a view controller; an inline sheet is a
+/// `SheetView` shown inside `view`.
 final class HybridNitroModal: HybridNitroModalSpec {
   let view = NitroModalHostView()
 
@@ -29,7 +32,8 @@ final class HybridNitroModal: HybridNitroModalSpec {
   }
 
   var mode: ModalMode = .bottomsheet
-  var detents: [SheetDetent] = [.fitcontent]
+  var isInline = false
+  var detents: [SheetDetent] = [.first(.fitcontent)]
   var initialDetentIndex: Double = 0
   var backdropColor: Double = 0xFF00_0000
   var backdropOpacity: Double = 0.4
@@ -42,6 +46,7 @@ final class HybridNitroModal: HybridNitroModalSpec {
   var contentBackgroundColor: Double?
   var keyboardBehavior: KeyboardBehavior = .pan
   var popupAnimation: PopupAnimation = .scale
+  var pullToRefreshEnabled = false
 
   var onPresent: (() -> Void)?
   var onDismiss: ((DismissReason) -> Void)?
@@ -49,6 +54,8 @@ final class HybridNitroModal: HybridNitroModalSpec {
   var onBackdropPress: (() -> Void)?
   var onBackButtonPress: (() -> Void)?
   var onContentAreaChange: ((ModalContentArea) -> Void)?
+  var onPullToRefresh: (() -> Void)?
+  var onRestingTopChange: ((Double) -> Void)?
 
   // MARK: State
 
@@ -66,6 +73,7 @@ final class HybridNitroModal: HybridNitroModalSpec {
   private var reconcileScheduled = false
   private var isDropped = false
   private var presentation: ModalPresenting?
+  private var inlineSheet: SheetView?
   private var lastContentArea: CGSize?
 
   override init() {
@@ -73,17 +81,24 @@ final class HybridNitroModal: HybridNitroModalSpec {
     view.onWindowChange = { [weak self] in
       self?.hostWindowDidChange()
     }
+    view.onLayoutChange = { [weak self] in
+      self?.hostLayoutDidChange()
+    }
     view.contentView.onContentSizeChange = { [weak self] _ in
       self?.presentation?.contentSizeDidChange()
+      self?.inlineSheet?.contentSizeDidChange()
     }
   }
 
   deinit {
     // The last reference can be dropped from the JS thread; UIKit work must
-    // happen on main. `controller` is captured strongly on purpose.
-    guard let controller = presentation else { return }
+    // happen on main. `controller` and `sheet` are captured strongly on purpose.
+    let controller = presentation
+    let sheet = inlineSheet
+    guard controller != nil || sheet != nil else { return }
     DispatchQueue.main.async {
-      controller.presentingViewController?.dismiss(animated: false)
+      controller?.presentingViewController?.dismiss(animated: false)
+      sheet?.removeFromSuperview()
     }
   }
 
@@ -93,8 +108,11 @@ final class HybridNitroModal: HybridNitroModalSpec {
     let next = makeConfig()
     guard next != config else { return }
     config = next
+    view.isInline = next.isInline
     if let presentation {
       presentation.apply(next)
+    } else if let inlineSheet {
+      inlineSheet.apply(next)
     } else {
       reportEstimatedContentArea()
     }
@@ -104,9 +122,13 @@ final class HybridNitroModal: HybridNitroModalSpec {
     isDropped = true
     wantsOpen = false
     sessionActive = false
+    phase = .idle
+    if let sheet = inlineSheet {
+      inlineSheet = nil
+      sheet.removeFromSuperview()
+    }
     guard let controller = presentation else { return }
     presentation = nil
-    phase = .idle
     controller.presentingViewController?.dismiss(animated: false)
   }
 
@@ -128,6 +150,7 @@ final class HybridNitroModal: HybridNitroModalSpec {
     guard index.isFinite else { return }
     DispatchQueue.main.async { [weak self] in
       self?.presentation?.snapToDetent(at: Int(index))
+      self?.inlineSheet?.snapToDetent(at: Int(index))
     }
   }
 
@@ -178,6 +201,10 @@ final class HybridNitroModal: HybridNitroModalSpec {
   }
 
   private func startPresent() {
+    if config.isInline {
+      startInlinePresent()
+      return
+    }
     // Without a window there is nothing to present from; `hostWindowDidChange` retries.
     guard let presenter = topViewController() else { return }
 
@@ -190,12 +217,7 @@ final class HybridNitroModal: HybridNitroModalSpec {
 
     presenter.present(controller, animated: isAnimated) { [weak self, weak controller] in
       guard let self, let controller, self.presentation === controller else { return }
-      self.phase = .presented
-      if !self.isDropped {
-        self.onPresent?()
-      }
-      UIAccessibility.post(notification: .screenChanged, argument: controller.view)
-      self.reconcile()
+      self.didPresent(announcing: controller.view)
     }
 
     if controller.presentingViewController == nil {
@@ -208,7 +230,43 @@ final class HybridNitroModal: HybridNitroModalSpec {
     }
   }
 
+  /// Slides an inline sheet up inside `view`.
+  private func startInlinePresent() {
+    // Needs its laid-out area; `hostLayoutDidChange` retries.
+    guard view.window != nil, view.bounds.width > 0, view.bounds.height > 0 else { return }
+
+    let sheet = SheetView(contentView: view.contentView, config: config, isInline: true)
+    sheet.delegate = self
+    inlineSheet = sheet
+    phase = .presenting
+    view.showInlineSheet(sheet)
+    sheet.layoutIfNeeded()
+    sheet.animateTransition(toOffscreen: false, animated: true, duration: 0.5) { [weak self, weak sheet] in
+      guard let self, let sheet, self.inlineSheet === sheet else { return }
+      self.didPresent(announcing: nil)
+    }
+  }
+
+  private func didPresent(announcing announcedView: UIView?) {
+    phase = .presented
+    if !isDropped {
+      onPresent?()
+    }
+    if let announcedView {
+      UIAccessibility.post(notification: .screenChanged, argument: announcedView)
+    }
+    reconcile()
+  }
+
   private func startDismiss() {
+    if let sheet = inlineSheet {
+      phase = .dismissing
+      sheet.endEditing(true)
+      sheet.animateTransition(toOffscreen: true, animated: true, duration: 0.35) { [weak self] in
+        self?.finishDismiss()
+      }
+      return
+    }
     guard let controller = presentation, let presenting = controller.presentingViewController else {
       finishDismiss()
       return
@@ -223,6 +281,11 @@ final class HybridNitroModal: HybridNitroModalSpec {
   private func finishDismiss() {
     phase = .idle
     presentation = nil
+    if let sheet = inlineSheet {
+      inlineSheet = nil
+      sheet.unlockScroll()
+      sheet.removeFromSuperview()
+    }
     view.contentView.removeFromSuperview()
     endSession()
     reconcile()
@@ -246,20 +309,24 @@ final class HybridNitroModal: HybridNitroModalSpec {
   }
 
   private func makeConfig() -> ModalConfig {
-    ModalConfig(
+    let inline = isInline && mode == .bottomsheet
+    return ModalConfig(
       mode: mode,
-      detents: detents,
+      inlinePresentation: isInline,
+      detents: detents.map(Detent.init),
       initialDetentIndex: initialDetentIndex.isFinite ? Int(initialDetentIndex) : 0,
       backdropColor: UIColor(processedColor: backdropColor),
       backdropOpacity: CGFloat(backdropOpacity),
       backdropBlurRadius: CGFloat(backdropBlurRadius),
-      dismissOnBackdropPress: dismissOnBackdropPress,
-      dismissOnSwipe: dismissOnSwipe,
+      // An inline sheet is part of the screen; the user can't dismiss it.
+      dismissOnBackdropPress: dismissOnBackdropPress && !inline,
+      dismissOnSwipe: dismissOnSwipe && !inline,
       grabberVisible: grabberVisible,
       cornerRadius: cornerRadius >= 0 ? CGFloat(cornerRadius) : nil,
       contentBackgroundColor: contentBackgroundColor.map(UIColor.init(processedColor:)) ?? .systemBackground,
       keyboardBehavior: keyboardBehavior,
-      popupAnimation: popupAnimation
+      popupAnimation: popupAnimation,
+      pullToRefreshEnabled: pullToRefreshEnabled
     )
   }
 
@@ -273,23 +340,37 @@ final class HybridNitroModal: HybridNitroModalSpec {
 
   private func hostWindowDidChange() {
     guard view.window != nil else { return }
-    if presentation == nil {
+    if presentation == nil, inlineSheet == nil {
       reportEstimatedContentArea()
     }
     scheduleReconcile()
   }
 
+  private func hostLayoutDidChange() {
+    guard config.isInline, inlineSheet == nil else { return }
+    reportEstimatedContentArea()
+    if wantsOpen {
+      scheduleReconcile()
+    }
+  }
+
   /// Lets React size the content before the first presentation.
   private func reportEstimatedContentArea() {
     guard let window = view.window else { return }
+    if config.isInline {
+      let bounds = view.bounds
+      let maximum = SheetView.maximumDetentValue(height: bounds.height, insets: view.safeAreaInsets, isInline: true)
+      reportContentArea(CGSize(width: bounds.width, height: SheetView.contentHeight(for: config.detents, maximum: maximum)))
+      return
+    }
     switch config.mode {
     case .popup:
       reportContentArea(PopupViewController.availableRect(in: window.bounds, safeArea: window.safeAreaInsets).size)
     case .bottomsheet:
-      let maximum = SheetViewController.estimatedMaximumDetentValue(in: window)
+      let maximum = SheetView.maximumDetentValue(height: window.bounds.height, insets: window.safeAreaInsets, isInline: false)
       reportContentArea(CGSize(
-        width: SheetViewController.estimatedWidth(in: window),
-        height: SheetViewController.contentHeight(for: config.detents, maximum: maximum)
+        width: SheetView.estimatedWidth(in: window),
+        height: SheetView.contentHeight(for: config.detents, maximum: maximum)
       ))
     }
   }
@@ -325,4 +406,14 @@ extension HybridNitroModal: ModalPresentationDelegate {
   func modalPresentationDidChangeContentArea(_ size: CGSize) {
     reportContentArea(size)
   }
+
+  func modalPresentationDidPullToRefresh() {
+    guard !isDropped else { return }
+    onPullToRefresh?()
+  }
+
+  func modalPresentationDidChangeRestingTop(_ top: CGFloat) {
+    guard !isDropped else { return }
+    onRestingTopChange?(Double(top))
+  }
 }

package/ios/ModalConfig.swift

@@ -5,10 +5,41 @@
 
 import UIKit
 
+/// A resting height of a `bottomSheet`.
+enum Detent: Equatable {
+  case small, medium, large, fitContent
+  /// Content height in points, above the bottom safe area.
+  case height(CGFloat)
+
+  init(_ detent: SheetDetent) {
+    switch detent {
+    case .first(.small): self = .small
+    case .first(.medium): self = .medium
+    case .first(.large): self = .large
+    case .first(.fitcontent): self = .fitContent
+    case .second(let points): self = points.isFinite ? .height(CGFloat(points)) : .large
+    }
+  }
+
+  /// Content height at this detent, given the tallest height the content may
+  /// occupy and the measured height of the content (for `fitContent`).
+  func height(maximum: CGFloat, contentHeight: CGFloat) -> CGFloat {
+    switch self {
+    case .small: return maximum * 0.25
+    case .medium: return maximum * 0.5
+    case .large: return maximum
+    case .fitContent: return min(max(contentHeight, 1), maximum)
+    case .height(let points): return min(max(points, 1), maximum)
+    }
+  }
+}
+
 /// Snapshot of the React props that shape a presentation.
 struct ModalConfig: Equatable {
   var mode: ModalMode = .bottomsheet
-  var detents: [SheetDetent] = [.fitcontent]
+  /// An inline `bottomSheet` (see `isInline`), as opposed to a modal one.
+  var inlinePresentation = false
+  var detents: [Detent] = [.fitContent]
   var initialDetentIndex = 0
   var backdropColor: UIColor = .black
   var backdropOpacity: CGFloat = 0.4
@@ -21,19 +52,30 @@ struct ModalConfig: Equatable {
   var contentBackgroundColor: UIColor = .systemBackground
   var keyboardBehavior: KeyboardBehavior = .pan
   var popupAnimation: PopupAnimation = .scale
+  var pullToRefreshEnabled = false
+
+  /// A `bottomSheet` living in the host view's bounds. Popups are always modal.
+  var isInline: Bool {
+    inlinePresentation && mode == .bottomsheet
+  }
 
   var clampedInitialDetentIndex: Int {
     min(max(initialDetentIndex, 0), max(detents.count - 1, 0))
   }
 }
 
-/// Callbacks from a presented modal controller back to `HybridNitroModal`.
+/// Callbacks from a presented modal controller (or an inline sheet) back to
+/// `HybridNitroModal`.
 protocol ModalPresentationDelegate: AnyObject {
   func modalPresentationDidTapBackdrop()
   /// The user swiped the sheet down far enough to dismiss it.
   func modalPresentationDidRequestSwipeDismiss()
   func modalPresentationDidChangeDetent(_ index: Int)
   func modalPresentationDidChangeContentArea(_ size: CGSize)
+  /// The user pulled the sheet past its lowest detent and let go.
+  func modalPresentationDidPullToRefresh()
+  /// Inline sheets: the sheet's top at rest, in the host view.
+  func modalPresentationDidChangeRestingTop(_ top: CGFloat)
 }
 
 /// A view controller that presents the React content in one of the modal modes.

package/ios/NitroModalHostView.swift

@@ -5,12 +5,24 @@
 
 import UIKit
 
-/// The view Nitro mounts into the React tree. It is an invisible placeholder:
-/// React children mounted into it (see `HybridNitroModalComponent+Children.mm`)
-/// are hosted by `contentView`, which travels into the presented controller.
+/// The view Nitro mounts into the React tree. React children mounted into it
+/// (see `HybridNitroModalComponent+Children.mm`) are hosted by `contentView`.
+///
+/// Modal: an invisible placeholder; `contentView` travels into the presented
+/// controller. Inline: the area the sheet lives in. It hosts the `SheetView`
+/// and only takes touches that land on the sheet.
 final class NitroModalHostView: UIView {
   let contentView = NitroModalContentView()
   var onWindowChange: (() -> Void)?
+  /// The bounds or safe area changed.
+  var onLayoutChange: (() -> Void)?
+
+  var isInline = false {
+    didSet {
+      isUserInteractionEnabled = isInline
+      contentView.isInline = isInline
+    }
+  }
 
   override init(frame: CGRect) {
     super.init(frame: frame)
@@ -27,6 +39,27 @@ final class NitroModalHostView: UIView {
     onWindowChange?()
   }
 
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    onLayoutChange?()
+  }
+
+  override func safeAreaInsetsDidChange() {
+    super.safeAreaInsetsDidChange()
+    onLayoutChange?()
+  }
+
+  override func hitTest(_ point: CGPoint, with event: UIEvent?) -> UIView? {
+    let hit = super.hitTest(point, with: event)
+    return hit === self ? nil : hit
+  }
+
+  func showInlineSheet(_ sheet: SheetView) {
+    sheet.frame = bounds
+    sheet.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    addSubview(sheet)
+  }
+
   @objc(nitroModalMountChild:atIndex:)
   func mountChild(_ child: UIView, atIndex index: Int) {
     contentView.insertReactChild(child, at: index)
@@ -42,22 +75,44 @@ final class NitroModalHostView: UIView {
   }
 }
 
-/// Holds the React children inside the presented modal and reports the size
-/// they occupy, which drives the `fitContent` detent and the popup card size.
+/// Holds the React children inside the modal and reports the size they
+/// occupy, which drives the `fitContent` detent and the popup card size.
 final class NitroModalContentView: UIView {
   var onContentSizeChange: ((CGSize) -> Void)?
 
+  /// Hosted by an inline sheet, inside the React root view.
+  ///
+  /// The Fabric touch handler attached to this view is then disabled: a modal
+  /// lives outside the root view and needs its own, but inline the root's
+  /// handler already sees these touches.
+  var isInline = false {
+    didSet {
+      updateTouchHandlers()
+      setNeedsLayout()
+    }
+  }
+
   private var reactChildren: [UIView] = []
   private var observations: [ObjectIdentifier: [NSKeyValueObservation]] = [:]
   private var lastReportedSize: CGSize = .zero
 
+  /// Where React placed the children. Inline, React lays the content out at
+  /// the sheet's resting top so that `measure()` matches the screen; this
+  /// view's bounds origin cancels that offset out on screen.
+  private var reactOrigin: CGPoint {
+    guard isInline else { return .zero }
+    let minY = reactChildren.map { $0.center.y - $0.bounds.height / 2 }.min() ?? 0
+    return CGPoint(x: 0, y: minY)
+  }
+
   /// Bounding size of the React children. Fabric positions them with
   /// `center`/`bounds`, so this stays correct even with transforms applied.
   var contentSize: CGSize {
-    reactChildren.reduce(.zero) { size, child in
+    let origin = reactOrigin
+    return reactChildren.reduce(.zero) { size, child in
       CGSize(
-        width: max(size.width, child.center.x + child.bounds.width / 2),
-        height: max(size.height, child.center.y + child.bounds.height / 2)
+        width: max(size.width, child.center.x + child.bounds.width / 2 - origin.x),
+        height: max(size.height, child.center.y + child.bounds.height / 2 - origin.y)
       )
     }
   }
@@ -71,6 +126,8 @@ final class NitroModalContentView: UIView {
       child.layer.observe(\.bounds) { [weak self] _, _ in self?.setNeedsLayout() },
       child.layer.observe(\.position) { [weak self] _, _ in self?.setNeedsLayout() },
     ]
+    // The touch handler is attached right before the first child mounts.
+    updateTouchHandlers()
     setNeedsLayout()
   }
 
@@ -83,9 +140,17 @@ final class NitroModalContentView: UIView {
 
   override func layoutSubviews() {
     super.layoutSubviews()
+    let origin = reactOrigin
+    if bounds.origin != origin {
+      bounds.origin = origin
+    }
     let size = contentSize
     guard size != lastReportedSize else { return }
     lastReportedSize = size
     onContentSizeChange?(size)
   }
+
+  private func updateTouchHandlers() {
+    gestureRecognizers?.forEach { $0.isEnabled = !isInline }
+  }
 }