one 1.22.0 → 1.23.0

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

@@ -128,8 +128,6 @@ describe('withOne', () => {
     ).toMatch(/\/one\/metro-entry\.bundle\?platform=ios&dev=true$/)
     expect(
       rewriteRequestUrl('/index.bundle?platform=ios&dev=true&hot=true&minify=false')
-    ).toMatch(
-      /\/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)

package/src/router/useScreens.tsx

@@ -1,5 +1,4 @@
 import { createNavigatorFactory } from '@react-navigation/core'
-import { SafeAreaProviderCompat } from '@react-navigation/elements'
 import type {
   EventMapBase,
   NavigationState,
@@ -8,13 +7,17 @@ import type {
   ScreenListeners,
 } from '@react-navigation/native'
 import React, { memo, Suspense, useContext, useEffect, useState } from 'react'
-import { SafeAreaView, ScrollView, Text, TouchableOpacity, View } from 'react-native'
+import { SafeAreaProvider } from 'react-native-safe-area-context'
 import { ServerContextScript } from '../server/ServerContextScript'
+import { checkSkewAndReload } from '../skewProtection'
+import { getClientMatchesSnapshot } from '../useMatches'
+import { handleSkewError, isChunkLoadError } from '../utils/dynamicImport'
 import { getPageExport } from '../utils/getPageExport'
 import { EmptyRoute } from '../views/EmptyRoute'
+import { NamedSlot } from '../views/Navigator'
+import { RouteErrorView } from '../views/RouteErrorView'
+import type { SuspenseFallbackProps } from '../views/SuspenseFallback'
 import { Try } from '../views/Try'
-import { checkSkewAndReload } from '../skewProtection'
-import { handleSkewError, isChunkLoadError } from '../utils/dynamicImport'
 import { DevHead } from '../vite/DevHead'
 import { getServerContext, useServerContext } from '../vite/one-server-only'
 import { filterRootHTML } from './filterRootHTML'
@@ -22,17 +25,14 @@ import {
   type DynamicConvention,
   type LoadedRoute,
   Route,
-  RouteParamsContext,
   type RouteNode,
+  RouteParamsContext,
   SuspenseFallbackContext,
   useRouteNode,
 } from './Route'
+import { getRouteHmrEpoch, subscribeRouteHmr } from './routeHmr'
 import { SpaShellContext } from './SpaShellContext'
-import { NamedSlot } from '../views/Navigator'
-import type { SuspenseFallbackProps } from '../views/SuspenseFallback'
 import { sortRoutesWithInitial } from './sortRoutes'
-import { getRouteHmrEpoch, subscribeRouteHmr } from './routeHmr'
-import { getClientMatchesSnapshot } from '../useMatches'
 
 // `@react-navigation/core` does not expose the Screen or Group components directly, so we have to
 // do this hack.
@@ -112,6 +112,13 @@ const cachedInlineCSSElements: React.ReactNode[] =
       })()
     : []
 
+// zeroed so ssr and the first client render match; the provider measures the
+// real insets and frame from css env() on mount
+const SSR_SAFE_METRICS = {
+  frame: { x: 0, y: 0, width: 0, height: 0 },
+  insets: { top: 0, left: 0, right: 0, bottom: 0 },
+}
+
 /**
  * Separate component for rendering root layouts with HTML.
  * This is extracted into its own component so React's HMR can properly track changes.
@@ -204,7 +211,9 @@ function RootLayoutRenderer({
         {headChildren}
       </head>
       <body key="body" suppressHydrationWarning {...bodyProps}>
-        <SafeAreaProviderCompat>{finalChildren}</SafeAreaProviderCompat>
+        <SafeAreaProvider initialMetrics={SSR_SAFE_METRICS}>
+          {finalChildren}
+        </SafeAreaProvider>
       </body>
     </>
   )
@@ -583,8 +592,12 @@ export function getQualifiedRouteComponent(value: RouteNode) {
 
   QualifiedRoute.displayName = `Route(${value.route})`
 
-  qualifiedStore.set(value, QualifiedRoute)
-  return memo(QualifiedRoute)
+  // cache the memoized component, not the raw one: returning a different
+  // component type on the first call than on every call after it remounts the
+  // whole route subtree once, throwing away layout and screen state
+  const Memoized = memo(QualifiedRoute)
+  qualifiedStore.set(value, Memoized)
+  return Memoized
 }
 
 /** @returns a function which provides a screen id that matches the dynamic route name in params. */
@@ -733,65 +746,12 @@ class RouteErrorBoundary extends React.Component<
     if (this.state.hasError) {
       const { error, errorInfo } = this.state
       return (
-        <SafeAreaView style={{ backgroundColor: '#000' }}>
-          <View style={{ margin: 16, gap: 16 }}>
-            <Text
-              style={{
-                alignSelf: 'flex-start',
-                padding: 5,
-                margin: -5,
-                backgroundColor: 'red',
-                color: 'white',
-                fontSize: 20,
-                fontFamily: 'monospace',
-              }}
-            >
-              Error on route "{this.props.routeName}"
-            </Text>
-            <Text style={{ color: 'white', fontSize: 16, fontFamily: 'monospace' }}>
-              {error instanceof Error ? error.message : error}
-            </Text>
-            <TouchableOpacity onPress={this.clearError.bind(this)}>
-              <Text
-                style={{
-                  alignSelf: 'flex-start',
-                  margin: -6,
-                  padding: 6,
-                  backgroundColor: 'white',
-                  color: 'black',
-                  fontSize: 14,
-                  fontFamily: 'monospace',
-                }}
-              >
-                Retry
-              </Text>
-            </TouchableOpacity>
-            <ScrollView contentContainerStyle={{ gap: 12 }}>
-              {error instanceof Error ? (
-                <Text
-                  style={{
-                    color: 'white',
-                    fontSize: 12,
-                    fontFamily: 'monospace',
-                  }}
-                >
-                  {error.stack}
-                </Text>
-              ) : null}
-              {errorInfo?.componentStack ? (
-                <Text
-                  style={{
-                    color: 'white',
-                    fontSize: 12,
-                    fontFamily: 'monospace',
-                  }}
-                >
-                  Component Stack: {errorInfo.componentStack}
-                </Text>
-              ) : null}
-            </ScrollView>
-          </View>
-        </SafeAreaView>
+        <RouteErrorView
+          routeName={this.props.routeName}
+          error={error}
+          errorInfo={errorInfo}
+          onRetry={this.clearError.bind(this)}
+        />
       )
     }
 

package/src/router/web/WebStackNavigator.tsx

@@ -2,15 +2,17 @@
 
 import {
   createNavigatorFactory,
-  StackActions,
-  StackRouter,
   useNavigationBuilder,
   type EventArg,
   type ParamListBase,
+} from '@react-navigation/core'
+import {
+  StackActions,
+  StackRouter,
   type StackActionHelpers,
   type StackNavigationState,
   type StackRouterOptions,
-} from '@react-navigation/native'
+} from '@react-navigation/routers'
 import type {
   NativeStackNavigationEventMap,
   NativeStackNavigationOptions,
@@ -23,6 +25,7 @@ type WebStackNavigatorProps = {
   initialRouteName?: string
   screenOptions?: NativeStackNavigationOptions
   children: ReactNode
+  headlessChildren?: ReactNode[]
   id?: string
   // accept anything else NativeStackNavigator does so withLayoutContext can pass through
   [k: string]: any
@@ -32,29 +35,28 @@ type WebStackNavigatorProps = {
  * Drop-in replacement for NativeStackNavigator on web.
  *
  * Uses the same router (StackRouter) and option shape as native-stack so
- * navigation behavior is identical; the difference is that overlay-type
- * presentations (modal, formSheet, ...) get peeled off the underlying view
- * and rendered via the configured Stack render component in WebStackView.
+ * navigation behavior is identical; the view renders the focused screen and
+ * delegates presentation chrome to Presentations.
  */
 function WebStackNavigator({
   initialRouteName,
   children,
   screenOptions,
+  headlessChildren,
   ...rest
 }: WebStackNavigatorProps) {
-  const { state, navigation, descriptors, NavigationContent, describe } =
-    useNavigationBuilder<
-      StackNavigationState<ParamListBase>,
-      StackRouterOptions,
-      StackActionHelpers<ParamListBase>,
-      NativeStackNavigationOptions,
-      NativeStackNavigationEventMap
-    >(StackRouter, {
-      ...(rest as any),
-      children,
-      screenOptions,
-      initialRouteName,
-    })
+  const { state, navigation, descriptors, NavigationContent } = useNavigationBuilder<
+    StackNavigationState<ParamListBase>,
+    StackRouterOptions,
+    StackActionHelpers<ParamListBase>,
+    NativeStackNavigationOptions,
+    NativeStackNavigationEventMap
+  >(StackRouter, {
+    ...(rest as any),
+    children,
+    screenOptions,
+    initialRouteName,
+  })
 
   // Mirror native-stack tabPress popToTop behavior
   useEffect(() => {
@@ -78,7 +80,7 @@ function WebStackNavigator({
         state={state}
         navigation={navigation as any}
         descriptors={descriptors as any}
-        describe={describe as any}
+        customChildren={headlessChildren}
       />
     </NavigationContent>
   )