one 1.26.1 → 2.0.0-beta.33.1

package/src/fork/NavigationContainer.tsx

@@ -13,27 +13,19 @@ import {
   getStateFromPath,
   type NavigationContainerProps,
   type NavigationContainerRef,
-  type NavigationState,
   type ParamListBase,
   ThemeProvider,
   validatePathConfig,
 } from '@react-navigation/core'
 // @modified - start
-// import { LinkingContext } from './LinkingContext'
-// import { LocaleDirContext } from './LocaleDirContext'
-// import { DefaultTheme } from './theming/DefaultTheme'
-// import type { DocumentTitleOptions, LinkingOptions, LocaleDirection } from './types'
-// import { UnhandledLinkingContext } from './UnhandledLinkingContext'
 import {
   type DocumentTitleOptions,
   LinkingContext,
   type LinkingOptions,
   LocaleDirContext,
   type LocaleDirection,
-  UNSTABLE_UnhandledLinkingContext as UnhandledLinkingContext,
 } from '@react-navigation/native'
 import * as React from 'react'
-import useLatestCallback from 'use-latest-callback'
 // @modified - end
 import { getLocaleDirection } from './localeDirection'
 import { DefaultTheme } from './theme'
@@ -42,16 +34,8 @@ import { useDocumentTitle } from './useDocumentTitle'
 import { useLinking } from './useLinking'
 import { useThenable } from './useThenable'
 
-declare global {
-  // eslint-disable-next-line no-var
-  // @ts-ignore - Type differs between react-navigation versions
-  var REACT_NAVIGATION_DEVTOOLS: WeakMap<
-    NavigationContainerRef<any>,
-    { readonly linking: LinkingOptions<any> }
-  >
-}
-
-globalThis.REACT_NAVIGATION_DEVTOOLS = new WeakMap()
+// @ts-ignore - v8 declares this with listeners field, we use a simplified version
+globalThis.REACT_NAVIGATION_DEVTOOLS ??= new WeakMap()
 
 type Props<ParamList extends {}> = NavigationContainerProps & {
   direction?: LocaleDirection
@@ -83,7 +67,6 @@ function NavigationContainerInner(
     linking,
     fallback = null,
     documentTitle,
-    onReady,
     onStateChange,
     ...rest
   }: Props<ParamListBase>,
@@ -100,62 +83,38 @@ function NavigationContainerInner(
   useBackButton(refContainer)
   useDocumentTitle(refContainer, documentTitle)
 
-  const [lastUnhandledLink, setLastUnhandledLink] = React.useState<string | undefined>()
-
-  const { getInitialState } = useLinking(
-    refContainer,
-    {
-      enabled: isLinkingEnabled,
-      prefixes: [],
-      ...linking,
-    },
-    setLastUnhandledLink
-  )
-
-  const linkingContext = React.useMemo(() => ({ options: linking }), [linking])
-
-  const unhandledLinkingContext = React.useMemo(
-    () => ({ lastUnhandledLink, setLastUnhandledLink }),
-    [lastUnhandledLink, setLastUnhandledLink]
-  )
-
-  const onReadyForLinkingHandling = useLatestCallback(() => {
-    const path = refContainer.current?.getCurrentRoute()?.path
-    setLastUnhandledLink((previousLastUnhandledLink) => {
-      if (previousLastUnhandledLink === path) {
-        return undefined
-      }
-      return previousLastUnhandledLink
-    })
-    onReady?.()
+  const { getInitialState } = useLinking(refContainer, {
+    enabled: isLinkingEnabled,
+    prefixes: [],
+    ...linking,
   })
 
-  const onStateChangeForLinkingHandling = useLatestCallback(
-    (state: Readonly<NavigationState> | undefined) => {
-      const path = refContainer.current?.getCurrentRoute()?.path
-      setLastUnhandledLink((previousLastUnhandledLink) => {
-        if (previousLastUnhandledLink === path) {
-          return undefined
-        }
-        return previousLastUnhandledLink
-      })
-      onStateChange?.(state)
-    }
+  // @modified - v8 pre-processes linking options into context value
+  const linkingContext = React.useMemo(
+    () => ({
+      options: {
+        ...linking,
+        enabled: isLinkingEnabled,
+        prefixes: linking?.prefixes ?? [],
+        getStateFromPath: linking?.getStateFromPath ?? getStateFromPath,
+        getPathFromState: linking?.getPathFromState ?? getPathFromState,
+        getActionFromState: linking?.getActionFromState ?? getActionFromState,
+      },
+    }),
+    [linking, isLinkingEnabled]
   )
 
   React.useEffect(() => {
     if (refContainer.current) {
-      // @ts-ignore - Type differs between react-navigation versions in monorepo
+      const previous = REACT_NAVIGATION_DEVTOOLS.get(refContainer.current)
+      const listeners = (previous as any)?.listeners ?? new Set()
+
       REACT_NAVIGATION_DEVTOOLS.set(refContainer.current, {
         get linking() {
-          return {
-            ...linking,
-            enabled: isLinkingEnabled,
-            prefixes: linking?.prefixes ?? [],
-            getStateFromPath: linking?.getStateFromPath ?? getStateFromPath,
-            getPathFromState: linking?.getPathFromState ?? getPathFromState,
-            getActionFromState: linking?.getActionFromState ?? getActionFromState,
-          }
+          return linkingContext.options
+        },
+        get listeners() {
+          return listeners
         },
       })
     }
@@ -181,24 +140,21 @@ function NavigationContainerInner(
 
   return (
     <LocaleDirContext.Provider value={direction}>
-      <UnhandledLinkingContext.Provider value={unhandledLinkingContext}>
-        <LinkingContext.Provider value={linkingContext}>
-          <BaseNavigationContainer
-            {...rest}
-            theme={theme}
-            onReady={onReadyForLinkingHandling}
-            onStateChange={onStateChangeForLinkingHandling}
-            initialState={rest.initialState == null ? initialState : rest.initialState}
-            ref={refContainer}
-          />
-        </LinkingContext.Provider>
-      </UnhandledLinkingContext.Provider>
+      <LinkingContext.Provider value={linkingContext}>
+        <BaseNavigationContainer
+          {...rest}
+          theme={theme}
+          onStateChange={onStateChange}
+          initialState={rest.initialState == null ? initialState : rest.initialState}
+          ref={refContainer}
+        />
+      </LinkingContext.Provider>
     </LocaleDirContext.Provider>
   )
 }
 
 export const NavigationContainer = React.forwardRef(NavigationContainerInner) as <
-  RootParamList extends {} = ReactNavigation.RootParamList,
+  RootParamList extends {} = ParamListBase,
 >(
   props: Props<RootParamList> & {
     ref?: React.Ref<NavigationContainerRef<RootParamList>>

package/src/fork/getPathFromState.ts

@@ -427,14 +427,14 @@ const createConfigItem = (
       ? joinPaths(parentPattern || '', config.path || '')
       : config.path || ''
 
-  const screens = config.screens
-    ? createNormalizedConfigs(config.screens, pattern)
+  const screens = (config as any).screens
+    ? createNormalizedConfigs((config as any).screens, pattern)
     : undefined
 
   return {
     // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc.
     pattern: pattern?.split('/').filter(Boolean).join('/'),
-    stringify: config.stringify,
+    stringify: config.stringify as StringifyConfig | undefined,
     screens,
   }
 }

package/src/fork/useLinking.native.test.tsx

@@ -66,22 +66,18 @@ async function captureIncomingAction(overrides: LinkingOverrides = {}) {
   const ref = { current: navigation }
 
   function Harness() {
-    useLinking(
-      ref as any,
-      {
-        ...linking,
-        enabled: true,
-        prefixes: ['contrast:///'],
-        getInitialURL: () => null,
-        getStateFromPath: () => linkedState,
-        subscribe: (nextListener) => {
-          listener = nextListener
-          return () => {}
-        },
-        ...overrides,
+    useLinking(ref as any, {
+      ...linking,
+      enabled: true,
+      prefixes: ['contrast:///'],
+      getInitialURL: () => null,
+      getStateFromPath: () => linkedState,
+      subscribe: (nextListener) => {
+        listener = nextListener
+        return () => {}
       },
-      () => {}
-    )
+      ...overrides,
+    })
     return null
   }
 

package/src/fork/useLinking.native.ts

@@ -23,7 +23,7 @@ type ResultState = ReturnType<typeof getStateFromPathDefault>
 
 type Options = LinkingOptions<ParamListBase>
 
-const linkingHandlers: symbol[] = []
+const linkingHandlers = new Set<symbol>()
 
 // @modified: custom getActionFromState functions have received keyless routes
 // since One added deterministic hydration keys. preserve that contract; the
@@ -80,8 +80,7 @@ export function useLinking(
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   const independent = useNavigationIndependentTree()
 
@@ -96,8 +95,8 @@ export function useLinking(
 
     // @modified - start: reduce spurious warnings on android where activity recreation
     // causes remounts, and only warn when there are truly multiple handlers
-    if (enabled !== false && linkingHandlers.length && Platform.OS !== 'android') {
-      if (linkingHandlers.length > 1) {
+    if (enabled !== false && linkingHandlers.size && Platform.OS !== 'android') {
+      if (linkingHandlers.size > 1) {
         console.error(
           [
             'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
@@ -114,15 +113,11 @@ export function useLinking(
     const handler = Symbol()
 
     if (enabled !== false) {
-      linkingHandlers.push(handler)
+      linkingHandlers.add(handler)
     }
 
     return () => {
-      const index = linkingHandlers.indexOf(handler)
-
-      if (index > -1) {
-        linkingHandlers.splice(index, 1)
-      }
+      linkingHandlers.delete(handler)
     }
   }, [enabled, independent])
 
@@ -152,7 +147,7 @@ export function useLinking(
       return undefined
     }
 
-    const path = extractPathFromURL(prefixesRef.current, url)
+    const path = extractPathFromURL((prefixesRef.current ?? []) as string[], url)
 
     return path !== undefined
       ? getStateFromPathRef.current(path, configRef.current)
@@ -168,17 +163,8 @@ export function useLinking(
       if (url != null) {
         if (typeof url !== 'string') {
           return url.then((url) => {
-            const state = getStateFromURL(url)
-
-            if (typeof url === 'string') {
-              // If the link were handled, it gets cleared in NavigationContainer
-              onUnhandledLinking(extractPathFromURL(prefixes, url))
-            }
-
-            return state
+            return getStateFromURL(url)
           })
-        } else {
-          onUnhandledLinking(extractPathFromURL(prefixes, url))
         }
       }
 
@@ -196,7 +182,7 @@ export function useLinking(
     }
 
     return thenable as PromiseLike<ResultState | undefined>
-  }, [getStateFromURL, onUnhandledLinking, prefixes])
+  }, [getStateFromURL])
 
   React.useEffect(() => {
     const listener = (url: string) => {
@@ -208,8 +194,6 @@ export function useLinking(
       const state = navigation ? getStateFromURL(url) : undefined
 
       if (navigation && state) {
-        // If the link were handled, it gets cleared in NavigationContainer
-        onUnhandledLinking(extractPathFromURL(prefixes, url))
         const rootState = navigation.getRootState()
         if (state.routes.some((r) => !rootState?.routeNames?.includes(r.name))) {
           return
@@ -219,7 +203,9 @@ export function useLinking(
         // links get the same nested param propagation as imperative navigation.
         const action =
           getActionFromStateRef.current === getActionFromStateDefault
-            ? getNavigateAction(state, rootState)
+            ? rootState
+              ? getNavigateAction(state, rootState)
+              : undefined
             : getActionFromStateRef.current(stripRouteKeys(state), configRef.current)
 
         if (action !== undefined) {
@@ -241,7 +227,7 @@ export function useLinking(
     }
 
     return subscribe(listener)
-  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe])
+  }, [enabled, getStateFromURL, ref, subscribe])
 
   return {
     getInitialState,

package/src/fork/useLinking.ts

@@ -68,7 +68,7 @@ const getPartialState = (state: any): any => {
 // routes.length but the focused route's nested navigator gained or lost
 // entries. that nested change is what determines push vs replace.
 function getFocusedRouteDepth(state: NavigationState): number {
-  const length = state.history ? state.history.length : state.routes.length
+  const length = getTotalHistoryLength(state)
   const focusedRoute = state.routes[state.index]
   const child = focusedRoute?.state as NavigationState | undefined
   if (child) {
@@ -77,6 +77,15 @@ function getFocusedRouteDepth(state: NavigationState): number {
   return length
 }
 
+const getTotalHistoryLength = (state: NavigationState): number => {
+  const activeRoutes = state.routes.slice(0, state.index + 1)
+  const baseHistoryLength = state.history ? state.history.length : activeRoutes.length
+  const routeHistoryLength = activeRoutes.reduce((acc, r) => {
+    return acc + (r.history ? r.history.length : 0)
+  }, 0)
+  return baseHistoryLength + routeHistoryLength
+}
+
 function getDynamicParamNames(routeName: string): string[] {
   return Array.from(routeName.matchAll(/\[(?:\.\.\.)?([^\]]+)\]/g), (match) => match[1])
 }
@@ -113,9 +122,8 @@ const findMatchingState = <T extends NavigationState>(
     return [undefined, undefined]
   }
 
-  // Tab and drawer will have `history` property, but stack will have history in `routes`
-  const aHistoryLength = a.history ? a.history.length : a.routes.length
-  const bHistoryLength = b.history ? b.history.length : b.routes.length
+  const aHistoryLength = getTotalHistoryLength(a)
+  const bHistoryLength = getTotalHistoryLength(b)
 
   const aRoute = a.routes[a.index]
   const bRoute = b.routes[b.index]
@@ -124,16 +132,18 @@ const findMatchingState = <T extends NavigationState>(
   const bChildState = bRoute.state as T | undefined
 
   // Stop here if this is the state object that changed:
-  // - history length is different
+  // - total history length is different (including route.history)
   // - focused routes are different
   // - one of them doesn't have child state
   // - child state keys are different
+  // - route history length is different
   if (
     aHistoryLength !== bHistoryLength ||
     aRoute.key !== bRoute.key ||
     aChildState === undefined ||
     bChildState === undefined ||
-    aChildState.key !== bChildState.key
+    aChildState.key !== bChildState.key ||
+    (aRoute.history?.length || 0) !== (bRoute.history?.length || 0)
   ) {
     return [a, b]
   }
@@ -153,7 +163,7 @@ export const series = (cb: () => Promise<void>) => {
   return callback
 }
 
-const linkingHandlers: symbol[] = []
+const linkingHandlers = new Set<symbol>()
 
 type Options = LinkingOptions<ParamListBase>
 
@@ -165,8 +175,7 @@ export function useLinking(
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   // @modified - SSR fast path: skip all client-only linking logic
   // on the server, initialState is already computed and passed as a prop
@@ -198,7 +207,7 @@ export function useLinking(
       return undefined
     }
 
-    if (enabled !== false && linkingHandlers.length) {
+    if (enabled !== false && linkingHandlers.size) {
       console.error(
         [
           'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
@@ -213,15 +222,11 @@ export function useLinking(
     const handler = Symbol()
 
     if (enabled !== false) {
-      linkingHandlers.push(handler)
+      linkingHandlers.add(handler)
     }
 
     return () => {
-      const index = linkingHandlers.indexOf(handler)
-
-      if (index > -1) {
-        linkingHandlers.splice(index, 1)
-      }
+      linkingHandlers.delete(handler)
     }
   }, [enabled, independent])
 
@@ -318,8 +323,7 @@ export function useLinking(
         value = getStateFromPathRef.current(path, configRef.current)
       }
 
-      // If the link were handled, it gets cleared in NavigationContainer
-      onUnhandledLinking(path)
+      // v8: unhandled link tracking removed
     }
 
     const thenable = {
@@ -417,8 +421,7 @@ export function useLinking(
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
       if (state) {
-        // If the link were handled, it gets cleared in NavigationContainer
-        onUnhandledLinking(path)
+        // v8: unhandled link tracking removed
         // Make sure that the routes in the state exist in the root navigator
         // Otherwise there's an error in the linking configuration
         if (validateRoutesNotExistInRootState(state)) {
@@ -472,7 +475,7 @@ export function useLinking(
         navigation.resetRoot(state)
       }
     })
-  }, [enabled, history, onUnhandledLinking, ref, validateRoutesNotExistInRootState])
+  }, [enabled, history, ref, validateRoutesNotExistInRootState])
 
   React.useEffect(() => {
     if (!enabled) {

package/src/fork/validatePathConfig.ts

@@ -23,6 +23,7 @@ export function validatePathConfig(config: unknown, root = true) {
     ...(root
       ? null
       : {
+          alias: 'array',
           exact: 'boolean',
           stringify: 'object',
           parse: 'object',
@@ -39,11 +40,17 @@ export function validatePathConfig(config: unknown, root = true) {
     Object.keys(config)
       .map((key) => {
         if (key in validation) {
-          const type = validation[key as keyof typeof validation] as string
-          const value: string = config[key]
+          const type = validation[key as keyof typeof validation]
+          const value = (config as any)[key]
 
-          if (value !== undefined && typeof value !== type) {
-            return [key, `expected '${type}', got '${typeof value}'`]
+          if (value !== undefined) {
+            if (type === 'array') {
+              if (!Array.isArray(value)) {
+                return [key, `expected 'Array', got '${typeof value}'`]
+              }
+            } else if (typeof value !== type) {
+              return [key, `expected '${type}', got '${typeof value}'`]
+            }
           }
         } else {
           return [key, 'extraneous']

package/src/getReactNavigationConfig.ts

@@ -1,6 +1,8 @@
-import { matchDynamicName } from './router/matchers'
+import { getContextKey, matchDynamicName } from './router/matchers'
 import type { RouteNode } from './router/Route'
 
+const layoutRouteNamePrefix = '__one_layout:'
+
 export type Screen =
   | string
   | {
@@ -49,6 +51,84 @@ function parseRouteSegments(segments: string): string {
   )
 }
 
+function hasDescendantWithRoute(node: RouteNode, route: string): boolean {
+  return node.children.some(
+    (child) => child.route === route || hasDescendantWithRoute(child, route)
+  )
+}
+
+export function getReactNavigationRouteName(node: RouteNode): string {
+  if (node.children.length && hasDescendantWithRoute(node, node.route)) {
+    return `${layoutRouteNamePrefix}${node.contextKey}`
+  }
+  return node.route
+}
+
+type PartialNavigationState = {
+  index?: number
+  routes: Array<{ name: string; state?: PartialNavigationState }>
+}
+
+function focusedRoute(state: PartialNavigationState) {
+  return state.routes[state.index ?? state.routes.length - 1]
+}
+
+export function resolveInitialRouteNameFromState(
+  contextKey: string,
+  state: PartialNavigationState | undefined
+): string | undefined {
+  const contextSegments = contextKey.split('/').filter(Boolean)
+  let current = state
+  let consumedSegments = 0
+
+  while (consumedSegments < contextSegments.length) {
+    if (!current?.routes.length) return undefined
+    const route = focusedRoute(current)
+    if (!route?.state) return undefined
+
+    if (route.name.startsWith(layoutRouteNamePrefix)) {
+      const routeContextSegments = getContextKey(
+        route.name.slice(layoutRouteNamePrefix.length)
+      )
+        .split('/')
+        .filter(Boolean)
+
+      if (
+        routeContextSegments.length <= consumedSegments ||
+        routeContextSegments.join('/') !==
+          contextSegments.slice(0, routeContextSegments.length).join('/')
+      ) {
+        return undefined
+      }
+      consumedSegments = routeContextSegments.length
+    } else {
+      const routeSegments = route.name.split('/').filter(Boolean)
+      if (
+        route.name !==
+        contextSegments
+          .slice(consumedSegments, consumedSegments + routeSegments.length)
+          .join('/')
+      ) {
+        return undefined
+      }
+      consumedSegments += routeSegments.length
+    }
+
+    current = route.state
+  }
+
+  return current?.routes.length ? focusedRoute(current)?.name : undefined
+}
+
+function getReactNavigationInitialRouteName(
+  nodes: RouteNode[],
+  initialRouteName: string | undefined
+): string | undefined {
+  if (!initialRouteName) return undefined
+  const initialRoute = nodes.find((node) => node.route === initialRouteName)
+  return initialRoute ? getReactNavigationRouteName(initialRoute) : initialRouteName
+}
+
 function convertRouteNodeToScreen(node: RouteNode, metaOnly: boolean): Screen {
   const path = parseRouteSegments(node.route)
 
@@ -72,7 +152,10 @@ function convertRouteNodeToScreen(node: RouteNode, metaOnly: boolean): Screen {
     // to be loaded into memory. We should move towards a system where
     // the initial route name is either loaded asynchronously in the Layout Route
     // or defined via a file system convention.
-    initialRouteName: node.initialRouteName,
+    initialRouteName: getReactNavigationInitialRouteName(
+      node.children,
+      node.initialRouteName
+    ),
   }
 
   if (!metaOnly) {
@@ -87,7 +170,13 @@ function getReactNavigationScreensConfig(
   metaOnly: boolean
 ): Record<string, Screen> {
   return Object.fromEntries(
-    nodes.map((node) => [node.route, convertRouteNodeToScreen(node, metaOnly)] as const)
+    nodes.map(
+      (node) =>
+        [
+          getReactNavigationRouteName(node),
+          convertRouteNodeToScreen(node, metaOnly),
+        ] as const
+    )
   )
 }
 
@@ -102,7 +191,10 @@ export function getReactNavigationConfig(
     return { screens: {} }
   }
   return {
-    initialRouteName: routes.initialRouteName,
+    initialRouteName: getReactNavigationInitialRouteName(
+      routes.children,
+      routes.initialRouteName
+    ),
     screens: getReactNavigationScreensConfig(routes.children, metaOnly),
   }
 }

package/src/headless/__tests__/useStack.test.tsx

@@ -2,11 +2,10 @@ import React from 'react'
 import TestRenderer, { act } from 'react-test-renderer'
 import { describe, expect, it } from 'vitest'
 
-import { appendStackToolbarConfig } from '../../layouts/stack-utils/StackToolbar.shared'
 import { StackStateProvider, useStack, type HeadlessStackDescriptors } from '../useStack'
 
 describe('StackStateProvider', () => {
-  it('hands toolbar config to headless implementations', () => {
+  it('hands screen options to headless implementations', () => {
     let options: Record<string, any> | undefined
 
     function Capture() {
@@ -21,14 +20,11 @@ describe('StackStateProvider', () => {
       index: 0,
       routeNames: ['index'],
       routes: [{ key: 'index-key', name: 'index' }],
-      preloadedRoutes: [],
+      retainedRouteKeys: [],
     }
     const descriptors: HeadlessStackDescriptors = {
       'index-key': {
-        options: appendStackToolbarConfig(
-          { title: 'Inbox' },
-          { placement: 'right', children: 'Share' }
-        ),
+        options: { title: 'Inbox', keepMounted: true },
         render: () => <div>Inbox</div>,
       },
     }
@@ -43,12 +39,7 @@ describe('StackStateProvider', () => {
 
     expect(options).toMatchObject({
       title: 'Inbox',
-      toolbar: {
-        right: {
-          placement: 'right',
-          children: 'Share',
-        },
-      },
+      keepMounted: true,
     })
   })
 })