one 1.22.0 → 1.23.0

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

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