react-native-nitro-modal 0.1.0

package/ios/HybridNitroModal.swift

@@ -0,0 +1,329 @@
+//
+//  HybridNitroModal.swift
+//  NitroModal
+//
+
+import NitroModules
+import UIKit
+
+/// The Nitro Hybrid View. Props arrive on the main thread (Fabric
+/// `updateProps`); methods arrive on the JS thread and hop to main.
+///
+/// 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`.
+final class HybridNitroModal: HybridNitroModalSpec {
+  let view = NitroModalHostView()
+
+  // MARK: Props
+
+  var isOpen = false {
+    didSet {
+      guard isOpen != oldValue else { return }
+      if isOpen {
+        requestPresent()
+      } else {
+        requestDismiss(.programmatic)
+      }
+    }
+  }
+
+  var mode: ModalMode = .bottomsheet
+  var detents: [SheetDetent] = [.fitcontent]
+  var initialDetentIndex: Double = 0
+  var backdropColor: Double = 0xFF00_0000
+  var backdropOpacity: Double = 0.4
+  var backdropBlurRadius: Double = 0
+  var dismissOnBackdropPress = true
+  var dismissOnSwipe = true
+  var dismissOnBackButton = true
+  var grabberVisible = false
+  var cornerRadius: Double = -1
+  var contentBackgroundColor: Double?
+  var keyboardBehavior: KeyboardBehavior = .pan
+  var popupAnimation: PopupAnimation = .scale
+
+  var onPresent: (() -> Void)?
+  var onDismiss: ((DismissReason) -> Void)?
+  var onDetentChange: ((Double) -> Void)?
+  var onBackdropPress: (() -> Void)?
+  var onBackButtonPress: (() -> Void)?
+  var onContentAreaChange: ((ModalContentArea) -> Void)?
+
+  // MARK: State
+
+  private enum Phase {
+    case idle, presenting, presented, dismissing
+  }
+
+  private var config = ModalConfig()
+  private var phase = Phase.idle
+  /// What React (or an imperative call) asked for.
+  private var wantsOpen = false
+  /// A present request was accepted and its `onDismiss` is still owed.
+  private var sessionActive = false
+  private var dismissReason: DismissReason = .programmatic
+  private var reconcileScheduled = false
+  private var isDropped = false
+  private var presentation: ModalPresenting?
+  private var lastContentArea: CGSize?
+
+  override init() {
+    super.init()
+    view.onWindowChange = { [weak self] in
+      self?.hostWindowDidChange()
+    }
+    view.contentView.onContentSizeChange = { [weak self] _ in
+      self?.presentation?.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 }
+    DispatchQueue.main.async {
+      controller.presentingViewController?.dismiss(animated: false)
+    }
+  }
+
+  // MARK: HybridView
+
+  func afterUpdate() {
+    let next = makeConfig()
+    guard next != config else { return }
+    config = next
+    if let presentation {
+      presentation.apply(next)
+    } else {
+      reportEstimatedContentArea()
+    }
+  }
+
+  func onDropView() {
+    isDropped = true
+    wantsOpen = false
+    sessionActive = false
+    guard let controller = presentation else { return }
+    presentation = nil
+    phase = .idle
+    controller.presentingViewController?.dismiss(animated: false)
+  }
+
+  // MARK: Methods
+
+  func present() throws {
+    DispatchQueue.main.async { [weak self] in
+      self?.requestPresent()
+    }
+  }
+
+  func dismiss() throws {
+    DispatchQueue.main.async { [weak self] in
+      self?.requestDismiss(.programmatic)
+    }
+  }
+
+  func snapToDetent(index: Double) throws {
+    guard index.isFinite else { return }
+    DispatchQueue.main.async { [weak self] in
+      self?.presentation?.snapToDetent(at: Int(index))
+    }
+  }
+
+  // MARK: State machine
+
+  private func requestPresent() {
+    guard !isDropped else { return }
+    wantsOpen = true
+    sessionActive = true
+    scheduleReconcile()
+  }
+
+  private func requestDismiss(_ reason: DismissReason) {
+    if wantsOpen {
+      dismissReason = reason
+    }
+    wantsOpen = false
+    scheduleReconcile()
+  }
+
+  /// Deferred to the next run loop turn so the children and layout committed
+  /// in the same Fabric transaction are mounted before we present.
+  private func scheduleReconcile() {
+    guard !reconcileScheduled else { return }
+    reconcileScheduled = true
+    DispatchQueue.main.async { [weak self] in
+      guard let self else { return }
+      self.reconcileScheduled = false
+      self.reconcile()
+    }
+  }
+
+  private func reconcile() {
+    switch phase {
+    case .presenting, .dismissing:
+      return // The transition's completion reconciles again.
+    case .presented:
+      if !wantsOpen {
+        startDismiss()
+      }
+    case .idle:
+      if wantsOpen {
+        startPresent()
+      } else if sessionActive {
+        endSession() // Cancelled before anything appeared.
+      }
+    }
+  }
+
+  private func startPresent() {
+    // Without a window there is nothing to present from; `hostWindowDidChange` retries.
+    guard let presenter = topViewController() else { return }
+
+    let controller: ModalPresenting = config.mode == .popup
+      ? PopupViewController(contentView: view.contentView, config: config)
+      : SheetViewController(contentView: view.contentView, config: config)
+    controller.presentationDelegate = self
+    presentation = controller
+    phase = .presenting
+
+    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()
+    }
+
+    if controller.presentingViewController == nil {
+      // UIKit refused (e.g. another transition is still running). Retry shortly.
+      presentation = nil
+      phase = .idle
+      DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) { [weak self] in
+        self?.reconcile()
+      }
+    }
+  }
+
+  private func startDismiss() {
+    guard let controller = presentation, let presenting = controller.presentingViewController else {
+      finishDismiss()
+      return
+    }
+    phase = .dismissing
+    controller.view.endEditing(true)
+    presenting.dismiss(animated: isAnimated) { [weak self] in
+      self?.finishDismiss()
+    }
+  }
+
+  private func finishDismiss() {
+    phase = .idle
+    presentation = nil
+    view.contentView.removeFromSuperview()
+    endSession()
+    reconcile()
+  }
+
+  private func endSession() {
+    guard sessionActive else { return }
+    let reason = dismissReason
+    dismissReason = .programmatic
+    // A present requested while we were dismissing starts a new session.
+    sessionActive = wantsOpen
+    if !isDropped {
+      onDismiss?(reason)
+    }
+  }
+
+  // MARK: Helpers
+
+  private var isAnimated: Bool {
+    !(config.mode == .popup && config.popupAnimation == .none)
+  }
+
+  private func makeConfig() -> ModalConfig {
+    ModalConfig(
+      mode: mode,
+      detents: detents,
+      initialDetentIndex: initialDetentIndex.isFinite ? Int(initialDetentIndex) : 0,
+      backdropColor: UIColor(processedColor: backdropColor),
+      backdropOpacity: CGFloat(backdropOpacity),
+      backdropBlurRadius: CGFloat(backdropBlurRadius),
+      dismissOnBackdropPress: dismissOnBackdropPress,
+      dismissOnSwipe: dismissOnSwipe,
+      grabberVisible: grabberVisible,
+      cornerRadius: cornerRadius >= 0 ? CGFloat(cornerRadius) : nil,
+      contentBackgroundColor: contentBackgroundColor.map(UIColor.init(processedColor:)) ?? .systemBackground,
+      keyboardBehavior: keyboardBehavior,
+      popupAnimation: popupAnimation
+    )
+  }
+
+  private func topViewController() -> UIViewController? {
+    var top = view.window?.rootViewController
+    while let presented = top?.presentedViewController, !presented.isBeingDismissed {
+      top = presented
+    }
+    return top
+  }
+
+  private func hostWindowDidChange() {
+    guard view.window != nil else { return }
+    if presentation == nil {
+      reportEstimatedContentArea()
+    }
+    scheduleReconcile()
+  }
+
+  /// Lets React size the content before the first presentation.
+  private func reportEstimatedContentArea() {
+    guard let window = view.window else { return }
+    switch config.mode {
+    case .popup:
+      reportContentArea(PopupViewController.availableRect(in: window.bounds, safeArea: window.safeAreaInsets).size)
+    case .bottomsheet:
+      let maximum = SheetViewController.estimatedMaximumDetentValue(in: window)
+      reportContentArea(CGSize(
+        width: SheetViewController.estimatedWidth(in: window),
+        height: SheetViewController.contentHeight(for: config.detents, maximum: maximum)
+      ))
+    }
+  }
+
+  private func reportContentArea(_ size: CGSize) {
+    let area = CGSize(width: size.width.rounded(.down), height: size.height.rounded(.down))
+    guard area != lastContentArea, area.width > 0, area.height > 0 else { return }
+    lastContentArea = area
+    onContentAreaChange?(ModalContentArea(width: Double(area.width), height: Double(area.height)))
+  }
+}
+
+// MARK: - ModalPresentationDelegate
+
+extension HybridNitroModal: ModalPresentationDelegate {
+  func modalPresentationDidTapBackdrop() {
+    onBackdropPress?()
+    guard config.dismissOnBackdropPress, phase == .presenting || phase == .presented else { return }
+    requestDismiss(.backdrop)
+    reconcile()
+  }
+
+  func modalPresentationDidDismissInteractively() {
+    guard phase == .presented else { return }
+    wantsOpen = false
+    dismissReason = .swipe
+    finishDismiss()
+  }
+
+  func modalPresentationDidChangeDetent(_ index: Int) {
+    onDetentChange?(Double(index))
+  }
+
+  func modalPresentationDidChangeContentArea(_ size: CGSize) {
+    reportContentArea(size)
+  }
+}

package/ios/HybridNitroModalComponent+Children.mm

@@ -0,0 +1,77 @@
+//
+//  HybridNitroModalComponent+Children.mm
+//  NitroModal
+//
+//  Nitro's generated Fabric component view mounts React children as its own
+//  subviews. A modal needs them inside the presented view controller instead,
+//  so this category routes child (un)mounting to the Swift host view, and
+//  attaches a Fabric touch handler to the view that hosts them (it lives
+//  outside the React root view, so the root's touch handler never sees it).
+//
+//  This mirrors what React Native's own RCTModalHostViewComponentView does.
+//
+
+#import <UIKit/UIKit.h>
+#import <React/RCTSurfaceTouchHandler.h>
+#import <React/RCTViewComponentView.h>
+
+/// Implemented in Swift by `NitroModalHostView`. The pod does not emit an
+/// ObjC header for its Swift code, so the methods are reached by selector.
+@protocol NitroModalChildHost <NSObject>
+- (void)nitroModalMountChild:(UIView *)child atIndex:(NSInteger)index;
+- (void)nitroModalUnmountChild:(UIView *)child;
+@property (nonatomic, readonly) UIView *nitroModalTouchRoot;
+@end
+
+/// Defined by nitrogen in HybridNitroModalComponent.mm.
+@interface HybridNitroModalComponent : RCTViewComponentView
+@end
+
+@implementation HybridNitroModalComponent (NitroModalChildren)
+
+- (nullable id<NitroModalChildHost>)nitroModal_childHost
+{
+  UIView *host = self.contentView;
+  if ([host respondsToSelector:@selector(nitroModalMountChild:atIndex:)] &&
+      [host respondsToSelector:@selector(nitroModalUnmountChild:)] &&
+      [host respondsToSelector:@selector(nitroModalTouchRoot)]) {
+    return (id<NitroModalChildHost>)host;
+  }
+  return nil;
+}
+
+- (void)mountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  id<NitroModalChildHost> host = [self nitroModal_childHost];
+  if (host == nil) {
+    [super mountChildComponentView:childComponentView index:index];
+    return;
+  }
+
+  UIView *touchRoot = host.nitroModalTouchRoot;
+  BOOL hasTouchHandler = NO;
+  for (UIGestureRecognizer *recognizer in touchRoot.gestureRecognizers) {
+    if ([recognizer isKindOfClass:[RCTSurfaceTouchHandler class]]) {
+      hasTouchHandler = YES;
+      break;
+    }
+  }
+  if (!hasTouchHandler) {
+    // The view retains the recognizer; it goes away together with the host.
+    [[RCTSurfaceTouchHandler new] attachToView:touchRoot];
+  }
+
+  [host nitroModalMountChild:childComponentView atIndex:index];
+}
+
+- (void)unmountChildComponentView:(UIView<RCTComponentViewProtocol> *)childComponentView index:(NSInteger)index
+{
+  id<NitroModalChildHost> host = [self nitroModal_childHost];
+  if (host == nil) {
+    [super unmountChildComponentView:childComponentView index:index];
+    return;
+  }
+  [host nitroModalUnmountChild:childComponentView];
+}
+
+@end

package/ios/ModalConfig.swift

@@ -0,0 +1,73 @@
+//
+//  ModalConfig.swift
+//  NitroModal
+//
+
+import UIKit
+
+/// Snapshot of the React props that shape a presentation.
+struct ModalConfig: Equatable {
+  var mode: ModalMode = .bottomsheet
+  var detents: [SheetDetent] = [.fitcontent]
+  var initialDetentIndex = 0
+  var backdropColor: UIColor = .black
+  var backdropOpacity: CGFloat = 0.4
+  var backdropBlurRadius: CGFloat = 0
+  var dismissOnBackdropPress = true
+  var dismissOnSwipe = true
+  var grabberVisible = false
+  /// `nil` uses the platform default.
+  var cornerRadius: CGFloat?
+  var contentBackgroundColor: UIColor = .systemBackground
+  var keyboardBehavior: KeyboardBehavior = .pan
+  var popupAnimation: PopupAnimation = .scale
+
+  var clampedInitialDetentIndex: Int {
+    min(max(initialDetentIndex, 0), max(detents.count - 1, 0))
+  }
+}
+
+/// Callbacks from a presented modal controller back to `HybridNitroModal`.
+protocol ModalPresentationDelegate: AnyObject {
+  func modalPresentationDidTapBackdrop()
+  /// The user swiped the sheet away (the dismissal already happened).
+  func modalPresentationDidDismissInteractively()
+  func modalPresentationDidChangeDetent(_ index: Int)
+  func modalPresentationDidChangeContentArea(_ size: CGSize)
+}
+
+/// A view controller that presents the React content in one of the modal modes.
+protocol ModalPresenting: UIViewController {
+  var presentationDelegate: ModalPresentationDelegate? { get set }
+  func apply(_ config: ModalConfig)
+  func contentSizeDidChange()
+  func snapToDetent(at index: Int)
+}
+
+extension UIColor {
+  /// Decodes a color produced by React Native's `processColor` (0xAARRGGBB).
+  convenience init(processedColor value: Double) {
+    let argb = UInt32(truncatingIfNeeded: Int64(value))
+    self.init(
+      red: CGFloat((argb >> 16) & 0xFF) / 255,
+      green: CGFloat((argb >> 8) & 0xFF) / 255,
+      blue: CGFloat(argb & 0xFF) / 255,
+      alpha: CGFloat((argb >> 24) & 0xFF) / 255
+    )
+  }
+}
+
+extension Notification {
+  /// Runs `animations` with the keyboard's own duration and curve so layout
+  /// changes move in lockstep with the keyboard.
+  func animateAlongsideKeyboard(_ animations: @escaping () -> Void) {
+    let duration = (userInfo?[UIResponder.keyboardAnimationDurationUserInfoKey] as? Double) ?? 0.25
+    let curve = (userInfo?[UIResponder.keyboardAnimationCurveUserInfoKey] as? UInt) ?? 7
+    UIView.animate(
+      withDuration: duration,
+      delay: 0,
+      options: [UIView.AnimationOptions(rawValue: curve << 16), .beginFromCurrentState, .allowUserInteraction],
+      animations: animations
+    )
+  }
+}

package/ios/NitroModalHostView.swift

@@ -0,0 +1,91 @@
+//
+//  NitroModalHostView.swift
+//  NitroModal
+//
+
+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.
+final class NitroModalHostView: UIView {
+  let contentView = NitroModalContentView()
+  var onWindowChange: (() -> Void)?
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    isUserInteractionEnabled = false
+  }
+
+  @available(*, unavailable)
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) is not supported")
+  }
+
+  override func didMoveToWindow() {
+    super.didMoveToWindow()
+    onWindowChange?()
+  }
+
+  @objc(nitroModalMountChild:atIndex:)
+  func mountChild(_ child: UIView, atIndex index: Int) {
+    contentView.insertReactChild(child, at: index)
+  }
+
+  @objc(nitroModalUnmountChild:)
+  func unmountChild(_ child: UIView) {
+    contentView.removeReactChild(child)
+  }
+
+  @objc var nitroModalTouchRoot: UIView {
+    contentView
+  }
+}
+
+/// Holds the React children inside the presented 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)?
+
+  private var reactChildren: [UIView] = []
+  private var observations: [ObjectIdentifier: [NSKeyValueObservation]] = [:]
+  private var lastReportedSize: CGSize = .zero
+
+  /// 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
+      CGSize(
+        width: max(size.width, child.center.x + child.bounds.width / 2),
+        height: max(size.height, child.center.y + child.bounds.height / 2)
+      )
+    }
+  }
+
+  func insertReactChild(_ child: UIView, at index: Int) {
+    let index = min(max(index, 0), reactChildren.count)
+    reactChildren.insert(child, at: index)
+    insertSubview(child, at: index)
+    // Fabric writes `center` then `bounds`; coalesce both into one layout pass.
+    observations[ObjectIdentifier(child)] = [
+      child.layer.observe(\.bounds) { [weak self] _, _ in self?.setNeedsLayout() },
+      child.layer.observe(\.position) { [weak self] _, _ in self?.setNeedsLayout() },
+    ]
+    setNeedsLayout()
+  }
+
+  func removeReactChild(_ child: UIView) {
+    observations.removeValue(forKey: ObjectIdentifier(child))?.forEach { $0.invalidate() }
+    reactChildren.removeAll { $0 === child }
+    child.removeFromSuperview()
+    setNeedsLayout()
+  }
+
+  override func layoutSubviews() {
+    super.layoutSubviews()
+    let size = contentSize
+    guard size != lastReportedSize else { return }
+    lastReportedSize = size
+    onContentSizeChange?(size)
+  }
+}