@react-navigation/core 7.21.5 → 7.21.6

package/src/BaseNavigationContainer.tsx

@@ -12,6 +12,7 @@ import useLatestCallback from 'use-latest-callback';
 
 import { checkDuplicateRouteNames } from './checkDuplicateRouteNames';
 import { checkSerializable } from './checkSerializable';
+import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { NOT_INITIALIZED_ERROR } from './createNavigationContainerRef';
 import { DeprecatedNavigationInChildContext } from './DeprecatedNavigationInChildContext';
 import { EnsureSingleNavigator } from './EnsureSingleNavigator';
@@ -30,6 +31,7 @@ import { UnhandledActionContext } from './UnhandledActionContext';
 import { useChildListeners } from './useChildListeners';
 import { useEventEmitter } from './useEventEmitter';
 import { useKeyedChildListeners } from './useKeyedChildListeners';
+import { useLazyValue } from './useLazyValue';
 import { useNavigationIndependentTree } from './useNavigationIndependentTree';
 import { useOptionsGetters } from './useOptionsGetters';
 import { useSyncState } from './useSyncState';
@@ -108,6 +110,8 @@ export const BaseNavigationContainer = React.forwardRef(
         getPartialState(initialState == null ? undefined : initialState)
       );
 
+    const consumedParams = useLazyValue(() => new WeakMap<object, true>());
+
     const isFirstMountRef = React.useRef<boolean>(true);
 
     const navigatorKeyRef = React.useRef<string | undefined>(undefined);
@@ -458,17 +462,19 @@ export const BaseNavigationContainer = React.forwardRef(
         <NavigationContainerRefContext.Provider value={navigation}>
           <NavigationBuilderContext.Provider value={builderContext}>
             <NavigationStateContext.Provider value={context}>
-              <UnhandledActionContext.Provider
-                value={onUnhandledAction ?? defaultOnUnhandledAction}
-              >
-                <DeprecatedNavigationInChildContext.Provider
-                  value={navigationInChildEnabled}
+              <ConsumedParamsContext.Provider value={consumedParams}>
+                <UnhandledActionContext.Provider
+                  value={onUnhandledAction ?? defaultOnUnhandledAction}
                 >
-                  <EnsureSingleNavigator>
-                    <ThemeProvider value={theme}>{children}</ThemeProvider>
-                  </EnsureSingleNavigator>
-                </DeprecatedNavigationInChildContext.Provider>
-              </UnhandledActionContext.Provider>
+                  <DeprecatedNavigationInChildContext.Provider
+                    value={navigationInChildEnabled}
+                  >
+                    <EnsureSingleNavigator>
+                      <ThemeProvider value={theme}>{children}</ThemeProvider>
+                    </EnsureSingleNavigator>
+                  </DeprecatedNavigationInChildContext.Provider>
+                </UnhandledActionContext.Provider>
+              </ConsumedParamsContext.Provider>
             </NavigationStateContext.Provider>
           </NavigationBuilderContext.Provider>
         </NavigationContainerRefContext.Provider>

package/src/ConsumedParamsContext.tsx

@@ -1,10 +1,5 @@
 import * as React from 'react';
 
-type ConsumedParamsContextValue = {
-  isConsumed: (params: object) => boolean;
-  setConsumed: (params: object) => void;
-};
-
 export const ConsumedParamsContext = React.createContext<
-  ConsumedParamsContextValue | undefined
+  WeakMap<object, true> | undefined
 >(undefined);

package/src/NavigationIndependentTree.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { NavigationContext } from './NavigationContext';
+import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStateContext';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 import { NavigationRouteContext } from './NavigationProvider';
 import { IsFocusedContext } from './useIsFocused';
@@ -17,11 +18,13 @@ export function NavigationIndependentTree({
     // We need to clear any existing contexts for nested independent container to work correctly
     <NavigationRouteContext.Provider value={undefined}>
       <NavigationContext.Provider value={undefined}>
-        <IsFocusedContext.Provider value={undefined}>
-          <NavigationIndependentTreeContext.Provider value>
-            {children}
-          </NavigationIndependentTreeContext.Provider>
-        </IsFocusedContext.Provider>
+        <NavigationFocusedRouteStateContext.Provider value={undefined}>
+          <IsFocusedContext.Provider value={undefined}>
+            <NavigationIndependentTreeContext.Provider value>
+              {children}
+            </NavigationIndependentTreeContext.Provider>
+          </IsFocusedContext.Provider>
+        </NavigationFocusedRouteStateContext.Provider>
       </NavigationContext.Provider>
     </NavigationRouteContext.Provider>
   );

package/src/SceneView.tsx

@@ -6,7 +6,6 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { EnsureSingleNavigator } from './EnsureSingleNavigator';
 import { isArrayEqual } from './isArrayEqual';
 import {
@@ -114,36 +113,6 @@ export function SceneView<
   const parentFocusedRouteState = React.useContext(
     NavigationFocusedRouteStateContext
   );
-  const [consumedParams, setConsumedParams] = React.useState<WeakMap<
-    object,
-    true
-  > | null>(null);
-
-  const consumedParamsContext = React.useMemo(
-    () => ({
-      isConsumed: (params: object) => {
-        if (consumedParams) {
-          return consumedParams.has(params);
-        }
-
-        return false;
-      },
-      setConsumed: (params: object) => {
-        setConsumedParams((prev) => {
-          if (prev && prev.has(params)) {
-            return prev;
-          }
-
-          const map = new WeakMap();
-
-          map.set(params, true);
-
-          return map;
-        });
-      },
-    }),
-    [consumedParams]
-  );
 
   const focusedRouteState = React.useMemo(() => {
     const state: FocusedRouteState = {
@@ -212,25 +181,23 @@ export function SceneView<
     : screen.component;
 
   return (
-    <ConsumedParamsContext.Provider value={consumedParamsContext}>
-      <NavigationStateContext.Provider value={context}>
-        <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
-          <EnsureSingleNavigator>
-            <StaticContainer
-              name={screen.name}
-              render={ScreenComponent || screen.children}
-              navigation={navigation}
-              route={route}
-            >
-              {ScreenComponent !== undefined ? (
-                <ScreenComponent navigation={navigation} route={route} />
-              ) : screen.children !== undefined ? (
-                screen.children({ navigation, route })
-              ) : null}
-            </StaticContainer>
-          </EnsureSingleNavigator>
-        </NavigationFocusedRouteStateContext.Provider>
-      </NavigationStateContext.Provider>
-    </ConsumedParamsContext.Provider>
+    <NavigationStateContext.Provider value={context}>
+      <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
+        <EnsureSingleNavigator>
+          <StaticContainer
+            name={screen.name}
+            render={ScreenComponent || screen.children}
+            navigation={navigation}
+            route={route}
+          >
+            {ScreenComponent !== undefined ? (
+              <ScreenComponent navigation={navigation} route={route} />
+            ) : screen.children !== undefined ? (
+              screen.children({ navigation, route })
+            ) : null}
+          </StaticContainer>
+        </EnsureSingleNavigator>
+      </NavigationFocusedRouteStateContext.Provider>
+    </NavigationStateContext.Provider>
   );
 }

package/src/StaticNavigation.tsx

@@ -787,8 +787,8 @@ export function createPathConfigForStaticNavigation(
 
                 screenConfig.path = normalizePath(
                   key
-                    .replace(/([A-Z]+)/g, '-$1')
-                    .replace(/^-/, '')
+                    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+                    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
                     .toLowerCase()
                 );
               }

package/src/findFocusedRoute.tsx

@@ -12,11 +12,13 @@ type Result =
 export function findFocusedRoute(state: InitialState): Result {
   let current: InitialState | undefined = state;
 
-  while (current?.routes[current.index ?? 0].state != null) {
-    current = current.routes[current.index ?? 0].state;
+  while (
+    current?.routes[current.index ?? current.routes.length - 1]?.state != null
+  ) {
+    current = current.routes[current.index ?? current.routes.length - 1]?.state;
   }
 
-  const route = current?.routes[current?.index ?? 0];
+  const route = current?.routes[current?.index ?? current.routes.length - 1];
 
   return route;
 }

package/src/getActionFromState.tsx

@@ -180,7 +180,9 @@ export function getActionFromState(
   };
 }
 
-const createNormalizedConfigItem = (config: PathConfig<object> | string) =>
+const createNormalizedConfigItem = (
+  config: PathConfig<object> | string
+): ConfigItem =>
   typeof config === 'object' && config != null
     ? {
         initialRouteName: config.initialRouteName,

package/src/getPathFromState.tsx

@@ -1,11 +1,8 @@
-import type {
-  NavigationState,
-  PartialState,
-  Route,
-} from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as queryString from 'query-string';
 
 import { getPatternParts, type PatternPart } from './getPatternParts';
+import { getStateFromRouteParams } from './getStateFromRouteParams';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
@@ -19,20 +16,40 @@ type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
 type StringifyConfig = Record<string, (value: unknown) => string>;
 
+type SerializedParamValue = string | string[] | null;
+
 type ConfigItem = {
   parts?: PatternPart[];
+  ownParts: PatternPart[];
   stringify?: StringifyConfig;
   screens?: Record<string, ConfigItem>;
 };
 
-const getActiveRoute = (state: State): { name: string; params?: object } => {
+const serializeParamValue = (value: unknown): SerializedParamValue =>
+  value === null
+    ? null
+    : Array.isArray(value)
+      ? value.map(String)
+      : String(value);
+
+const getActiveRoute = (
+  state: State,
+  configs: Record<string, ConfigItem> | undefined,
+  getRouteState: (
+    route: State['routes'][number],
+    config: ConfigItem | undefined
+  ) => State | undefined
+): { name: string; params?: object } => {
   const route =
     typeof state.index === 'number'
       ? state.routes[state.index]
       : state.routes[state.routes.length - 1];
 
-  if (route.state) {
-    return getActiveRoute(route.state);
+  const config = configs?.[route.name];
+  const routeState = getRouteState(route, config);
+
+  if (routeState) {
+    return getActiveRoute(routeState, config?.screens, getRouteState);
   }
 
   return route;
@@ -101,24 +118,55 @@ export function getPathFromState<ParamList extends {}>(
   }
 
   const configs = getNormalizedConfigs(options);
+  const cachedRouteStates = new Map<object, State | undefined>();
+
+  const getRouteState = (
+    route: State['routes'][number],
+    config: ConfigItem | undefined
+  ) => {
+    if (route.state) {
+      return route.state;
+    }
+
+    const hasScreenParams =
+      route.params &&
+      'screen' in route.params &&
+      typeof route.params.screen === 'string' &&
+      config?.screens?.[route.params.screen];
+
+    const hasStateParams =
+      route.params && 'state' in route.params && config?.screens;
+
+    if (
+      !route.params ||
+      !config?.screens ||
+      (!hasScreenParams && !hasStateParams)
+    ) {
+      return undefined;
+    }
+
+    if (!cachedRouteStates.has(route)) {
+      cachedRouteStates.set(route, getStateFromRouteParams(route.params));
+    }
+
+    return cachedRouteStates.get(route);
+  };
+
+  const focusedRoute = getActiveRoute(state, configs, getRouteState);
 
   let path = '/';
   let current: State | undefined = state;
 
-  const allParams: Record<string, string> = {};
-
   while (current) {
     let index = typeof current.index === 'number' ? current.index : 0;
-    let route = current.routes[index] as Route<string> & {
-      state?: State;
-    };
+    let route = current.routes[index];
 
     let parts: PatternPart[] | undefined;
 
-    let focusedParams: Record<string, string> | undefined;
-    let currentOptions = configs;
+    const partValues = new Map<PatternPart, SerializedParamValue | undefined>();
 
-    const focusedRoute = getActiveRoute(state);
+    let focusedParams: Record<string, SerializedParamValue> | undefined;
+    let currentOptions = configs;
 
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
     const nestedRouteNames = [];
@@ -126,19 +174,21 @@ export function getPathFromState<ParamList extends {}>(
     let hasNext = true;
 
     while (route.name in currentOptions && hasNext) {
-      parts = currentOptions[route.name].parts;
+      const config = currentOptions[route.name];
+      parts = config.parts;
+      const ownParts = config.ownParts;
 
       nestedRouteNames.push(route.name);
 
       if (route.params) {
-        const options = currentOptions[route.name];
+        const options = config;
 
         const currentParams = Object.fromEntries(
           Object.entries(route.params)
-            .map(([key, value]): [string, string] | null => {
+            .map(([key, value]): [string, SerializedParamValue] | null => {
               if (value === undefined) {
                 if (options) {
-                  const optional = options.parts?.find(
+                  const optional = ownParts.find(
                     (part) => part.param === key
                   )?.optional;
 
@@ -150,51 +200,71 @@ export function getPathFromState<ParamList extends {}>(
                 }
               }
 
-              const stringify = options?.stringify?.[key] ?? String;
+              const stringify = options?.stringify?.[key];
 
-              return [key, stringify(value)];
+              return [
+                key,
+                stringify ? stringify(value) : serializeParamValue(value),
+              ];
             })
             .filter((entry) => entry != null)
         );
 
-        if (parts?.length) {
-          Object.assign(allParams, currentParams);
+        const claimedParams = new Set<string>();
+
+        for (const part of ownParts) {
+          if (part.param && part.param in currentParams) {
+            const value = currentParams[part.param];
+
+            if (value !== undefined) {
+              partValues.set(part, value);
+              claimedParams.add(part.param);
+            }
+          }
         }
 
         if (focusedRoute === route) {
           // If this is the focused route, keep the params for later use
           // We save it here since it's been stringified already
-          focusedParams = { ...currentParams };
-
-          parts
-            // eslint-disable-next-line no-loop-func
-            ?.forEach(({ param }) => {
-              if (param) {
-                // Remove the params present in the pattern since we'll only use the rest for query string
-                if (focusedParams) {
-                  // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-                  delete focusedParams[param];
-                }
-              }
-            });
+          focusedParams = {};
+
+          for (const key in currentParams) {
+            const value = currentParams[key];
+
+            if (
+              !claimedParams.has(key) &&
+              value !== undefined &&
+              value !== 'undefined'
+            ) {
+              focusedParams[key] = value;
+            }
+          }
+        }
+      }
+
+      for (const part of ownParts) {
+        if (part.param && !partValues.has(part)) {
+          partValues.set(part, undefined);
         }
       }
 
+      const routeState = getRouteState(route, config);
+
       // If there is no `screens` property or no nested state, we return pattern
-      if (!currentOptions[route.name].screens || route.state === undefined) {
+      if (!config.screens || routeState === undefined) {
         hasNext = false;
       } else {
         index =
-          typeof route.state.index === 'number'
-            ? route.state.index
-            : route.state.routes.length - 1;
+          typeof routeState.index === 'number'
+            ? routeState.index
+            : routeState.routes.length - 1;
 
-        const nextRoute = route.state.routes[index];
-        const nestedConfig = currentOptions[route.name].screens;
+        const nextRoute = routeState.routes[index];
+        const nestedConfig = config.screens;
 
         // if there is config for next route name, we go deeper
         if (nestedConfig && nextRoute.name in nestedConfig) {
-          route = nextRoute as Route<string> & { state?: State };
+          route = nextRoute;
           currentOptions = nestedConfig;
         } else {
           // If not, there is no sense in going deeper in config
@@ -203,9 +273,12 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
+    const routeState = getRouteState(route, currentOptions[route.name]);
+
     if (currentOptions[route.name] !== undefined) {
       path += parts
-        ?.map(({ segment, param, optional }) => {
+        ?.map((part) => {
+          const { segment, param, optional } = part;
           // We don't know what to show for wildcard patterns
           // Showing the route name seems ok, though whatever we show here will be incorrect
           // Since the page doesn't actually exist
@@ -215,7 +288,7 @@ export function getPathFromState<ParamList extends {}>(
 
           // If the path has a pattern for a param, put the param in the path
           if (param) {
-            const value = allParams[param];
+            const value = partValues.get(part);
 
             if (value === undefined && optional) {
               // Optional params without value assigned in route.params should be ignored
@@ -244,12 +317,12 @@ export function getPathFromState<ParamList extends {}>(
       focusedParams = Object.fromEntries(
         Object.entries(focusedRoute.params).map(([key, value]) => [
           key,
-          String(value),
+          serializeParamValue(value),
         ])
       );
     }
 
-    if (route.state) {
+    if (routeState) {
       path += '/';
     } else if (focusedParams) {
       for (const param in focusedParams) {
@@ -266,7 +339,7 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
-    current = route.state;
+    current = routeState;
   }
 
   // Include the root path if specified
@@ -292,14 +365,13 @@ const createConfigItem = (
   parentParts?: PatternPart[]
 ): ConfigItem => {
   if (typeof config === 'string') {
-    // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
-    const parts = getPatternParts(config);
+    const ownParts = getPatternParts(config);
 
     if (parentParts) {
-      return { parts: [...parentParts, ...parts] };
+      return { parts: [...parentParts, ...ownParts], ownParts };
     }
 
-    return { parts };
+    return { parts: ownParts, ownParts };
   }
 
   if (config.exact && config.path === undefined) {
@@ -310,14 +382,12 @@ const createConfigItem = (
 
   // If an object is specified as the value (e.g. Foo: { ... }),
   // It can have `path` property and `screens` prop which has nested configs
+  const ownParts = config.path ? getPatternParts(config.path) : [];
   const parts =
     config.exact !== true
-      ? [
-          ...(parentParts || []),
-          ...(config.path ? getPatternParts(config.path) : []),
-        ]
-      : config.path
-        ? getPatternParts(config.path)
+      ? [...(parentParts || []), ...ownParts]
+      : ownParts.length
+        ? ownParts
         : undefined;
 
   const screens = config.screens
@@ -326,6 +396,7 @@ const createConfigItem = (
 
   return {
     parts,
+    ownParts,
     stringify: config.stringify,
     screens,
   };

package/src/getPatternParts.tsx

@@ -15,6 +15,8 @@ export function getPatternParts(path: string): PatternPart[] {
 
   let isRegex = false;
   let isParam = false;
+  let isEscaped = false;
+  let isInCharClass = false;
   let regexInnerParens = 0;
 
   // One extra iteration to add the last character
@@ -34,7 +36,7 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered ':' in the middle of a segment in path: ${path}`
         );
       }
-    } else if (char === '(') {
+    } else if (char === '(' && !isEscaped && !isInCharClass) {
       if (isParam) {
         if (isRegex) {
           // The '(' is part of the regex if we're already inside one
@@ -47,7 +49,7 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered '(' without preceding ':' in path: ${path}`
         );
       }
-    } else if (char === ')') {
+    } else if (char === ')' && !isEscaped && !isInCharClass) {
       if (isParam && isRegex) {
         if (regexInnerParens) {
           // The ')' is part of the regex if we're already inside one
@@ -102,6 +104,17 @@ export function getPatternParts(path: string): PatternPart[] {
     if (isRegex) {
       current.regex = current.regex || '';
       current.regex += char;
+
+      // Track escapes and character classes so parens inside them are not special
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (char === '\\') {
+        isEscaped = true;
+      } else if (char === '[') {
+        isInCharClass = true;
+      } else if (char === ']') {
+        isInCharClass = false;
+      }
     }
 
     if (isParam && !isRegex) {