concentric-sheet 0.0.1

package/NitroConcentricSheet.podspec

@@ -0,0 +1,31 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "NitroConcentricSheet"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported, :visionos => 1.0 }
+  s.source       = { :git => "https://github.com/mrousavy/nitro.git", :tag => "#{s.version}" }
+
+  s.source_files = [
+    # Implementation (Swift)
+    "ios/**/*.{swift}",
+    # Autolinking/Registration (Objective-C++)
+    "ios/**/*.{m,mm}",
+    # Implementation (C++ objects)
+    "cpp/**/*.{hpp,cpp}",
+  ]
+
+  load 'nitrogen/generated/ios/NitroConcentricSheet+autolinking.rb'
+  add_nitrogen_files(s)
+
+  s.dependency 'React-jsi'
+  s.dependency 'React-callinvoker'
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,95 @@
+# ConcentricSheet
+
+Nitro-powered React Native `Modal` replacement for iOS sheet presentation.
+
+This package keeps React Native's `Modal` behavior, and adds runtime access to
+native `UIViewController` / `UISheetPresentationController` options such as:
+
+- Detents (`medium`, `large`)
+- Grabber visibility
+- Preferred corner radius
+- Selected detent
+- Largest undimmed detent
+- Edge-attached behavior
+- Interactive dismissal lock (`isModalInPresentation`)
+- Preferred content width/height
+
+## Install
+
+```sh
+bun add concentric-sheet react-native-nitro-modules
+```
+
+Then install iOS pods in your app:
+
+```sh
+cd ios && pod install
+```
+
+## Usage
+
+```tsx
+import React from 'react'
+import { View, Text, Button } from 'react-native'
+import { Modal } from 'concentric-sheet'
+
+export function Example() {
+  const [visible, setVisible] = React.useState(false)
+
+  return (
+    <>
+      <Button title="Open" onPress={() => setVisible(true)} />
+      <Modal
+        visible={visible}
+        presentationStyle="pageSheet"
+        onRequestClose={() => setVisible(false)}
+        detents={['medium', 'large']}
+        selectedDetentIdentifier="medium"
+        largestUndimmedDetentIdentifier="medium"
+        prefersGrabberVisible
+        preferredCornerRadius={24}
+        prefersScrollingExpandsWhenScrolledToEdge={false}
+        prefersEdgeAttachedInCompactHeight
+        widthFollowsPreferredContentSizeWhenEdgeAttached
+        isModalInPresentation={false}
+      >
+        <View style={{ flex: 1, padding: 20 }}>
+          <Text>Native sheet modal</Text>
+          <Button title="Close" onPress={() => setVisible(false)} />
+        </View>
+      </Modal>
+    </>
+  )
+}
+```
+
+## API
+
+`Modal` accepts all React Native `Modal` props, plus:
+
+- `detents?: ('medium' | 'large')[]`
+- `selectedDetentIdentifier?: 'medium' | 'large'`
+- `largestUndimmedDetentIdentifier?: 'medium' | 'large'`
+- `prefersGrabberVisible?: boolean`
+- `preferredCornerRadius?: number`
+- `prefersScrollingExpandsWhenScrolledToEdge?: boolean`
+- `prefersEdgeAttachedInCompactHeight?: boolean`
+- `widthFollowsPreferredContentSizeWhenEdgeAttached?: boolean`
+- `isModalInPresentation?: boolean`
+- `preferredContentWidth?: number`
+- `preferredContentHeight?: number`
+- `modalViewBackground?: 'clear' | 'systemBackground'`
+- `cornerConfiguration?: { type: 'none' | 'fixed' | 'containerConcentric' | 'capsule', radius?: number, minimumRadius?: number, maximumRadius?: number }`
+
+Imperative helpers:
+
+- `applyPresentedModalConfig(config)`
+- `dismissPresentedNativeModal(animated?)`
+
+## Notes
+
+- iOS-only native implementation.
+- `UISheetPresentationController` options require iOS 15+.
+- `cornerConfiguration` requires iOS 26+.
+- For sheet behavior, use `presentationStyle="pageSheet"` or `formSheet`.
+- Setting `largestUndimmedDetentIdentifier` can disable outside-tap dismissal at/under that detent because the dimming view is removed.

package/ios/Bridge.h

@@ -0,0 +1,8 @@
+//
+//  Bridge.h
+//  NitroConcentricSheet
+//
+//  Created by Marc Rousavy on 22.07.24.
+//
+
+#pragma once

package/ios/SheetModalController.swift

@@ -0,0 +1,294 @@
+import Foundation
+import UIKit
+
+public final class SheetModalController: HybridSheetModalControllerSpec {
+  public override init() {
+    super.init()
+  }
+
+  public func applyPresentedModalConfig(config: PresentedModalConfig) throws -> Bool {
+    return try onMainThread {
+      guard let controller = topPresentedViewController() else {
+        return false
+      }
+
+      var didApply = false
+      if let isModalInPresentation = config.isModalInPresentation {
+        controller.isModalInPresentation = isModalInPresentation
+        didApply = true
+      }
+      if config.preferredContentWidth != nil || config.preferredContentHeight != nil {
+        var preferredContentSize = controller.preferredContentSize
+        if let width = config.preferredContentWidth {
+          preferredContentSize.width = CGFloat(width)
+        }
+        if let height = config.preferredContentHeight {
+          preferredContentSize.height = CGFloat(height)
+        }
+        controller.preferredContentSize = preferredContentSize
+        didApply = true
+      }
+      if let modalViewBackground = config.modalViewBackground {
+        applyModalViewBackground(modalViewBackground, to: controller)
+        didApply = true
+      }
+      if let cornerConfiguration = config.cornerConfiguration {
+        if #available(iOS 26.0, *) {
+          let didFullyApply = applyCornerConfiguration(cornerConfiguration, to: controller)
+          didApply = didApply || didFullyApply
+        } else {
+          didApply = true
+        }
+      }
+
+      if let sheetConfig = config.sheet {
+        if #available(iOS 15.0, *), let sheet = controller.sheetPresentationController {
+          applySheetConfig(sheetConfig, to: sheet)
+          if #available(iOS 26.0, *),
+            let cornerConfiguration = config.cornerConfiguration
+          {
+            // Corner configuration is authoritative when provided.
+            // For concentric/capsule we clear preferredCornerRadius so UIKit can
+            // use its own sheet geometry instead of a forced fixed radius.
+            sheet.preferredCornerRadius = derivedSheetCornerRadius(from: cornerConfiguration)
+          } else if sheetConfig.preferredCornerRadius == nil {
+            sheet.preferredCornerRadius = nil
+          }
+          didApply = true
+        } else {
+          return false
+        }
+      }
+
+      return didApply || config.sheet == nil
+    }
+  }
+
+  public func dismissPresentedModal(animated: Bool) throws -> Bool {
+    return try onMainThread {
+      guard let topController = topPresentedViewController(),
+        topController.presentingViewController != nil
+      else {
+        return false
+      }
+
+      topController.dismiss(animated: animated)
+      return true
+    }
+  }
+
+  @available(iOS 15.0, *)
+  private func applySheetConfig(
+    _ config: SheetPresentationConfig,
+    to sheet: UISheetPresentationController
+  ) {
+    if let detents = config.detents, !detents.isEmpty {
+      sheet.detents = detents.map(detent(for:))
+    }
+    if let selectedDetentIdentifier = config.selectedDetentIdentifier {
+      sheet.selectedDetentIdentifier = detentIdentifier(for: selectedDetentIdentifier)
+    }
+    if let largestUndimmedDetentIdentifier = config.largestUndimmedDetentIdentifier {
+      sheet.largestUndimmedDetentIdentifier = detentIdentifier(for: largestUndimmedDetentIdentifier)
+    }
+    if let prefersGrabberVisible = config.prefersGrabberVisible {
+      sheet.prefersGrabberVisible = prefersGrabberVisible
+    }
+    if let preferredCornerRadius = config.preferredCornerRadius {
+      sheet.preferredCornerRadius = CGFloat(preferredCornerRadius)
+    }
+    if let prefersScrollingExpandsWhenScrolledToEdge =
+      config.prefersScrollingExpandsWhenScrolledToEdge
+    {
+      sheet.prefersScrollingExpandsWhenScrolledToEdge = prefersScrollingExpandsWhenScrolledToEdge
+    }
+    if let prefersEdgeAttachedInCompactHeight = config.prefersEdgeAttachedInCompactHeight {
+      sheet.prefersEdgeAttachedInCompactHeight = prefersEdgeAttachedInCompactHeight
+    }
+    if let widthFollowsPreferredContentSizeWhenEdgeAttached =
+      config.widthFollowsPreferredContentSizeWhenEdgeAttached
+    {
+      sheet.widthFollowsPreferredContentSizeWhenEdgeAttached =
+        widthFollowsPreferredContentSizeWhenEdgeAttached
+    }
+  }
+
+  @available(iOS 15.0, *)
+  private func detent(for identifier: SheetDetentIdentifier)
+    -> UISheetPresentationController.Detent
+  {
+    switch identifier {
+    case .medium:
+      return .medium()
+    case .large:
+      return .large()
+    @unknown default:
+      return .large()
+    }
+  }
+
+  @available(iOS 15.0, *)
+  private func detentIdentifier(
+    for identifier: SheetDetentIdentifier
+  ) -> UISheetPresentationController.Detent.Identifier {
+    switch identifier {
+    case .medium:
+      return .medium
+    case .large:
+      return .large
+    @unknown default:
+      return .large
+    }
+  }
+
+  private func applyModalViewBackground(
+    _ modalViewBackground: ModalViewBackground,
+    to controller: UIViewController
+  ) {
+    let color: UIColor
+    switch modalViewBackground {
+    case .clear:
+      color = .clear
+    case .systembackground:
+      color = .systemBackground
+    @unknown default:
+      color = .systemBackground
+    }
+
+    controller.view.backgroundColor = color
+    controller.view.isOpaque = color != .clear
+
+    // React Native mounts its modal content as a subview of the presented controller's root view.
+    // Keep those roots aligned with the requested background mode to avoid accidental opaque fills.
+    for subview in controller.view.subviews {
+      subview.backgroundColor = color
+      subview.isOpaque = color != .clear
+    }
+  }
+
+  @available(iOS 26.0, *)
+  private func applyCornerConfiguration(
+    _ configuration: ModalCornerConfiguration,
+    to controller: UIViewController
+  ) -> Bool {
+    let appliedConfiguration: UICornerConfiguration
+
+    switch configuration.type {
+    case .none:
+      appliedConfiguration = .corners(radius: .fixed(0))
+    case .fixed:
+      let radius = max(0, configuration.radius ?? 0)
+      appliedConfiguration = .corners(radius: .fixed(radius))
+    case .containerconcentric:
+      if let minimumRadius = configuration.minimumRadius {
+        appliedConfiguration = .corners(
+          radius: .containerConcentric(minimum: max(0, minimumRadius))
+        )
+      } else {
+        appliedConfiguration = .corners(radius: .containerConcentric())
+      }
+    case .capsule:
+      if let maximumRadius = configuration.maximumRadius {
+        appliedConfiguration = .capsule(maximumRadius: max(0, maximumRadius))
+      } else {
+        appliedConfiguration = .capsule()
+      }
+    @unknown default:
+      appliedConfiguration = .corners(radius: .fixed(0))
+    }
+
+    return applyCornerConfigurationNow(
+      appliedConfiguration,
+      cornerType: configuration.type,
+      to: controller
+    )
+  }
+
+  @available(iOS 26.0, *)
+  private func applyCornerConfigurationNow(
+    _ cornerConfiguration: UICornerConfiguration,
+    cornerType: ModalCornerConfigurationType,
+    to controller: UIViewController
+  ) -> Bool {
+    let contentView = controller.view!
+    let reactRootSubview = contentView.subviews.first
+
+    CATransaction.begin()
+    CATransaction.setDisableActions(true)
+    contentView.cornerConfiguration = cornerConfiguration
+    reactRootSubview?.cornerConfiguration = cornerConfiguration
+
+    let shouldClipContents = cornerType != .none
+    contentView.clipsToBounds = shouldClipContents
+    contentView.layer.masksToBounds = shouldClipContents
+    reactRootSubview?.clipsToBounds = shouldClipContents
+    reactRootSubview?.layer.masksToBounds = shouldClipContents
+    CATransaction.commit()
+
+    // React content can mount after present; return false to trigger JS retry until mounted.
+    return reactRootSubview != nil
+  }
+
+  private func derivedSheetCornerRadius(
+    from configuration: ModalCornerConfiguration
+  ) -> CGFloat? {
+    switch configuration.type {
+    case .none:
+      return 0
+    case .fixed:
+      return CGFloat(max(0, configuration.radius ?? 0))
+    case .containerconcentric, .capsule:
+      return nil
+    @unknown default:
+      return nil
+    }
+  }
+
+  private func onMainThread<T>(_ block: () throws -> T) throws -> T {
+    if Thread.isMainThread {
+      return try block()
+    }
+
+    var result: Result<T, Error>?
+    DispatchQueue.main.sync {
+      result = Result(catching: block)
+    }
+    return try result!.get()
+  }
+
+  private func topPresentedViewController() -> UIViewController? {
+    guard let rootViewController = activeRootViewController() else { return nil }
+    var controller = rootViewController
+    var hasPresentedController = false
+
+    while let presented = controller.presentedViewController {
+      controller = presented
+      hasPresentedController = true
+    }
+
+    return hasPresentedController ? controller : nil
+  }
+
+  private func activeRootViewController() -> UIViewController? {
+    let connectedScenes = UIApplication.shared.connectedScenes.compactMap {
+      $0 as? UIWindowScene
+    }
+
+    let activeScenes = connectedScenes.filter {
+      $0.activationState == .foregroundActive || $0.activationState == .foregroundInactive
+    }
+
+    for scene in activeScenes {
+      if let keyWindow = scene.windows.first(where: \.isKeyWindow),
+        let rootViewController = keyWindow.rootViewController
+      {
+        return rootViewController
+      }
+      if let rootViewController = scene.windows.first?.rootViewController {
+        return rootViewController
+      }
+    }
+
+    return nil
+  }
+}

package/lib/NativeSheetModal.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { type ModalProps as RNModalProps } from 'react-native';
+import type { ModalCornerConfiguration, ModalViewBackground, PresentedModalConfig, SheetDetentIdentifier } from './specs/SheetModalController.nitro';
+export interface NativeSheetModalProps extends RNModalProps {
+    detents?: SheetDetentIdentifier[];
+    selectedDetentIdentifier?: SheetDetentIdentifier;
+    largestUndimmedDetentIdentifier?: SheetDetentIdentifier;
+    prefersGrabberVisible?: boolean;
+    preferredCornerRadius?: number;
+    prefersScrollingExpandsWhenScrolledToEdge?: boolean;
+    prefersEdgeAttachedInCompactHeight?: boolean;
+    widthFollowsPreferredContentSizeWhenEdgeAttached?: boolean;
+    isModalInPresentation?: boolean;
+    preferredContentWidth?: number;
+    preferredContentHeight?: number;
+    modalViewBackground?: ModalViewBackground;
+    cornerConfiguration?: ModalCornerConfiguration;
+}
+export declare function applyPresentedModalConfig(config: PresentedModalConfig): boolean;
+export declare function dismissPresentedNativeModal(animated?: boolean): boolean;
+export declare function Modal(props: NativeSheetModalProps): React.JSX.Element;
+export default Modal;

package/lib/NativeSheetModal.js

@@ -0,0 +1,128 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { Modal as RNModal, Platform, } from 'react-native';
+import { getHybridObjectConstructor } from 'react-native-nitro-modules';
+const APPLY_RETRY_LIMIT = 8;
+const APPLY_RETRY_DELAY_MS = 16;
+let cachedController = null;
+let didFailToCreateController = false;
+function getSheetModalController() {
+    if (Platform.OS !== 'ios')
+        return null;
+    if (cachedController != null)
+        return cachedController;
+    if (didFailToCreateController)
+        return null;
+    try {
+        const SheetModalControllerCtor = getHybridObjectConstructor('SheetModalController');
+        cachedController = new SheetModalControllerCtor();
+        return cachedController;
+    }
+    catch {
+        didFailToCreateController = true;
+        return null;
+    }
+}
+export function applyPresentedModalConfig(config) {
+    const controller = getSheetModalController();
+    if (controller == null)
+        return false;
+    return controller.applyPresentedModalConfig(config);
+}
+export function dismissPresentedNativeModal(animated = true) {
+    const controller = getSheetModalController();
+    if (controller == null)
+        return false;
+    return controller.dismissPresentedModal(animated);
+}
+export function Modal(props) {
+    const { detents, selectedDetentIdentifier, largestUndimmedDetentIdentifier, prefersGrabberVisible, preferredCornerRadius, prefersScrollingExpandsWhenScrolledToEdge, prefersEdgeAttachedInCompactHeight, widthFollowsPreferredContentSizeWhenEdgeAttached, isModalInPresentation, preferredContentWidth, preferredContentHeight, modalViewBackground, cornerConfiguration, allowSwipeDismissal, onShow: onShowProp, visible, ...modalProps } = props;
+    const resolvedAllowSwipeDismissal = allowSwipeDismissal ??
+        (isModalInPresentation == null ? true : !isModalInPresentation);
+    const timeoutRef = useRef(null);
+    const isVisibleRef = useRef(visible);
+    useEffect(() => {
+        isVisibleRef.current = visible;
+    }, [visible]);
+    const nativeConfig = useMemo(() => {
+        const sheet = detents == null &&
+            selectedDetentIdentifier == null &&
+            largestUndimmedDetentIdentifier == null &&
+            prefersGrabberVisible == null &&
+            preferredCornerRadius == null &&
+            prefersScrollingExpandsWhenScrolledToEdge == null &&
+            prefersEdgeAttachedInCompactHeight == null &&
+            widthFollowsPreferredContentSizeWhenEdgeAttached == null
+            ? undefined
+            : {
+                detents,
+                selectedDetentIdentifier,
+                largestUndimmedDetentIdentifier,
+                prefersGrabberVisible,
+                preferredCornerRadius,
+                prefersScrollingExpandsWhenScrolledToEdge,
+                prefersEdgeAttachedInCompactHeight,
+                widthFollowsPreferredContentSizeWhenEdgeAttached,
+            };
+        return {
+            isModalInPresentation,
+            preferredContentWidth,
+            preferredContentHeight,
+            modalViewBackground,
+            cornerConfiguration,
+            sheet,
+        };
+    }, [
+        detents,
+        selectedDetentIdentifier,
+        largestUndimmedDetentIdentifier,
+        prefersGrabberVisible,
+        preferredCornerRadius,
+        prefersScrollingExpandsWhenScrolledToEdge,
+        prefersEdgeAttachedInCompactHeight,
+        widthFollowsPreferredContentSizeWhenEdgeAttached,
+        isModalInPresentation,
+        preferredContentWidth,
+        preferredContentHeight,
+        modalViewBackground,
+        cornerConfiguration,
+    ]);
+    const clearRetryTimeout = useCallback(() => {
+        if (timeoutRef.current != null) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    const applyNativeConfigWithRetry = useCallback(() => {
+        if (Platform.OS !== 'ios' || !visible)
+            return;
+        const controller = getSheetModalController();
+        if (controller == null)
+            return;
+        clearRetryTimeout();
+        let attempts = 0;
+        const attempt = () => {
+            if (!isVisibleRef.current)
+                return;
+            const didApply = controller.applyPresentedModalConfig(nativeConfig);
+            attempts += 1;
+            if (!didApply && attempts < APPLY_RETRY_LIMIT) {
+                timeoutRef.current = setTimeout(attempt, APPLY_RETRY_DELAY_MS);
+            }
+        };
+        attempt();
+    }, [clearRetryTimeout, nativeConfig, visible]);
+    useEffect(() => {
+        applyNativeConfigWithRetry();
+    }, [applyNativeConfigWithRetry]);
+    useEffect(() => {
+        return () => {
+            clearRetryTimeout();
+        };
+    }, [clearRetryTimeout]);
+    const onShow = useCallback((event) => {
+        applyNativeConfigWithRetry();
+        onShowProp?.(event);
+    }, [applyNativeConfigWithRetry, onShowProp]);
+    return (React.createElement(RNModal, { ...modalProps, allowSwipeDismissal: resolvedAllowSwipeDismissal, onShow: onShow, visible: visible }));
+}
+export default Modal;

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal, Modal as NativeSheetModal, applyPresentedModalConfig, dismissPresentedNativeModal, } from './NativeSheetModal';
+export type { NativeSheetModalProps } from './NativeSheetModal';
+export type { ModalCornerConfiguration, ModalCornerConfigurationType, ModalViewBackground, PresentedModalConfig, SheetDetentIdentifier, SheetPresentationConfig, } from './specs/SheetModalController.nitro';

package/lib/index.js

@@ -0,0 +1 @@
+export { Modal, Modal as NativeSheetModal, applyPresentedModalConfig, dismissPresentedNativeModal, } from './NativeSheetModal';

package/lib/specs/SheetModalController.nitro.d.ts

@@ -0,0 +1,34 @@
+import type { HybridObject } from 'react-native-nitro-modules';
+export type SheetDetentIdentifier = 'medium' | 'large';
+export type ModalViewBackground = 'clear' | 'systemBackground';
+export type ModalCornerConfigurationType = 'none' | 'fixed' | 'containerConcentric' | 'capsule';
+export interface ModalCornerConfiguration {
+    type: ModalCornerConfigurationType;
+    radius?: number;
+    minimumRadius?: number;
+    maximumRadius?: number;
+}
+export interface SheetPresentationConfig {
+    detents?: SheetDetentIdentifier[];
+    selectedDetentIdentifier?: SheetDetentIdentifier;
+    largestUndimmedDetentIdentifier?: SheetDetentIdentifier;
+    prefersGrabberVisible?: boolean;
+    preferredCornerRadius?: number;
+    prefersScrollingExpandsWhenScrolledToEdge?: boolean;
+    prefersEdgeAttachedInCompactHeight?: boolean;
+    widthFollowsPreferredContentSizeWhenEdgeAttached?: boolean;
+}
+export interface PresentedModalConfig {
+    isModalInPresentation?: boolean;
+    preferredContentWidth?: number;
+    preferredContentHeight?: number;
+    modalViewBackground?: ModalViewBackground;
+    cornerConfiguration?: ModalCornerConfiguration;
+    sheet?: SheetPresentationConfig;
+}
+export interface SheetModalController extends HybridObject<{
+    ios: 'swift';
+}> {
+    applyPresentedModalConfig(config: PresentedModalConfig): boolean;
+    dismissPresentedModal(animated: boolean): boolean;
+}

package/lib/specs/SheetModalController.nitro.js

@@ -0,0 +1 @@
+export {};

package/nitro.json

@@ -0,0 +1,23 @@
+{
+  "$schema": "https://nitro.margelo.com/nitro.schema.json",
+  "cxxNamespace": [
+    "concentricsheet"
+  ],
+  "ios": {
+    "iosModuleName": "NitroConcentricSheet"
+  },
+  "android": {
+    "androidNamespace": [
+      "concentricsheet"
+    ],
+    "androidCxxLibName": "NitroConcentricSheet"
+  },
+  "autolinking": {
+    "SheetModalController": {
+      "swift": "SheetModalController"
+    }
+  },
+  "ignorePaths": [
+    "**/node_modules"
+  ]
+}

package/nitrogen/generated/.gitattributes

@@ -0,0 +1 @@
+** linguist-generated=true