concentric-sheet 0.0.2

package/src/NativeSheetModal.tsx

@@ -0,0 +1,343 @@
+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 {
+  PresentedModalConfig,
+  PresentedModalDetent,
+  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
+let nextModalInstanceId = 1
+
+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 Pick<
+      RNModalProps,
+      | 'children'
+      | 'visible'
+      | 'animationType'
+      | 'presentationStyle'
+      | 'onRequestClose'
+      | 'onDismiss'
+      | 'onShow'
+      | 'allowSwipeDismissal'
+    >,
+    SheetPresentationConfig,
+    Omit<PresentedModalConfig, 'modalInstanceId' | 'sheet'> {
+  onDetentChange?: (detent: PresentedModalDetent) => void
+}
+
+type ModalOnShow = NonNullable<RNModalProps['onShow']>
+type ModalOnDismiss = NonNullable<RNModalProps['onDismiss']>
+
+function logDebug(
+  instanceId: number,
+  message: string,
+  extra?: Record<string, unknown>
+) {
+  if (!__DEV__) return
+  const tag = `[NativeSheetModal:${instanceId}]`
+  if (extra != null) {
+    console.log(`${tag} ${message}`, extra)
+  } else {
+    console.log(`${tag} ${message}`)
+  }
+}
+
+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 {
+    children,
+    visible,
+    animationType,
+    presentationStyle,
+    onRequestClose,
+    onDismiss: onDismissProp,
+    onShow: onShowProp,
+    allowSwipeDismissal,
+    detents,
+    customDetentHeights,
+    selectedDetentIdentifier,
+    selectedCustomDetentHeight,
+    largestUndimmedDetentIdentifier,
+    largestUndimmedCustomDetentHeight,
+    prefersGrabberVisible,
+    preferredCornerRadius,
+    prefersScrollingExpandsWhenScrolledToEdge,
+    prefersEdgeAttachedInCompactHeight,
+    widthFollowsPreferredContentSizeWhenEdgeAttached,
+    wantsFullScreen,
+    isModalInPresentation,
+    preferredContentWidth,
+    preferredContentHeight,
+    modalViewBackground,
+    cornerConfiguration,
+    onDetentChange,
+  } = props
+
+  const resolvedAllowSwipeDismissal =
+    allowSwipeDismissal ??
+    (isModalInPresentation == null ? true : !isModalInPresentation)
+
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const detentPollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
+  const isVisibleRef = useRef(visible)
+  const prevVisibleRef = useRef(false)
+  const modalInstanceIdRef = useRef<number>(nextModalInstanceId++)
+  const lastDetentKeyRef = useRef<string | null>(null)
+
+  const nativeConfig = useMemo<PresentedModalConfig>(() => {
+    const sheet: SheetPresentationConfig | undefined =
+      detents == null &&
+      customDetentHeights == null &&
+      selectedDetentIdentifier == null &&
+      selectedCustomDetentHeight == null &&
+      largestUndimmedDetentIdentifier == null &&
+      largestUndimmedCustomDetentHeight == null &&
+      prefersGrabberVisible == null &&
+      preferredCornerRadius == null &&
+      prefersScrollingExpandsWhenScrolledToEdge == null &&
+      prefersEdgeAttachedInCompactHeight == null &&
+      widthFollowsPreferredContentSizeWhenEdgeAttached == null &&
+      wantsFullScreen == null
+        ? undefined
+        : {
+            detents,
+            customDetentHeights,
+            selectedDetentIdentifier,
+            selectedCustomDetentHeight,
+            largestUndimmedDetentIdentifier,
+            largestUndimmedCustomDetentHeight,
+            prefersGrabberVisible,
+            preferredCornerRadius,
+            prefersScrollingExpandsWhenScrolledToEdge,
+            prefersEdgeAttachedInCompactHeight,
+            widthFollowsPreferredContentSizeWhenEdgeAttached,
+            wantsFullScreen,
+          }
+
+    return {
+      modalInstanceId: modalInstanceIdRef.current,
+      isModalInPresentation,
+      preferredContentWidth,
+      preferredContentHeight,
+      modalViewBackground: modalViewBackground ?? 'clear',
+      cornerConfiguration: cornerConfiguration ?? {
+        type: 'containerConcentric',
+      },
+      sheet,
+    }
+  }, [
+    detents,
+    customDetentHeights,
+    selectedDetentIdentifier,
+    selectedCustomDetentHeight,
+    largestUndimmedDetentIdentifier,
+    largestUndimmedCustomDetentHeight,
+    prefersGrabberVisible,
+    preferredCornerRadius,
+    prefersScrollingExpandsWhenScrolledToEdge,
+    prefersEdgeAttachedInCompactHeight,
+    widthFollowsPreferredContentSizeWhenEdgeAttached,
+    wantsFullScreen,
+    isModalInPresentation,
+    preferredContentWidth,
+    preferredContentHeight,
+    modalViewBackground,
+    cornerConfiguration,
+  ])
+
+  const clearRetryTimeout = useCallback(() => {
+    if (timeoutRef.current != null) {
+      clearTimeout(timeoutRef.current)
+      timeoutRef.current = null
+      logDebug(modalInstanceIdRef.current, 'cleared apply retry timeout')
+    }
+  }, [])
+
+  const clearDetentPollInterval = useCallback(() => {
+    if (detentPollIntervalRef.current != null) {
+      clearInterval(detentPollIntervalRef.current)
+      detentPollIntervalRef.current = null
+    }
+  }, [])
+
+  useEffect(() => {
+    const wasVisible = prevVisibleRef.current
+    prevVisibleRef.current = visible === true
+    isVisibleRef.current = visible
+
+    if (Platform.OS !== 'ios') return
+
+    if (!wasVisible && visible) {
+      const controller = getSheetModalController()
+      controller?.cachePresentedModalConfig(nativeConfig)
+    } else if (wasVisible && !visible) {
+      logDebug(modalInstanceIdRef.current, 'visible=false: cleanup')
+      clearRetryTimeout()
+      clearDetentPollInterval()
+      lastDetentKeyRef.current = null
+    }
+  }, [visible, nativeConfig, clearRetryTimeout, clearDetentPollInterval])
+
+  const applyNativeConfigWithRetry = useCallback(() => {
+    if (Platform.OS !== 'ios' || !visible) return
+    const controller = getSheetModalController()
+    if (controller == null) return
+
+    clearRetryTimeout()
+    logDebug(modalInstanceIdRef.current, 'applyNativeConfigWithRetry start', {
+      visible,
+      selectedCustomDetentHeight,
+      largestUndimmedCustomDetentHeight,
+      detents,
+      customDetentHeights,
+    })
+
+    let attempts = 0
+    const attempt = () => {
+      if (!isVisibleRef.current) return
+      const didApply = controller.applyPresentedModalConfig(nativeConfig)
+      attempts += 1
+      logDebug(modalInstanceIdRef.current, 'applyPresentedModalConfig attempt', {
+        attempt: attempts,
+        didApply,
+      })
+      if (!didApply && attempts < APPLY_RETRY_LIMIT) {
+        timeoutRef.current = setTimeout(attempt, APPLY_RETRY_DELAY_MS)
+      }
+    }
+
+    attempt()
+  }, [
+    clearRetryTimeout,
+    customDetentHeights,
+    detents,
+    largestUndimmedCustomDetentHeight,
+    nativeConfig,
+    selectedCustomDetentHeight,
+    visible,
+  ])
+
+  useEffect(() => {
+    applyNativeConfigWithRetry()
+  }, [applyNativeConfigWithRetry])
+
+  useEffect(() => {
+    return () => {
+      clearRetryTimeout()
+      clearDetentPollInterval()
+    }
+  }, [clearDetentPollInterval, clearRetryTimeout])
+
+  useEffect(() => {
+    if (Platform.OS !== 'ios') return
+    if (visible !== true || onDetentChange == null) {
+      clearDetentPollInterval()
+      return
+    }
+
+    const controller = getSheetModalController()
+    if (controller == null) return
+
+    const poll = () => {
+      if (!isVisibleRef.current) return
+      const detent = controller.getPresentedModalDetent(modalInstanceIdRef.current)
+      if (detent == null) return
+
+      const detentKey = `${detent.rawDetentIdentifier ?? ''}|${
+        detent.customDetentHeight ?? ''
+      }`
+      if (detentKey === lastDetentKeyRef.current) return
+
+      lastDetentKeyRef.current = detentKey
+      logDebug(modalInstanceIdRef.current, 'emit onDetentChange', {
+        detentIdentifier: detent.detentIdentifier,
+        rawDetentIdentifier: detent.rawDetentIdentifier,
+        customDetentHeight: detent.customDetentHeight,
+      })
+      onDetentChange(detent)
+    }
+
+    clearDetentPollInterval()
+    poll()
+    detentPollIntervalRef.current = setInterval(poll, 80)
+
+    return () => {
+      clearDetentPollInterval()
+    }
+  }, [clearDetentPollInterval, onDetentChange, visible])
+
+  const onShow = useCallback<ModalOnShow>(
+    (event) => {
+      logDebug(modalInstanceIdRef.current, 'onShow')
+      applyNativeConfigWithRetry()
+      onShowProp?.(event)
+    },
+    [applyNativeConfigWithRetry, onShowProp]
+  )
+
+  const onDismiss = useCallback<ModalOnDismiss>(() => {
+    logDebug(modalInstanceIdRef.current, 'onDismiss')
+    clearRetryTimeout()
+    onDismissProp?.()
+  }, [clearRetryTimeout, onDismissProp])
+
+  if (Platform.OS === 'ios' && !visible) {
+    return null
+  }
+
+  return (
+    <RNModal
+      visible={visible}
+      animationType={animationType ?? 'slide'}
+      presentationStyle={presentationStyle ?? 'pageSheet'}
+      onRequestClose={onRequestClose}
+      onDismiss={onDismiss}
+      onShow={onShow}
+      allowSwipeDismissal={resolvedAllowSwipeDismissal}
+    >
+      {children}
+    </RNModal>
+  )
+}
+
+export default Modal

package/src/index.ts

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

package/src/specs/SheetModalController.nitro.ts

@@ -0,0 +1,54 @@
+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[]
+  customDetentHeights?: number[]
+  selectedDetentIdentifier?: SheetDetentIdentifier
+  selectedCustomDetentHeight?: number
+  largestUndimmedDetentIdentifier?: SheetDetentIdentifier
+  largestUndimmedCustomDetentHeight?: number
+  prefersGrabberVisible?: boolean
+  preferredCornerRadius?: number
+  prefersScrollingExpandsWhenScrolledToEdge?: boolean
+  prefersEdgeAttachedInCompactHeight?: boolean
+  widthFollowsPreferredContentSizeWhenEdgeAttached?: boolean
+  wantsFullScreen?: boolean
+}
+
+export interface PresentedModalConfig {
+  modalInstanceId?: number
+  isModalInPresentation?: boolean
+  preferredContentWidth?: number
+  preferredContentHeight?: number
+  modalViewBackground?: ModalViewBackground
+  cornerConfiguration?: ModalCornerConfiguration
+  sheet?: SheetPresentationConfig
+}
+
+export interface PresentedModalDetent {
+  detentIdentifier?: SheetDetentIdentifier
+  customDetentHeight?: number
+  rawDetentIdentifier?: string
+}
+
+export interface SheetModalController extends HybridObject<{ ios: 'swift' }> {
+  cachePresentedModalConfig(config: PresentedModalConfig): boolean
+  applyPresentedModalConfig(config: PresentedModalConfig): boolean
+  getPresentedModalDetent(modalInstanceId: number): PresentedModalDetent | null
+  dismissPresentedModal(animated: boolean): boolean
+}