concentric-sheet 0.0.1

package/package.json

@@ -0,0 +1,103 @@
+{
+  "name": "concentric-sheet",
+  "version": "0.0.1",
+  "description": "concentric-sheet",
+  "main": "lib/index",
+  "module": "lib/index",
+  "types": "lib/index.d.ts",
+  "react-native": "src/index",
+  "source": "src/index",
+  "files": [
+    "src",
+    "react-native.config.js",
+    "lib",
+    "nitrogen",
+    "ios/**/*.h",
+    "ios/**/*.m",
+    "ios/**/*.mm",
+    "ios/**/*.cpp",
+    "ios/**/*.swift",
+    "app.plugin.js",
+    "nitro.json",
+    "*.podspec",
+    "README.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "bun run typescript",
+    "clean": "rm -rf node_modules/**/android/build lib",
+    "lint": "eslint \"**/*.{js,ts,tsx}\" --fix",
+    "lint-ci": "eslint \"**/*.{js,ts,tsx}\" -f @jamesacarr/github-actions",
+    "typescript": "tsc",
+    "specs": "tsc --noEmit false && nitrogen --logLevel=\"debug\""
+  },
+  "keywords": [
+    "react-native",
+    "nitro"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mrousavy/nitro.git"
+  },
+  "author": "Marc Rousavy <me@mrousavy.com> (https://github.com/mrousavy)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mrousavy/nitro/issues"
+  },
+  "homepage": "https://github.com/mrousavy/nitro#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@react-native/eslint-config": "0.83.0",
+    "@types/react": "^19.1.03",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "nitrogen": "*",
+    "prettier": "^3.3.3",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-nitro-modules": "*",
+    "typescript": "^5.8.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-nitro-modules": "*"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@react-native",
+      "prettier"
+    ],
+    "plugins": [
+      "prettier"
+    ],
+    "rules": {
+      "prettier/prettier": [
+        "warn",
+        {
+          "quoteProps": "consistent",
+          "singleQuote": true,
+          "tabWidth": 2,
+          "trailingComma": "es5",
+          "useTabs": false
+        }
+      ]
+    }
+  },
+  "eslintIgnore": [
+    "node_modules/",
+    "lib/"
+  ],
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false,
+    "semi": false
+  }
+}

package/react-native.config.js

@@ -0,0 +1,13 @@
+// https://github.com/react-native-community/cli/blob/main/docs/dependencies.md
+
+module.exports = {
+  dependency: {
+    platforms: {
+      /**
+       * @type {import('@react-native-community/cli-types').IOSDependencyParams}
+       */
+      ios: {},
+      android: null,
+    },
+  },
+}

package/src/NativeSheetModal.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useMemo, useRef } from 'react'
+import {
+  Modal as RNModal,
+  type ModalProps as RNModalProps,
+  Platform,
+} from 'react-native'
+import { getHybridObjectConstructor } from 'react-native-nitro-modules'
+import type {
+  ModalCornerConfiguration,
+  ModalViewBackground,
+  PresentedModalConfig,
+  SheetDetentIdentifier,
+  SheetModalController,
+  SheetPresentationConfig,
+} from './specs/SheetModalController.nitro'
+
+const APPLY_RETRY_LIMIT = 8
+const APPLY_RETRY_DELAY_MS = 16
+
+let cachedController: SheetModalController | null = null
+let didFailToCreateController = false
+
+function getSheetModalController(): SheetModalController | null {
+  if (Platform.OS !== 'ios') return null
+  if (cachedController != null) return cachedController
+  if (didFailToCreateController) return null
+
+  try {
+    const SheetModalControllerCtor =
+      getHybridObjectConstructor<SheetModalController>('SheetModalController')
+    cachedController = new SheetModalControllerCtor()
+    return cachedController
+  } catch {
+    didFailToCreateController = true
+    return null
+  }
+}
+
+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
+}
+
+type ModalOnShow = NonNullable<RNModalProps['onShow']>
+
+export function applyPresentedModalConfig(
+  config: PresentedModalConfig
+): boolean {
+  const controller = getSheetModalController()
+  if (controller == null) return false
+  return controller.applyPresentedModalConfig(config)
+}
+
+export function dismissPresentedNativeModal(animated = true): boolean {
+  const controller = getSheetModalController()
+  if (controller == null) return false
+  return controller.dismissPresentedModal(animated)
+}
+
+export function Modal(props: NativeSheetModalProps) {
+  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<ReturnType<typeof setTimeout> | null>(null)
+  const isVisibleRef = useRef(visible)
+
+  useEffect(() => {
+    isVisibleRef.current = visible
+  }, [visible])
+
+  const nativeConfig = useMemo<PresentedModalConfig>(() => {
+    const sheet: SheetPresentationConfig | undefined =
+      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<ModalOnShow>(
+    (event) => {
+      applyNativeConfigWithRetry()
+      onShowProp?.(event)
+    },
+    [applyNativeConfigWithRetry, onShowProp]
+  )
+
+  return (
+    <RNModal
+      {...modalProps}
+      allowSwipeDismissal={resolvedAllowSwipeDismissal}
+      onShow={onShow}
+      visible={visible}
+    />
+  )
+}
+
+export default Modal

package/src/index.ts

@@ -0,0 +1,15 @@
+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/src/specs/SheetModalController.nitro.ts

@@ -0,0 +1,41 @@
+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
+}