@react-navigation/core 7.21.5 → 7.21.6

package/src/getStateFromPath.tsx

@@ -26,7 +26,12 @@ type RouteConfig = {
   screen: string;
   regex?: RegExp;
   segments: string[];
-  params: { screen: string; name: string; index: number }[];
+  params: {
+    screen: string;
+    name: string;
+    index: number;
+    regex?: RegExp;
+  }[];
   routeNames: string[];
   parse?: ParseConfig;
   explicitParamNames?: Set<string>;
@@ -53,6 +58,7 @@ type ConfigResources = {
   initialRoutes: InitialRouteConfig[];
   configs: RouteConfig[];
   configsByScreen: Record<string, RouteConfig[]>;
+  prefixRegex?: RegExp;
 };
 
 const NESTED_SCREEN_PARAM_NAMES = [
@@ -64,6 +70,17 @@ const NESTED_SCREEN_PARAM_NAMES = [
   'pop',
 ];
 
+const getStaticSegmentPattern = (segment: string) =>
+  Array.from(segment, (char) => {
+    const encoded = encodeURIComponent(char);
+    const percentEncoded =
+      encoded === char
+        ? `%${char.charCodeAt(0).toString(16).padStart(2, '0').toUpperCase()}`
+        : encoded;
+
+    return `(?:${escape(char)}|${escape(percentEncoded)})`;
+  }).join('');
+
 const getExplicitParamNames = (parse?: ParseConfig) => {
   const names = Object.entries(parse ?? {}).map(([name]) => name);
 
@@ -95,7 +112,7 @@ export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
-  const { initialRoutes, configs, configsByScreen } =
+  const { initialRoutes, configs, configsByScreen, prefixRegex } =
     getConfigResources(options);
 
   const screens = options?.screens;
@@ -103,24 +120,20 @@ export function getStateFromPath<ParamList extends {}>(
   let remaining = path
     .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
     .replace(/^\//, '') // Remove extra leading slash
-    .replace(/\?.*$/, ''); // Remove query params which we will handle later
+    .replace(/\?.*$/, '') // Remove query params which we will handle later
+    .replace(/%[0-9a-f]{2}/gi, (match) => match.toUpperCase());
 
   // Make sure there is a trailing slash
   remaining = remaining.endsWith('/') ? remaining : `${remaining}/`;
 
-  const prefix = options?.path?.replace(/^\//, ''); // Remove extra leading slash
-
-  if (prefix) {
-    // Make sure there is a trailing slash
-    const normalizedPrefix = prefix.endsWith('/') ? prefix : `${prefix}/`;
+  if (prefixRegex) {
+    const prefixMatch = remaining.match(prefixRegex);
 
-    // If the path doesn't start with the prefix, it's not a match
-    if (!remaining.startsWith(normalizedPrefix)) {
+    if (prefixMatch == null) {
       return undefined;
     }
 
-    // Remove the prefix from the path
-    remaining = remaining.replace(normalizedPrefix, '');
+    remaining = remaining.slice(prefixMatch[0].length);
   }
 
   if (screens === undefined) {
@@ -219,6 +232,19 @@ function prepareConfigResources(options?: Options<{}>) {
 
   const initialRoutes = getInitialRoutes(options);
   const configs = getSortedNormalizedConfigs(initialRoutes, options?.screens);
+  const prefix = options?.path?.replace(/^\//, '');
+
+  let prefixRegex: RegExp | undefined;
+
+  if (prefix) {
+    const normalizedPrefix = prefix.endsWith('/') ? prefix : `${prefix}/`;
+    const prefixPattern = normalizedPrefix
+      .split('/')
+      .map(getStaticSegmentPattern)
+      .join('/');
+
+    prefixRegex = new RegExp(`^${prefixPattern}`);
+  }
 
   const configsByScreen: Record<string, RouteConfig[]> = {};
   const configsByPattern = new Map<string, RouteConfig>();
@@ -237,6 +263,7 @@ function prepareConfigResources(options?: Options<{}>) {
     initialRoutes,
     configs,
     configsByScreen,
+    prefixRegex,
   };
 }
 
@@ -264,6 +291,7 @@ function getSortedNormalizedConfigs(
         createNormalizedConfigs(key, screens, initialRoutes, [], [], [])
       )
     )
+    .map((config, order) => ({ ...config, order }))
     .sort((a, b) => {
       // Sort config from most specific to least specific:
       // - more segments
@@ -275,7 +303,21 @@ function getSortedNormalizedConfigs(
       // If 2 patterns are same, move the one with less route names up
       // This is an error state, so it's only useful for consistent error messages
       if (isArrayEqual(a.segments, b.segments)) {
-        return b.routeNames.join('>').localeCompare(a.routeNames.join('>'));
+        if (
+          a.routeNames.length > b.routeNames.length &&
+          arrayStartsWith(a.routeNames, b.routeNames)
+        ) {
+          return -1;
+        }
+
+        if (
+          b.routeNames.length > a.routeNames.length &&
+          arrayStartsWith(b.routeNames, a.routeNames)
+        ) {
+          return 1;
+        }
+
+        return a.routeNames.length - b.routeNames.length || a.order - b.order;
       }
 
       // If one of the patterns starts with the other, it's more exhaustive
@@ -441,6 +483,15 @@ const matchAgainstConfigs = (
               break;
             }
 
+            if (
+              param.regex &&
+              value !== decoded &&
+              !param.regex.test(decoded)
+            ) {
+              hasInvalidParam = true;
+              break;
+            }
+
             const parser = routeConfig.parse?.[param.name];
 
             paramEntries.push([param.name, parser ? parser(decoded) : decoded]);
@@ -642,12 +693,18 @@ const createConfigItem = (
         `^(${parts
           .map((it, i) => {
             if (it.param) {
-              const reg = it.regex || '[^/]+';
+              const reg = it.regex
+                ? `(?:${it.regex})|(?=[^/]*%[0-9A-F]{2})[^/]+`
+                : '[^/]+';
 
               return `(((?<param_${i}>${reg})\\/)${it.optional ? '?' : ''})`;
             }
 
-            return `${it.segment === '*' ? '.*' : escape(it.segment)}\\/`;
+            if (it.segment === '*') {
+              return `.*\\/`;
+            }
+
+            return `${getStaticSegmentPattern(it.segment)}\\/`;
           })
           .join('')})$`
       )
@@ -666,6 +723,7 @@ const createConfigItem = (
       index,
       screen: part.screen,
       name: part.param,
+      regex: part.regex ? new RegExp(`^(?:${part.regex})$`) : undefined,
     });
 
     if (part.screen === screen) {
@@ -813,8 +871,9 @@ const parseQueryParams = (
   hasNestedScreens = false,
   routeParams?: Record<string, unknown>
 ) => {
-  const query = path.split('?')[1];
-  const params: Record<string, unknown> = queryString.parse(query);
+  const queryIndex = path.indexOf('?');
+  const query = queryIndex === -1 ? undefined : path.slice(queryIndex + 1);
+  const params: Record<string, unknown> = query ? queryString.parse(query) : {};
 
   for (const name of pathParamNames) {
     // eslint-disable-next-line @typescript-eslint/no-dynamic-delete

package/src/getStateFromRouteParams.tsx

@@ -0,0 +1,60 @@
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+
+export function getStateFromRouteParams(
+  params: object | undefined
+): PartialState<NavigationState> | NavigationState | undefined {
+  if (params == null || typeof params !== 'object') {
+    return undefined;
+  }
+
+  if (
+    'state' in params &&
+    params.state &&
+    typeof params.state === 'object' &&
+    'routes' in params.state &&
+    Array.isArray(params.state.routes) &&
+    params.state.routes.every(
+      (route) =>
+        typeof route === 'object' &&
+        route != null &&
+        'name' in route &&
+        typeof route.name === 'string'
+    )
+  ) {
+    // @ts-expect-error this is fine 🔥
+    return params.state;
+  }
+
+  if (
+    'screen' in params &&
+    params.screen &&
+    typeof params.screen === 'string'
+  ) {
+    return {
+      routes: [
+        {
+          name: params.screen,
+          params:
+            'params' in params &&
+            typeof params.params === 'object' &&
+            params.params != null
+              ? params.params
+              : undefined,
+          path:
+            'path' in params && typeof params.path === 'string'
+              ? params.path
+              : undefined,
+          // @ts-expect-error this is fine 🔥
+          state:
+            'params' in params &&
+            typeof params.params === 'object' &&
+            params.params != null
+              ? getStateFromRouteParams(params.params)
+              : undefined,
+        },
+      ],
+    };
+  }
+
+  return undefined;
+}

package/src/types.tsx

@@ -190,7 +190,7 @@ export type DefaultNavigatorOptions<
           ScreenOptions,
           EventMap
         >,
-        RouteProp<ParamList>
+        ScreenRouteProp<ParamList>
       >
     >;
     children: React.ReactNode;
@@ -202,7 +202,7 @@ export type DefaultNavigatorOptions<
   screenListeners?:
     | ScreenListeners<State, EventMap>
     | ((props: {
-        route: RouteProp<ParamList>;
+        route: ScreenRouteProp<ParamList>;
         navigation: Navigation;
       }) => ScreenListeners<State, EventMap>);
 
@@ -212,7 +212,7 @@ export type DefaultNavigatorOptions<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList>;
+        route: ScreenRouteProp<ParamList>;
         navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
@@ -647,6 +647,13 @@ export type RouteProp<
   RouteName extends keyof ParamList = Keyof<ParamList>,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]>;
 
+type ScreenRouteProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = Keyof<ParamList>,
+> = {
+  [Name in Extract<RouteName, string>]: RouteProp<ParamList, Name>;
+}[Extract<RouteName, string>];
+
 export type CompositeNavigationProp<
   A extends NavigationProp<ParamListBase, string, any, any, any>,
   B extends NavigationHelpersCommon<ParamListBase, any>,
@@ -709,7 +716,7 @@ export type ScreenLayoutArgs<
   ScreenOptions extends {},
   Navigation,
 > = {
-  route: RouteProp<ParamList, RouteName>;
+  route: ScreenRouteProp<ParamList, RouteName>;
   options: ScreenOptions;
   navigation: Navigation;
   theme: ReactNavigation.Theme;
@@ -896,7 +903,7 @@ export type RouteGroupConfig<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList, keyof ParamList>;
+        route: ScreenRouteProp<ParamList>;
         navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
@@ -1103,25 +1110,36 @@ export type NavigatorTypeBag<
   Navigator: Navigator;
 };
 
-type TypedNavigatorStaticComponent<Bag extends NavigatorTypeBagBase> =
-  React.ComponentType<
-    Partial<
+type StaticParamListForConfig<Config> =
+  Config extends StaticNavigationConfig['config']
+    ? StaticParamList<{ config: Config }> extends infer ParamList extends
+        ParamListBase
+      ? ParamList
+      : ParamListBase
+    : ParamListBase;
+
+type TypedNavigatorStaticComponent<
+  Bag extends NavigatorTypeBagBase,
+  Config,
+> = React.ComponentType<
+  Partial<
+    Omit<
       Omit<
-        React.ComponentProps<
-          TypedNavigatorInternal<
-            Bag['ParamList'],
-            Bag['NavigatorID'],
-            Bag['State'],
-            Bag['ScreenOptions'],
-            Bag['EventMap'],
-            Bag['NavigationList'],
-            Bag['Navigator']
-          >['Navigator']
+        React.ComponentProps<Bag['Navigator']>,
+        keyof DefaultNavigatorOptions<any, any, any, any, any, any>
+      > &
+        DefaultNavigatorOptions<
+          StaticParamListForConfig<Config>,
+          Bag['NavigatorID'],
+          Bag['State'],
+          Bag['ScreenOptions'],
+          Bag['EventMap'],
+          Bag['NavigationList'][keyof Bag['ParamList']]
         >,
-        'children'
-      >
+      'children'
     >
-  >;
+  >
+>;
 
 type TypedNavigatorStaticDecorated<
   Bag extends NavigatorTypeBagBase,
@@ -1154,10 +1172,10 @@ type TypedNavigatorStatic<
   config: Config;
   with: (
     Component: React.ComponentType<{
-      Navigator: TypedNavigatorStaticComponent<Bag>;
+      Navigator: TypedNavigatorStaticComponent<Bag, Config>;
     }>
   ) => TypedNavigatorStaticDecorated<Bag, Config>;
-  getComponent: () => TypedNavigatorStaticComponent<Bag>;
+  getComponent: () => TypedNavigatorStaticComponent<Bag, Config>;
 } & PrivateValueStore<[Bag['ParamList'], Bag['NavigationList'], unknown]>;
 
 export type TypedNavigator<
@@ -1284,7 +1302,7 @@ type PathConfigAlias = {
 export type PathConfig<ParamList extends {}> = Partial<PathConfigAlias> & {
   /**
    * An object mapping the param name to a function which converts the param value to a string.
-   * By default, all params are converted to strings using `String(value)`.
+   * By default, arrays and null are preserved for query params, and other values are converted using `String(value)`.
    *
    * @example
    * ```js

package/src/useDescriptors.tsx

@@ -311,7 +311,7 @@ export function useDescriptors<
       render() {
         return element;
       },
-      options: customOptions as ScreenOptions,
+      options: customOptions,
     };
 
     return acc;

package/src/useFocusEvents.tsx

@@ -45,7 +45,12 @@ export function useFocusEvents<State extends NavigationState>({
   React.useEffect(() => {
     const lastFocusedKey = lastFocusedKeyRef.current;
 
-    lastFocusedKeyRef.current = currentFocusedKey;
+    const isFocused = navigation ? navigation.isFocused() : true;
+
+    if (isFocused) {
+      // Remember the current route as focused if the navigator is focused
+      lastFocusedKeyRef.current = currentFocusedKey;
+    }
 
     // We wouldn't have `lastFocusedKey` on initial mount
     // Fire focus event for the current route on mount if there's no parent navigator
@@ -55,10 +60,7 @@ export function useFocusEvents<State extends NavigationState>({
 
     // We should only emit events when the focused key changed and navigator is focused
     // When navigator is not focused, screens inside shouldn't receive focused status either
-    if (
-      lastFocusedKey === currentFocusedKey ||
-      !(navigation ? navigation.isFocused() : true)
-    ) {
+    if (lastFocusedKey === currentFocusedKey || !isFocused) {
       return;
     }
 

package/src/useLazyValue.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-export function useLazyValue<T>(create: () => T) {
+export function useLazyValue<T>(create: () => T): T {
   const lazyRef = React.useRef<T>(undefined);
 
   if (lazyRef.current === undefined) {
     lazyRef.current = create();
   }
 
-  return lazyRef.current as T;
+  return lazyRef.current;
 }

package/src/useNavigationBuilder.tsx

@@ -341,7 +341,7 @@ export function useNavigationBuilder<
 
   const isNestedParamsConsumed =
     typeof route?.params === 'object' && route.params != null
-      ? consumedParams?.isConsumed(route.params)
+      ? consumedParams?.has(route.params)
       : false;
 
   const {
@@ -575,7 +575,14 @@ export function useNavigationBuilder<
         return [stateBeforeInitialization, hydratedState, true, paramsForState];
       }
 
-      return [undefined, hydratedState, false, paramsForState];
+      return [
+        undefined,
+        hydratedState,
+        false,
+        // Current state is already initialized
+        // So params weren't used, and need to be handled later
+        isStateInitialized(currentState) ? undefined : paramsForState,
+      ];
     }
     // We explicitly don't include routeNames, route.params etc. in the dep list
     // below. We want to avoid forcing a new state to be calculated in those cases
@@ -723,18 +730,16 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  const setConsumedParams = consumedParams?.setConsumed;
-
   React.useEffect(() => {
     if (
-      setConsumedParams &&
+      consumedParams &&
       didConsumeNestedParams &&
       typeof route?.params === 'object' &&
       route.params != null
     ) {
-      setConsumedParams(route.params);
+      consumedParams.set(route.params, true);
     }
-  }, [didConsumeNestedParams, route?.params, setConsumedParams]);
+  }, [consumedParams, didConsumeNestedParams, route?.params]);
 
   const shouldUpdate = state !== nextState;
 

package/src/useOnPreventRemove.tsx

@@ -34,9 +34,10 @@ export const shouldPreventRemove = (
     .filter((route) => !nextRouteKeys.includes(route.key))
     .reverse();
 
-  const visitedRouteKeys: Set<string> =
-    // @ts-expect-error: add this property to mark that we've already emitted this action
-    action[VISITED_ROUTE_KEYS] ?? new Set<string>();
+  const visitedRouteKeys =
+    VISITED_ROUTE_KEYS in action && action[VISITED_ROUTE_KEYS] instanceof Set
+      ? action[VISITED_ROUTE_KEYS]
+      : new Set<string>();
 
   const beforeRemoveAction = {
     ...action,

package/src/useRouteCache.tsx

@@ -41,10 +41,7 @@ export function useRouteCache<State extends NavigationState>(
       // FIXME: since the state is updated with mutation, the route object cannot be frozen
       // As a workaround, loop through the object and make the properties readonly
       // Only needed once per proxy - skip if we're reusing a previously-frozen one
-      for (const key in proxy) {
-        // @ts-expect-error: this is fine since we are looping through the object
-        const value = proxy[key];
-
+      for (const [key, value] of Object.entries(proxy)) {
         Object.defineProperty(proxy, key, {
           enumerable: true,
           configurable: true,

package/src/useSyncState.tsx

@@ -25,9 +25,10 @@ const createStore = <T,>(getInitialState: () => T) => {
 
   const setState = (newState: T) => {
     state = deepFreeze(newState);
-    didUpdate = true;
 
-    if (!isBatching) {
+    if (isBatching) {
+      didUpdate = true;
+    } else {
       listeners.forEach((listener) => listener());
     }
   };