one 1.21.13 → 1.23.0

package/src/layouts/stack-navigator.ts

@@ -1,9 +1,13 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
+import type { ReactNode } from 'react'
 
 /**
  * Returns a Stack navigator factory. On native this is the stock
  * `@react-navigation/native-stack`; on web this is replaced via the
- * `.web.ts` sibling with a custom navigator that supports the `render`
- * prop for overlay presentations.
+ * `.web.ts` sibling with the headless navigator.
  */
 export const createStackNavigator = createNativeStackNavigator
+
+export function getStackNavigatorProps(_children: ReactNode) {
+  return {}
+}

package/src/layouts/stack-navigator.web.ts

@@ -1,3 +1,11 @@
+import type { ReactNode } from 'react'
+
+import { getCustomNavigatorChildren } from '../headless/children'
 import { createWebStackNavigator } from '../router/web/WebStackNavigator'
 
 export const createStackNavigator = createWebStackNavigator
+
+export function getStackNavigatorProps(children: ReactNode) {
+  const headlessChildren = getCustomNavigatorChildren(children)
+  return headlessChildren.length ? { headlessChildren } : {}
+}

package/src/layouts/stack-utils/StackHeaderBackButton.tsx

@@ -2,6 +2,8 @@ import type { NativeStackNavigationOptions } from '@react-navigation/native-stac
 import type { ImageSourcePropType } from 'react-native'
 import type { ScreenStackHeaderConfigProps } from 'react-native-screens'
 
+import { NAVIGATOR_CONFIG } from '../../headless/children'
+
 export interface StackHeaderBackButtonProps {
   children?: string
   style?: NativeStackNavigationOptions['headerBackTitleStyle']
@@ -18,6 +20,8 @@ export function StackHeaderBackButton(_props: StackHeaderBackButtonProps) {
   return null
 }
 
+Object.assign(StackHeaderBackButton, { [NAVIGATOR_CONFIG]: true })
+
 export function appendStackHeaderBackButtonPropsToOptions(
   options: NativeStackNavigationOptions,
   props: StackHeaderBackButtonProps

package/src/layouts/stack-utils/StackHeaderComponent.tsx

@@ -1,8 +1,9 @@
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { Children, isValidElement, type ReactNode } from 'react'
-import { StyleSheet, type ColorValue, type StyleProp } from 'react-native'
+import type { ColorValue, StyleProp } from 'react-native'
 import type { ScreenStackHeaderConfigProps } from 'react-native-screens'
 
+import { NAVIGATOR_CONFIG } from '../../headless/children'
 import {
   appendStackHeaderBackButtonPropsToOptions,
   StackHeaderBackButton,
@@ -21,6 +22,7 @@ import {
   StackHeaderTitle,
 } from './StackHeaderTitle'
 import { isChildOfType } from '../../utils/children'
+import { flattenStyle } from '../../utils/style'
 
 export interface StackHeaderProps {
   children?: ReactNode
@@ -56,12 +58,14 @@ export function StackHeaderComponent(_props: StackHeaderProps) {
   return null
 }
 
+Object.assign(StackHeaderComponent, { [NAVIGATOR_CONFIG]: true })
+
 export function appendStackHeaderPropsToOptions(
   options: NativeStackNavigationOptions,
   props: StackHeaderProps
 ): NativeStackNavigationOptions {
-  const flattenedStyle = StyleSheet.flatten(props.style)
-  const flattenedLargeStyle = StyleSheet.flatten(props.largeStyle)
+  const flattenedStyle = flattenStyle(props.style)
+  const flattenedLargeStyle = flattenStyle(props.largeStyle)
 
   if (props.hidden) {
     return { ...options, headerShown: false }

package/src/layouts/stack-utils/StackHeaderLeft.tsx

@@ -1,6 +1,8 @@
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import type { ReactNode } from 'react'
 
+import { NAVIGATOR_CONFIG } from '../../headless/children'
+
 export interface StackHeaderLeftProps {
   children?: ReactNode
   asChild?: boolean
@@ -14,6 +16,8 @@ export function StackHeaderLeft(_props: StackHeaderLeftProps) {
   return null
 }
 
+Object.assign(StackHeaderLeft, { [NAVIGATOR_CONFIG]: true })
+
 export function appendStackHeaderLeftPropsToOptions(
   options: NativeStackNavigationOptions,
   props: StackHeaderLeftProps

package/src/layouts/stack-utils/StackHeaderRight.tsx

@@ -1,6 +1,8 @@
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import type { ReactNode } from 'react'
 
+import { NAVIGATOR_CONFIG } from '../../headless/children'
+
 export interface StackHeaderRightProps {
   children?: ReactNode
   asChild?: boolean
@@ -14,6 +16,8 @@ export function StackHeaderRight(_props: StackHeaderRightProps) {
   return null
 }
 
+Object.assign(StackHeaderRight, { [NAVIGATOR_CONFIG]: true })
+
 export function appendStackHeaderRightPropsToOptions(
   options: NativeStackNavigationOptions,
   props: StackHeaderRightProps

package/src/layouts/stack-utils/StackHeaderSearchBar.tsx

@@ -1,6 +1,8 @@
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import type { SearchBarProps } from 'react-native-screens'
 
+import { NAVIGATOR_CONFIG } from '../../headless/children'
+
 export interface StackHeaderSearchBarProps extends SearchBarProps {}
 
 /**
@@ -10,6 +12,8 @@ export function StackHeaderSearchBar(_props: StackHeaderSearchBarProps) {
   return null
 }
 
+Object.assign(StackHeaderSearchBar, { [NAVIGATOR_CONFIG]: true })
+
 export function appendStackHeaderSearchBarPropsToOptions(
   options: NativeStackNavigationOptions,
   props: StackHeaderSearchBarProps

package/src/layouts/stack-utils/StackHeaderTitle.tsx

@@ -1,7 +1,9 @@
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
-import { Platform, StyleSheet, type StyleProp, type TextStyle } from 'react-native'
+import type { StyleProp, TextStyle } from 'react-native'
 
-import { convertFontWeightToStringFontWeight } from '../../utils/style'
+import { NAVIGATOR_CONFIG } from '../../headless/children'
+import { PLATFORM } from '../../utils/platform'
+import { convertFontWeightToStringFontWeight, flattenStyle } from '../../utils/style'
 
 export type StackHeaderTitleProps = {
   children?: string
@@ -29,12 +31,14 @@ export function StackHeaderTitle(_props: StackHeaderTitleProps) {
   return null
 }
 
+Object.assign(StackHeaderTitle, { [NAVIGATOR_CONFIG]: true })
+
 export function appendStackHeaderTitlePropsToOptions(
   options: NativeStackNavigationOptions,
   props: StackHeaderTitleProps
 ): NativeStackNavigationOptions {
-  const flattenedStyle = StyleSheet.flatten(props.style)
-  const flattenedLargeStyle = StyleSheet.flatten(props.largeStyle)
+  const flattenedStyle = flattenStyle(props.style)
+  const flattenedLargeStyle = flattenStyle(props.largeStyle)
 
   // Build title style only if there are actual style properties
   const titleStyle = flattenedStyle
@@ -66,7 +70,7 @@ export function appendStackHeaderTitlePropsToOptions(
     headerLargeTitle: props.large,
     // Large titles on iOS require headerTransparent for proper scroll behavior
     // Only set on iOS since headerLargeTitle is iOS-only
-    ...(props.large && Platform.OS === 'ios' && { headerTransparent: true }),
+    ...(props.large && PLATFORM === 'ios' && { headerTransparent: true }),
     headerTitleAlign: flattenedStyle?.textAlign,
     // Only set styles when explicitly configured to avoid interfering with native defaults
     ...(titleStyle &&

package/src/layouts/stack-utils/StackScreen.tsx

@@ -3,27 +3,21 @@
 import type { NativeStackNavigationOptions } from '@react-navigation/native-stack'
 import { Children, isValidElement, useMemo, type PropsWithChildren } from 'react'
 
+import { NAVIGATOR_CONFIG } from '../../headless/children'
 import {
   StackHeaderComponent,
   appendStackHeaderPropsToOptions,
   type StackHeaderProps,
 } from './StackHeaderComponent'
 import { Screen } from '../../views/Screen'
-import type { StackRender } from '../../router/web/ScreenRenderContext'
 
-export type StackScreenOptions = NativeStackNavigationOptions & {
-  /**
-   * Per-route override of the Stack-level `render` prop. Same platform-keyed
-   * shape (`{ web?, ios?, android? }`); v1 consumes `web` only. When set, it
-   * takes precedence over the Stack-level render for this route.
-   */
-  render?: StackRender
+export type StackScreenOptions = Omit<NativeStackNavigationOptions, 'presentation'> & {
+  presentation?: NativeStackNavigationOptions['presentation'] | 'sheet' | (string & {})
 
   /**
    * Web-only. When `true`, the route's React subtree stays mounted across
    * dismissal and re-navigation - `useState`, `useId`, `useReducer`, refs,
-   * and anything stored in the route component all survive. The render
-   * component receives `open: false` while the route is "closed".
+   * and anything stored in the route component all survive.
    *
    * Caveat: route params are captured at first mount. If the same route is
    * navigated to with different params later, the captured subtree keeps
@@ -63,7 +57,9 @@ export function StackScreen({ children, options, ...rest }: StackScreenProps) {
   return <Screen {...rest} options={updatedOptions as NativeStackNavigationOptions} />
 }
 
-const VALID_PRESENTATIONS = [
+Object.assign(StackScreen, { [NAVIGATOR_CONFIG]: true })
+
+const NATIVE_PRESENTATIONS = [
   'card',
   'modal',
   'transparentModal',
@@ -74,38 +70,33 @@ const VALID_PRESENTATIONS = [
   'pageSheet',
 ] as const
 
-// validates presentation value in dev to prevent native crashes from invalid values
-export function validateStackPresentation(
-  options: NativeStackNavigationOptions
-): NativeStackNavigationOptions
+// maps semantic and custom presentations to native-stack values on native
+export function validateStackPresentation(options: StackScreenOptions): StackScreenOptions
 export function validateStackPresentation<
-  F extends (...args: never[]) => NativeStackNavigationOptions,
+  F extends (...args: never[]) => StackScreenOptions,
 >(options: F): F
 export function validateStackPresentation(
-  options:
-    | NativeStackNavigationOptions
-    | ((...args: never[]) => NativeStackNavigationOptions)
-): ((...args: never[]) => NativeStackNavigationOptions) | NativeStackNavigationOptions {
+  options: StackScreenOptions | ((...args: never[]) => StackScreenOptions)
+): ((...args: never[]) => StackScreenOptions) | StackScreenOptions {
   if (typeof options === 'function') {
     return (...args: never[]) => {
-      const resolved = options(...args)
-      validateStackPresentation(resolved)
-      return resolved
+      return validateStackPresentation(options(...args))
     }
   }
 
-  if (process.env.NODE_ENV !== 'production') {
-    const presentation = options.presentation
-    if (
-      presentation &&
-      !VALID_PRESENTATIONS.includes(presentation as (typeof VALID_PRESENTATIONS)[number])
-    ) {
-      console.warn(
-        `Invalid presentation value "${presentation}" passed to Stack.Screen. Valid values are: ${VALID_PRESENTATIONS.map((v) => `"${v}"`).join(', ')}.`
-      )
-    }
+  if (process.env.TAMAGUI_TARGET === 'web' || !options.presentation) {
+    return options
+  }
+
+  if (options.presentation === 'sheet') {
+    return { ...options, presentation: 'formSheet' }
   }
-  return options
+
+  return NATIVE_PRESENTATIONS.includes(
+    options.presentation as (typeof NATIVE_PRESENTATIONS)[number]
+  )
+    ? options
+    : { ...options, presentation: 'modal' }
 }
 
 export function appendScreenStackPropsToOptions(
@@ -114,11 +105,15 @@ export function appendScreenStackPropsToOptions(
 ): StackScreenOptions {
   let updatedOptions: StackScreenOptions = { ...options, ...props.options }
 
-  validateStackPresentation(updatedOptions)
+  updatedOptions = validateStackPresentation(updatedOptions)
 
   function appendChildOptions(child: React.ReactElement, options: StackScreenOptions) {
     if (child.type === StackHeaderComponent) {
-      return appendStackHeaderPropsToOptions(options, child.props as StackHeaderProps)
+      // widened presentation strings are erased before native-stack consumes options
+      return appendStackHeaderPropsToOptions(
+        options as NativeStackNavigationOptions,
+        child.props as StackHeaderProps
+      ) as StackScreenOptions
     } else {
       console.warn(
         `Warning: Unknown child element passed to Stack.Screen: ${(child.type as { name: string }).name ?? child.type}`

package/src/layouts/stack-utils/__tests__/composition.test.tsx

@@ -1,6 +1,13 @@
-import { describe, expect, it } from 'vitest'
+import { describe, expect, it, vi } from 'vitest'
 import React from 'react'
-import { Platform } from 'react-native'
+
+// the header helpers read the platform constant, not react-native
+const platform = vi.hoisted(() => ({ current: 'web' }))
+vi.mock('../../../utils/platform', () => ({
+  get PLATFORM() {
+    return platform.current
+  },
+}))
 
 import {
   StackHeaderTitle,
@@ -68,26 +75,20 @@ describe('Stack Header Composition', () => {
     })
 
     it('sets headerTransparent only on iOS when large is true', () => {
-      // Store original Platform.OS
-      const originalOS = Platform.OS
-
       // Test on iOS - should set headerTransparent
-      ;(Platform as any).OS = 'ios'
+      platform.current = 'ios'
       const iosResult = appendStackHeaderTitlePropsToOptions({}, { large: true })
       expect(iosResult.headerTransparent).toBe(true)
 
       // Test on Android - should NOT set headerTransparent
-      ;(Platform as any).OS = 'android'
+      platform.current = 'android'
       const androidResult = appendStackHeaderTitlePropsToOptions({}, { large: true })
       expect(androidResult.headerTransparent).toBeUndefined()
 
       // Test on web - should NOT set headerTransparent
-      ;(Platform as any).OS = 'web'
+      platform.current = 'web'
       const webResult = appendStackHeaderTitlePropsToOptions({}, { large: true })
       expect(webResult.headerTransparent).toBeUndefined()
-
-      // Restore original
-      ;(Platform as any).OS = originalOS
     })
   })
 

package/src/layouts/stack-utils/index.tsx

@@ -10,12 +10,14 @@ import {
   type StackHeaderSearchBarProps,
 } from './StackHeaderSearchBar'
 import { StackHeaderTitle, type StackHeaderTitleProps } from './StackHeaderTitle'
+import { NAVIGATOR_CONFIG } from '../../headless/children'
 
 /**
  * Compound component for configuring stack headers.
  * Attach to Stack as `Stack.Header`.
  */
 export const StackHeader = Object.assign(StackHeaderComponent, {
+  [NAVIGATOR_CONFIG]: true,
   Left: StackHeaderLeft,
   Right: StackHeaderRight,
   BackButton: StackHeaderBackButton,

package/src/layouts/withLayoutContext.tsx

@@ -96,9 +96,12 @@ export function useFilterScreenChildren(
       // Handle other children (custom components in custom Navigator)
       if (isCustomNavigator) {
         customChildren.push(child)
-      } else if (child != null) {
+      } else if (child != null && process.env.NODE_ENV === 'development') {
+        // a non-config child is the documented way to give a navigator a custom
+        // layout on web. it can't apply here, where react-navigation draws the
+        // chrome, so say that rather than calling it a mistake
         console.warn(
-          `Layout children must be of type Screen, all other children are ignored. To use custom children, create a custom <Layout />. Update Layout Route at: "app${contextKey}/_layout"`
+          `[one] a non-<Screen> child of the navigator at "app${contextKey}/_layout" renders on web only. On native this navigator is drawn by react-navigation and the child is ignored.`
         )
       }
     }

package/src/link/Link.web.tsx

@@ -0,0 +1,84 @@
+import { Slot } from '@radix-ui/react-slot'
+import * as React from 'react'
+
+import type { OneRouter } from '../interfaces/router'
+import { resolveHref } from './href'
+import { useLinkTo } from './useLinkTo'
+
+export const Link = React.forwardRef(function Link(
+  {
+    href,
+    replace,
+    push: _push,
+    id,
+    mask,
+    asChild,
+    rel,
+    target,
+    download,
+    className,
+    style,
+    onPress,
+    disabled,
+    accessibilityLabel,
+    // rn-flavored prop shared code passes; rnw translated it, the dom link must too
+    testID,
+    ...rest
+  }: OneRouter.LinkProps<any> & { testID?: string },
+  ref: React.ForwardedRef<HTMLAnchorElement>
+) {
+  const resolvedHref = React.useMemo(() => {
+    if (href == null) {
+      throw new Error('Link: href is required')
+    }
+    return resolveHref(href)
+  }, [href])
+
+  const resolvedMask = React.useMemo(() => (mask ? resolveHref(mask) : undefined), [mask])
+  const link = useLinkTo({ href: resolvedHref, replace, mask: resolvedMask })
+  const flattenedStyle = React.useMemo<React.CSSProperties>(() => {
+    const styleValue: unknown = style
+    const styleValues: unknown[] = Array.isArray(styleValue)
+      ? styleValue.flat(Number.POSITIVE_INFINITY)
+      : [styleValue]
+    return styleValues.reduce<React.CSSProperties>(
+      (result, value) =>
+        value && typeof value === 'object'
+          ? Object.assign(result, value as React.CSSProperties)
+          : result,
+      {}
+    )
+  }, [style])
+
+  const Element = asChild ? Slot : 'a'
+
+  return (
+    <Element
+      ref={ref}
+      {...rest}
+      href={link.href}
+      role={link.role}
+      className={className}
+      style={flattenedStyle}
+      // undefined has to be omitted, not passed: with asChild it overwrites the child's own
+      // value, so a bare `data-testid: undefined` wipes the testID a tamagui child sets
+      {...(id == null ? null : { id })}
+      {...(rel == null ? null : { rel })}
+      {...(target == null ? null : { target })}
+      {...(download == null ? null : { download })}
+      {...(testID == null ? null : { 'data-testid': testID })}
+      {...(accessibilityLabel == null ? null : { 'aria-label': accessibilityLabel })}
+      {...(disabled ? { 'aria-disabled': true } : null)}
+      onClick={(event) => {
+        if (disabled) {
+          event.preventDefault()
+          return
+        }
+        onPress?.(event)
+        link.onPress(event)
+      }}
+    />
+  )
+}) as unknown as OneRouter.LinkComponent
+
+Link.resolveHref = resolveHref

package/src/link/useLinkTo.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react'
-import { type GestureResponderEvent, Platform } from 'react-native'
+import type { GestureResponderEvent } from 'react-native'
 
 import { appendBaseUrl } from '../fork/getPathFromState-mods'
 import { stripGroupSegmentsFromPath } from '../router/matchers'
@@ -38,7 +38,7 @@ export function useLinkTo(props: { href: string; replace?: boolean; mask?: strin
     const event = props.replace ? 'REPLACE' : 'PUSH'
     let shouldHandle = false
 
-    if (Platform.OS !== 'web' || !e) {
+    if (process.env.TAMAGUI_TARGET !== 'web' || !e) {
       shouldHandle = e ? !e.defaultPrevented : true
     } else if (eventShouldPreventDefault(e)) {
       e.preventDefault()

package/src/metro-config/withOne.test.ts

@@ -120,13 +120,14 @@ describe('withOne', () => {
     const config = (await withOne(projectRoot, { loadViteConfig: false })) as any
     const rewriteRequestUrl = config.server.rewriteRequestUrl
 
+    // the entry is resolved relative to metro's server root, so the prefix depends on
+    // how `one` is linked (`node_modules/one` when installed, a workspace path in a
+    // monorepo). only the entry itself and the preserved query are meaningful here.
     expect(
       rewriteRequestUrl('/.expo/.virtual-metro-entry.bundle?platform=ios&dev=true')
-    ).toContain('/packages/one/metro-entry.bundle?platform=ios&dev=true')
+    ).toMatch(/\/one\/metro-entry\.bundle\?platform=ios&dev=true$/)
     expect(
       rewriteRequestUrl('/index.bundle?platform=ios&dev=true&hot=true&minify=false')
-    ).toContain(
-      '/packages/one/metro-entry.bundle?platform=ios&dev=true&hot=true&minify=false'
-    )
+    ).toMatch(/\/one\/metro-entry\.bundle\?platform=ios&dev=true&hot=true&minify=false$/)
   })
 })

package/src/router/getRouteArtifactPath.test.ts

@@ -68,12 +68,7 @@ describe('getRouteArtifactPath', () => {
   })
 
   test('uses concrete artifacts for a route that inherits spa mode', () => {
-    const page = routeNode(
-      'default-mode/[slug]',
-      './default-mode/[slug].tsx',
-      [],
-      'spa'
-    )
+    const page = routeNode('default-mode/[slug]', './default-mode/[slug].tsx', [], 'spa')
     const root = routeNode('', './_layout.tsx', [page])
 
     expect(

package/src/router/router.ts

@@ -16,7 +16,6 @@ import {
   useDeferredValue,
   useSyncExternalStore,
 } from 'react'
-import { Platform } from 'react-native'
 import { devtoolsRegistry } from '../devtools/registry'
 import type { OneRouter } from '../interfaces/router'
 import { resolveHref } from '../link/href'
@@ -27,6 +26,7 @@ import { checkBlocker } from '../useBlocker'
 import { assertIsReady } from '../utils/assertIsReady'
 import { getLoaderPath, getPreloadCSSPath, getPreloadPath } from '../utils/cleanUrl'
 import { dynamicImport } from '../utils/dynamicImport'
+import { PLATFORM } from '../utils/platform'
 import { isVersionStale } from '../skewProtection'
 import { shouldLinkExternally } from '../utils/url'
 import {
@@ -259,7 +259,7 @@ export function initialize(
   if (context !== cachedContext || !cachedRouteNode) {
     cachedRouteNode = getRoutes(context, {
       ignoreEntryPoints: true,
-      platform: Platform.OS,
+      platform: PLATFORM,
     })
     cachedRootComponent = cachedRouteNode
       ? getQualifiedRouteComponent(cachedRouteNode)