one 1.21.13 → 1.23.0

package/src/headless/useStack.ts

@@ -0,0 +1,74 @@
+'use client'
+
+import type { ParamListBase } from '@react-navigation/core'
+import type { StackNavigationState } from '@react-navigation/routers'
+import {
+  createContext,
+  createElement,
+  useContext,
+  useMemo,
+  type PropsWithChildren,
+  type ReactElement,
+} from 'react'
+
+import type { UseStackResult } from './types'
+import { getPathFromState } from '../fork/getPathFromState'
+import { getResolvedLinking } from '../router/linkingConfig'
+
+export type HeadlessStackDescriptors = Record<
+  string,
+  {
+    options: Record<string, any>
+    render: () => ReactElement
+  }
+>
+
+type StackStateProviderProps = PropsWithChildren<{
+  state: StackNavigationState<ParamListBase>
+  descriptors: HeadlessStackDescriptors
+}>
+
+const StackContext = createContext<UseStackResult | null>(null)
+
+export function StackStateProvider({
+  state,
+  descriptors,
+  children,
+}: StackStateProviderProps) {
+  const linking = getResolvedLinking()
+  const value = useMemo<UseStackResult>(() => {
+    const screens = state.routes.map((route, index) => {
+      const descriptor = descriptors[route.key]!
+      const options = descriptor.options
+      const href = (linking?.getPathFromState ?? getPathFromState)(
+        { ...state, index },
+        linking?.config
+      )
+
+      return {
+        key: route.key,
+        name: route.name,
+        params: (route.params ?? {}) as Record<string, any>,
+        href,
+        isFocused: index === state.index,
+        keepMounted: options.keepMounted === true,
+        options,
+        element: descriptor.render(),
+      }
+    })
+
+    return { screens, focused: screens[state.index]! }
+  }, [descriptors, linking, state])
+
+  return createElement(StackContext.Provider, { value }, children)
+}
+
+export function useStack(): UseStackResult {
+  const value = useContext(StackContext)
+  if (!value) {
+    throw new Error(
+      'useStack() must be called inside a <Stack>. it is web-only: on native the stack is rendered by react-navigation.'
+    )
+  }
+  return value
+}

package/src/headless/useTabs.ts

@@ -0,0 +1,40 @@
+'use client'
+
+import { use, useMemo, type ReactElement } from 'react'
+
+import { appendBaseUrl } from '../fork/getPathFromState-mods'
+import { stripGroupSegmentsFromPath } from '../router/matchers'
+import { TabTriggerMapContext } from '../ui/TabContext'
+import { useNavigatorContext } from '../views/Navigator'
+import type { UseTabsResult } from './types'
+
+type TabsDescriptor = {
+  options: Record<string, any>
+  render: () => ReactElement
+}
+
+export function useTabs(): UseTabsResult {
+  const { state, descriptorsRef } = useNavigatorContext()
+  const triggerMap = use(TabTriggerMapContext)
+  const descriptors = descriptorsRef.current
+
+  return useMemo(() => {
+    const screens = state.routes.map((route, index) => {
+      const descriptor = descriptors[route.key] as TabsDescriptor
+      const config = triggerMap[route.name]
+
+      return {
+        key: route.key,
+        name: route.name,
+        params: (route.params ?? {}) as Record<string, any>,
+        href: config ? stripGroupSegmentsFromPath(appendBaseUrl(config.href)) : '',
+        isFocused: index === state.index,
+        keepMounted: descriptor.options.keepMounted === true,
+        options: descriptor.options,
+        element: descriptor.render(),
+      }
+    })
+
+    return { screens, focused: screens[state.index]! }
+  }, [descriptors, state, triggerMap])
+}

package/src/index.ts

@@ -81,6 +81,17 @@ export { href } from './href'
 export { getLinking, type OneLinkingConfig } from './link/getLinking'
 export { useSitemap, type SitemapType } from './router/sitemap'
 // components
+export { Presentations, type PresentationsProps } from './headless/Presentations'
+export { useStack } from './headless/useStack'
+export type {
+  ModalPresentationOptions,
+  ModalPresentationProps,
+  ScreenEntry,
+  SheetPresentationOptions,
+  SheetPresentationProps,
+  UseStackResult,
+  WebPresentations,
+} from './headless/types'
 export { Stack } from './layouts/Stack'
 export { Tabs } from './layouts/Tabs'
 export { Protected, type ProtectedProps } from './views/Protected'
@@ -95,24 +106,9 @@ export type {
   StackScreenOptions,
   StackScreenProps,
 } from './layouts/stack-utils'
-// Stack render API (for custom web overlay rendering)
-export type {
-  StackRender,
-  StackRenderComponent,
-  StackRenderProps,
-} from './router/web/ScreenRenderContext'
-// Tabs / Drawer render API + global setup
-export {
-  getRenderingConfig,
-  setupRendering,
-  type DrawerRender,
-  type DrawerRenderComponent,
-  type DrawerRenderProps,
-  type RenderingConfig,
-  type TabsRender,
-  type TabsRenderComponent,
-  type TabsRenderProps,
-} from './router/renderingRegistry'
+export { useTabs } from './headless/useTabs'
+export { useDrawer } from './headless/useDrawer'
+export type { UseTabsResult, UseDrawerResult } from './headless/types'
 // utilities
 export { withLayoutContext } from './layouts/withLayoutContext'
 export { Link } from './link/Link'

package/src/layouts/Drawer.tsx

@@ -4,10 +4,8 @@ import {
   type DrawerNavigationOptions,
 } from '@react-navigation/drawer'
 import type { DrawerNavigationState, ParamListBase } from '@react-navigation/native'
-import React, { useMemo, type ComponentProps } from 'react'
-import { Platform } from 'react-native'
+import React, { type ComponentProps } from 'react'
 
-import { getRenderingConfig, type DrawerRender } from '../router/renderingRegistry'
 import { withLayoutContext } from './withLayoutContext'
 
 const DrawerNavigator = createDrawerNavigator().Navigator
@@ -19,38 +17,9 @@ const RNDrawer = withLayoutContext<
   DrawerNavigationEventMap
 >(DrawerNavigator)
 
-type DrawerExtraProps = {
-  /**
-   * Platform-keyed sidebar component. Replaces the default drawer content.
-   * Dispatches on `Platform.OS` - `render.ios` works on iOS, `render.web`
-   * on web, etc. Falls back to `setupRendering({ Drawer: { ... } })` global
-   * if no prop is set, then to the built-in drawer content.
-   */
-  render?: DrawerRender
-}
-
-const DrawerWithRender = React.forwardRef<
-  unknown,
-  ComponentProps<typeof RNDrawer> & DrawerExtraProps
->((props, ref) => {
-  const { render, drawerContent, ...rest } = props as any
-
-  // Resolution: prop drawerContent > prop render[platform] > setupRendering[platform] > default
-  const effectiveDrawerContent = useMemo(() => {
-    if (drawerContent) return drawerContent
-    const platform = Platform.OS as 'web' | 'ios' | 'android'
-    const fromProp = render?.[platform]
-    if (fromProp) return fromProp
-    const fromGlobal = getRenderingConfig().Drawer?.[platform]
-    if (fromGlobal) return fromGlobal
-    return undefined
-  }, [drawerContent, render])
-
-  if (effectiveDrawerContent) {
-    return <RNDrawer {...rest} ref={ref} drawerContent={effectiveDrawerContent} />
-  }
-  return <RNDrawer {...rest} ref={ref} />
-})
+const DrawerWithRender = React.forwardRef<unknown, ComponentProps<typeof RNDrawer>>(
+  (props, ref) => <RNDrawer {...(props as any)} ref={ref} />
+)
 
 // Preserve withLayoutContext's static Screen so user code like
 // `<Drawer.Screen ... />` keeps working through the render wrapper.

package/src/layouts/Drawer.web.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { createNavigatorFactory, useNavigationBuilder } from '@react-navigation/core'
+import type {
+  DrawerNavigationEventMap,
+  DrawerNavigationOptions,
+} from '@react-navigation/drawer'
+import {
+  type DrawerActionHelpers,
+  type DrawerNavigationState,
+  DrawerRouter,
+  type DrawerRouterOptions,
+  type ParamListBase,
+} from '@react-navigation/routers'
+import { Children, type ComponentProps, forwardRef, type ReactNode } from 'react'
+
+import { getCustomNavigatorChildren, isNavigatorConfigChild } from '../headless/children'
+import { devHeadlessNote } from '../headless/devHeadlessNote'
+import { renderKeptMountedScreens, useVisitedScreens } from '../headless/keepMounted'
+import {
+  DrawerStateProvider,
+  type HeadlessDrawerDescriptors,
+  useDrawer,
+} from '../headless/useDrawer'
+import { withLayoutContext } from './withLayoutContext'
+
+type WebDrawerNavigatorProps = {
+  children: ReactNode
+  headlessChildren?: ReactNode[]
+  initialRouteName?: string
+  defaultStatus?: DrawerRouterOptions['defaultStatus']
+  backBehavior?: DrawerRouterOptions['backBehavior']
+  screenOptions?: DrawerNavigationOptions | ((props: any) => DrawerNavigationOptions)
+  [key: string]: any
+}
+
+function WebDrawerNavigator({
+  children,
+  headlessChildren,
+  initialRouteName,
+  defaultStatus,
+  backBehavior,
+  screenOptions,
+  ...rest
+}: WebDrawerNavigatorProps) {
+  const { state, descriptors, navigation, NavigationContent } = useNavigationBuilder<
+    DrawerNavigationState<ParamListBase>,
+    DrawerRouterOptions,
+    DrawerActionHelpers<ParamListBase>,
+    DrawerNavigationOptions,
+    DrawerNavigationEventMap
+  >(DrawerRouter, {
+    ...(rest as any),
+    children,
+    initialRouteName,
+    defaultStatus,
+    backBehavior,
+    screenOptions,
+  })
+
+  return (
+    <NavigationContent>
+      <DrawerStateProvider
+        state={state}
+        descriptors={descriptors as HeadlessDrawerDescriptors}
+        navigation={navigation}
+      >
+        <HeadlessDrawerView customChildren={headlessChildren} />
+      </DrawerStateProvider>
+    </NavigationContent>
+  )
+}
+
+function HeadlessDrawerView({ customChildren }: { customChildren?: ReactNode[] }) {
+  const { screens, focused } = useDrawer()
+  const visited = useVisitedScreens(focused.key)
+
+  devHeadlessNote('Drawer')
+
+  if (customChildren?.length) {
+    return <>{customChildren}</>
+  }
+
+  return renderKeptMountedScreens(screens, visited)
+}
+
+const DrawerNavigator = createNavigatorFactory(WebDrawerNavigator)().Navigator
+
+const RNDrawer = withLayoutContext<
+  DrawerNavigationOptions,
+  typeof DrawerNavigator,
+  DrawerNavigationState<ParamListBase>,
+  DrawerNavigationEventMap
+>(DrawerNavigator)
+
+const DrawerWithHeadless = forwardRef<unknown, ComponentProps<typeof RNDrawer>>(
+  (props, ref) => {
+    const { children, ...rest } = props
+    const customChildren = getCustomNavigatorChildren(children)
+
+    return (
+      <RNDrawer
+        {...rest}
+        ref={ref}
+        headlessChildren={customChildren.length ? customChildren : undefined}
+      >
+        {Children.toArray(children).filter(isNavigatorConfigChild)}
+      </RNDrawer>
+    )
+  }
+)
+
+export const Drawer = Object.assign(DrawerWithHeadless, {
+  Screen: RNDrawer.Screen,
+})
+
+export default Drawer

package/src/layouts/Stack.tsx

@@ -1,25 +1,22 @@
 import type { ParamListBase, StackNavigationState } from '@react-navigation/native'
-import {
-  type NativeStackNavigationEventMap,
-  type NativeStackNavigationOptions,
+import type {
+  NativeStackNavigationEventMap,
+  NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
-import React, { Children, useMemo, type ComponentProps } from 'react'
-
+import React, { Children, type ComponentProps, useMemo } from 'react'
+import { isChildOfType } from '../utils/children'
+import { Protected } from '../views/Protected'
+import { Screen } from '../views/Screen'
+import { createStackNavigator, getStackNavigatorProps } from './stack-navigator'
 import {
-  StackScreen,
+  appendScreenStackPropsToOptions,
   StackHeader,
   StackHeaderComponent,
   StackHeaderSearchBar,
-  appendScreenStackPropsToOptions,
+  StackScreen,
   type StackScreenProps,
 } from './stack-utils'
 import { withLayoutContext } from './withLayoutContext'
-import { isChildOfType } from '../utils/children'
-import { Protected } from '../views/Protected'
-import { Screen } from '../views/Screen'
-import { createStackNavigator } from './stack-navigator'
-import { StackRenderProvider, type StackRender } from '../router/web/ScreenRenderContext'
-import { getRenderingConfig } from '../router/renderingRegistry'
 
 const NativeStackNavigator = createStackNavigator().Navigator
 
@@ -58,69 +55,64 @@ function mapChildren(children: React.ReactNode): React.ReactNode {
         return null
       }
 
-      // pass through other children (like Screen)
-      return child
+      if (isChildOfType(child, Screen)) {
+        return child
+      }
+
+      return null
     })
     .filter(Boolean)
 }
 
-type StackExtraProps = {
-  /**
-   * Platform-keyed render component for overlay routes (modal / formSheet /
-   * pageSheet / transparentModal / fullScreenModal). v1 consumes `web` only;
-   * `ios` / `android` are reserved for future use. Per-route overrides go on
-   * `<Stack.Screen options={{ render }} />`.
-   */
-  render?: StackRender
-}
-
 /**
  * Stack navigator with support for Header Composition API.
  * Wraps the base Stack to pre-process StackScreen children.
  */
-const StackWithComposition = React.forwardRef<
-  unknown,
-  ComponentProps<typeof RNStack> & StackExtraProps
->((props, ref) => {
-  const { children, screenOptions, render, ...rest } = props
-
-  // extract Stack.Header from children for screenOptions
-  const screenOptionsWithHeader = useMemo(() => {
-    const stackHeader = Children.toArray(children).find((child) =>
-      isChildOfType(child, StackHeaderComponent)
-    )
-
-    if (stackHeader && isChildOfType(stackHeader, StackHeaderComponent)) {
-      const headerProps: StackScreenProps = { children: stackHeader }
-      if (screenOptions) {
-        if (typeof screenOptions === 'function') {
-          return (...args: Parameters<typeof screenOptions>) => {
-            const opts = screenOptions(...args)
-            return appendScreenStackPropsToOptions(opts, headerProps)
+const StackWithComposition = React.forwardRef<unknown, ComponentProps<typeof RNStack>>(
+  (props, ref) => {
+    const { children, screenOptions, ...rest } = props
+
+    // extract Stack.Header from children for screenOptions
+    const screenOptionsWithHeader = useMemo(() => {
+      const stackHeader = Children.toArray(children).find((child) =>
+        isChildOfType(child, StackHeaderComponent)
+      )
+
+      if (stackHeader && isChildOfType(stackHeader, StackHeaderComponent)) {
+        const headerProps: StackScreenProps = { children: stackHeader }
+        if (screenOptions) {
+          if (typeof screenOptions === 'function') {
+            return (...args: Parameters<typeof screenOptions>) => {
+              const opts = screenOptions(...args)
+              return appendScreenStackPropsToOptions(opts, headerProps)
+            }
           }
+          return appendScreenStackPropsToOptions(screenOptions, headerProps)
         }
-        return appendScreenStackPropsToOptions(screenOptions, headerProps)
+        return appendScreenStackPropsToOptions({}, headerProps)
       }
-      return appendScreenStackPropsToOptions({}, headerProps)
-    }
-
-    return screenOptions
-  }, [children, screenOptions])
 
-  // pre-process children to convert StackScreen to Screen
-  const processedChildren = useMemo(() => mapChildren(children), [children])
+      return screenOptions
+    }, [children, screenOptions])
 
-  const navigator = (
-    <RNStack {...rest} ref={ref} screenOptions={screenOptionsWithHeader}>
-      {processedChildren}
-    </RNStack>
-  )
+    // pre-process children to convert StackScreen to Screen
+    const processedChildren = useMemo(() => mapChildren(children), [children])
+    const navigatorProps = useMemo(() => getStackNavigatorProps(children), [children])
 
-  // Per-instance prop wins; otherwise fall back to setupRendering global.
-  const effectiveRender = render ?? getRenderingConfig().Stack
-  if (!effectiveRender) return navigator
-  return <StackRenderProvider value={effectiveRender}>{navigator}</StackRenderProvider>
-})
+    return (
+      <RNStack
+        {...rest}
+        {...navigatorProps}
+        ref={ref}
+        screenOptions={
+          screenOptionsWithHeader as ComponentProps<typeof RNStack>['screenOptions']
+        }
+      >
+        {processedChildren}
+      </RNStack>
+    )
+  }
+)
 
 export const Stack = Object.assign(StackWithComposition, {
   Screen: StackScreen,

package/src/layouts/Tabs.tsx

@@ -12,7 +12,6 @@ import { Platform, Pressable } from 'react-native'
 import type { OneRouter } from '../interfaces/router'
 import { Link } from '../link/Link'
 import { Protected } from '../views/Protected'
-import { getRenderingConfig, type TabsRender } from '../router/renderingRegistry'
 import { withLayoutContext } from './withLayoutContext'
 
 const DefaultTabBar = ({ state, ...restProps }: BottomTabBarProps) => {
@@ -87,37 +86,12 @@ const RNTabs = withLayoutContext<
   })
 })
 
-type TabsExtraProps = {
-  /**
-   * Platform-keyed tab bar component. Replaces the default bottom-tabs bar.
-   * v1 consumes `web` only; `ios` / `android` accepted for future use.
-   * Falls back to `setupRendering({ Tabs: { web } })` global registry if
-   * no prop is set, then to the built-in `BottomTabBar`.
-   */
-  render?: TabsRender
-}
-
-const TabsWithRender = React.forwardRef<
-  unknown,
-  ComponentProps<typeof RNTabs> & TabsExtraProps
->((props, ref) => {
-  const { render, tabBar, ...rest } = props as any
-
-  // Resolution: prop tabBar > prop render[platform] > setupRendering[platform] > default.
-  // Tabs runs on web AND native so we dispatch on Platform.OS - unlike Stack,
-  // where the web navigator only consumes the `web` slot.
-  const effectiveTabBar = useMemo(() => {
-    if (tabBar) return tabBar
-    const platform = Platform.OS as 'web' | 'ios' | 'android'
-    const fromProp = render?.[platform]
-    if (fromProp) return fromProp
-    const fromGlobal = getRenderingConfig().Tabs?.[platform]
-    if (fromGlobal) return fromGlobal
-    return DefaultTabBar
-  }, [tabBar, render])
-
-  return <RNTabs {...rest} ref={ref} tabBar={effectiveTabBar} />
-})
+const TabsWithRender = React.forwardRef<unknown, ComponentProps<typeof RNTabs>>(
+  (props, ref) => {
+    const { tabBar, ...rest } = props as any
+    return <RNTabs {...rest} ref={ref} tabBar={tabBar ?? DefaultTabBar} />
+  }
+)
 
 export const Tabs = Object.assign(TabsWithRender, {
   Protected,

package/src/layouts/Tabs.web.tsx

@@ -0,0 +1,151 @@
+'use client'
+
+import type { ParamListBase } from '@react-navigation/core'
+import { useNavigationBuilder } from '@react-navigation/core'
+import {
+  type TabActionHelpers,
+  type TabNavigationState,
+  TabRouter,
+  type TabRouterOptions,
+} from '@react-navigation/routers'
+import { Children, Fragment, forwardRef, type ReactNode, useMemo, useRef } from 'react'
+import { getPathFromState } from '../fork/getPathFromState'
+import { getCustomNavigatorChildren, isNavigatorConfigChild } from '../headless/children'
+import { devHeadlessNote } from '../headless/devHeadlessNote'
+import { renderKeptMountedScreens, useVisitedScreens } from '../headless/keepMounted'
+import { useTabs } from '../headless/useTabs'
+import { getResolvedLinking } from '../router/linkingConfig'
+import { TabTriggerMapContext } from '../ui/TabContext'
+import { NavigatorContext } from '../views/Navigator'
+import { Protected } from '../views/Protected'
+import { Screen } from '../views/Screen'
+import { withLayoutContext } from './withLayoutContext'
+
+type TabsEventMap = {
+  tabPress: { data: undefined; canPreventDefault: true }
+  tabLongPress: { data: undefined }
+}
+
+type WebTabsNavigatorProps = {
+  children?: ReactNode
+  headlessChildren?: ReactNode[]
+  initialRouteName?: string
+  screenOptions?: any
+  id?: string
+  [key: string]: any
+}
+
+type TabsProps = Omit<WebTabsNavigatorProps, 'headlessChildren'> & {
+  render?: unknown
+  tabBar?: unknown
+}
+
+function WebTabsNavigator({
+  children,
+  headlessChildren,
+  initialRouteName,
+  screenOptions,
+  id,
+  ...rest
+}: WebTabsNavigatorProps) {
+  const { state, navigation, descriptors, NavigationContent } = useNavigationBuilder<
+    TabNavigationState<ParamListBase>,
+    TabRouterOptions,
+    TabActionHelpers<ParamListBase>,
+    Record<string, any>,
+    TabsEventMap
+  >(TabRouter, {
+    ...(rest as any),
+    children,
+    initialRouteName,
+    screenOptions,
+  })
+  const descriptorsRef = useRef(descriptors)
+  descriptorsRef.current = descriptors
+  const linking = getResolvedLinking()
+
+  const navigatorContextValue = useMemo(
+    () => ({
+      contextKey: id ?? '',
+      state,
+      navigation,
+      descriptorsRef,
+      router: TabRouter,
+    }),
+    [id, navigation, state]
+  )
+
+  const triggerMap = useMemo(() => {
+    return Object.fromEntries(
+      state.routes.map((route, index) => {
+        const options = descriptors[route.key]?.options ?? {}
+        const href =
+          typeof options.href === 'string'
+            ? options.href
+            : (linking?.getPathFromState ?? getPathFromState)(
+                { ...state, index },
+                linking?.config
+              )
+
+        return [
+          route.name,
+          {
+            type: 'internal',
+            name: route.name,
+            href,
+            action: {
+              type: 'JUMP_TO',
+              payload: { name: route.name },
+            },
+            index,
+          },
+        ]
+      })
+    )
+  }, [descriptors, linking, state])
+
+  return (
+    <NavigationContent>
+      <TabTriggerMapContext.Provider value={triggerMap as any}>
+        <NavigatorContext.Provider value={navigatorContextValue as any}>
+          <HeadlessTabsView customChildren={headlessChildren} />
+        </NavigatorContext.Provider>
+      </TabTriggerMapContext.Provider>
+    </NavigationContent>
+  )
+}
+
+function HeadlessTabsView({ customChildren }: { customChildren?: ReactNode[] }) {
+  const { screens, focused } = useTabs()
+  const visited = useVisitedScreens(focused.key)
+  devHeadlessNote('Tabs')
+
+  if (customChildren?.length) {
+    return <Fragment>{customChildren}</Fragment>
+  }
+
+  return renderKeptMountedScreens(screens, visited)
+}
+
+const RNTabs = withLayoutContext(WebTabsNavigator)
+
+const TabsWithChildren = forwardRef<unknown, TabsProps>(function TabsWithChildren(
+  { children, ...props },
+  ref
+) {
+  const configChildren = Children.toArray(children).filter(isNavigatorConfigChild)
+  const customChildren = getCustomNavigatorChildren(children)
+
+  return (
+    <RNTabs {...props} ref={ref} headlessChildren={customChildren}>
+      {configChildren}
+    </RNTabs>
+  )
+})
+
+export const Tabs = Object.assign(TabsWithChildren, {
+  Protected,
+  Screen,
+})
+
+export default Tabs