@react-navigation/core 7.2.2 → 7.3.1

package/src/getStateFromPath.tsx

@@ -1,6 +1,7 @@
 import type {
   InitialState,
   NavigationState,
+  ParamListBase,
   PartialState,
 } from '@react-navigation/routers';
 import escape from 'escape-string-regexp';
@@ -10,7 +11,7 @@ import { arrayStartsWith } from './arrayStartsWith';
 import { findFocusedRoute } from './findFocusedRoute';
 import { getPatternParts, type PatternPart } from './getPatternParts';
 import { isArrayEqual } from './isArrayEqual';
-import type { PathConfigMap } from './types';
+import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
@@ -48,7 +49,6 @@ type ParsedRoute = {
 type ConfigResources = {
   initialRoutes: InitialRouteConfig[];
   configs: RouteConfig[];
-  configWithRegexes: RouteConfig[];
 };
 
 /**
@@ -76,8 +76,7 @@ export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
-  const { initialRoutes, configs, configWithRegexes } =
-    getConfigResources(options);
+  const { initialRoutes, configs } = getConfigResources(options);
 
   const screens = options?.screens;
 
@@ -143,10 +142,7 @@ export function getStateFromPath<ParamList extends {}>(
 
   // We match the whole path against the regex instead of segments
   // This makes sure matches such as wildcard will catch any unmatched routes, even if nested
-  const { routes, remainingPath } = matchAgainstConfigs(
-    remaining,
-    configWithRegexes
-  );
+  const { routes, remainingPath } = matchAgainstConfigs(remaining, configs);
 
   if (routes !== undefined) {
     // This will always be empty if full path matched
@@ -189,8 +185,7 @@ function prepareConfigResources(options?: Options<{}>) {
   }
 
   const initialRoutes = getInitialRoutes(options);
-
-  const configs = getNormalizedConfigs(initialRoutes, options?.screens);
+  const configs = getSortedNormalizedConfigs(initialRoutes, options?.screens);
 
   checkForDuplicatedConfigs(configs);
 
@@ -216,22 +211,15 @@ function getInitialRoutes(options?: Options<{}>) {
   return initialRoutes;
 }
 
-function getNormalizedConfigs(
+function getSortedNormalizedConfigs(
   initialRoutes: InitialRouteConfig[],
-  screens: PathConfigMap<object> = {}
+  screens: Record<string, string | PathConfig<ParamListBase>> = {}
 ) {
   // Create a normalized configs array which will be easier to use
   return ([] as RouteConfig[])
     .concat(
       ...Object.keys(screens).map((key) =>
-        createNormalizedConfigs(
-          key,
-          screens as PathConfigMap<object>,
-          initialRoutes,
-          [],
-          [],
-          []
-        )
+        createNormalizedConfigs(key, screens, initialRoutes, [], [], [])
       )
     )
     .sort((a, b) => {
@@ -430,7 +418,7 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 
 const createNormalizedConfigs = (
   screen: string,
-  routeConfig: PathConfigMap<object>,
+  routeConfig: Record<string, string | PathConfig<ParamListBase>>,
   initials: InitialRouteConfig[],
   paths: { screen: string; path: string }[],
   parentScreens: string[],
@@ -442,7 +430,6 @@ const createNormalizedConfigs = (
 
   parentScreens.push(screen);
 
-  // @ts-expect-error: we can't strongly typecheck this for now
   const config = routeConfig[screen];
 
   if (typeof config === 'string') {
@@ -453,12 +440,42 @@ const createNormalizedConfigs = (
     // it can have `path` property and
     // it could have `screens` prop which has nested configs
     if (typeof config.path === 'string') {
-      if (config.exact && config.path === undefined) {
+      if (config.exact && config.path == null) {
         throw new Error(
-          "A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. `path: ''`."
+          `Screen '${screen}' doesn't specify a 'path'. A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. \`path: ''\`.`
         );
       }
 
+      // We should add alias configs after the main config
+      // So unless they are more specific, main config will be matched first
+      const aliasConfigs = [];
+
+      if (config.alias) {
+        for (const alias of config.alias) {
+          if (typeof alias === 'string') {
+            aliasConfigs.push(
+              createConfigItem(
+                screen,
+                [...routeNames],
+                [...paths, { screen, path: alias }],
+                config.parse
+              )
+            );
+          } else if (typeof alias === 'object') {
+            aliasConfigs.push(
+              createConfigItem(
+                screen,
+                [...routeNames],
+                alias.exact
+                  ? [{ screen, path: alias.path }]
+                  : [...paths, { screen, path: alias.path }],
+                alias.parse
+              )
+            );
+          }
+        }
+      }
+
       if (config.exact) {
         // If it's an exact path, we don't need to keep track of the parent screens
         // So we can clear it
@@ -469,6 +486,18 @@ const createNormalizedConfigs = (
       configs.push(
         createConfigItem(screen, [...routeNames], [...paths], config.parse)
       );
+
+      configs.push(...aliasConfigs);
+    }
+
+    if (
+      typeof config !== 'string' &&
+      typeof config.path !== 'string' &&
+      config.alias?.length
+    ) {
+      throw new Error(
+        `Screen '${screen}' doesn't specify a 'path'. A 'path' needs to be specified in order to use 'alias'.`
+      );
     }
 
     if (config.screens) {
@@ -483,7 +512,7 @@ const createNormalizedConfigs = (
       Object.keys(config.screens).forEach((nestedConfig) => {
         const result = createNormalizedConfigs(
           nestedConfig,
-          config.screens as PathConfigMap<object>,
+          config.screens as Record<string, string | PathConfig<ParamListBase>>,
           initials,
           [...paths],
           [...parentScreens],
@@ -525,7 +554,7 @@ const createConfigItem = (
 
             return `${it.segment === '*' ? '.*' : escape(it.segment)}\\/`;
           })
-          .join('')})`
+          .join('')})$`
       )
     : undefined;
 

package/src/types.tsx

@@ -971,12 +971,12 @@ export type NavigatorScreenParams<ParamList extends {}> =
           };
     }[keyof ParamList];
 
-export type PathConfig<ParamList extends {}> = {
+type PathConfigAlias = {
   /**
    * Path string to match against.
    * e.g. `/users/:id` will match `/users/1` and extract `id` param as `1`.
    */
-  path?: string;
+  path: string;
   /**
    * Whether the path should be consider parent paths or use the exact path.
    * By default, paths are relating to the path config on the parent screen.
@@ -995,6 +995,9 @@ export type PathConfig<ParamList extends {}> = {
    * ```
    */
   parse?: Record<string, (value: string) => any>;
+};
+
+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)`.
@@ -1007,6 +1010,10 @@ export type PathConfig<ParamList extends {}> = {
    * ```
    */
   stringify?: Record<string, (value: any) => string>;
+  /**
+   * Additional path alias that will be matched to the same screen.
+   */
+  alias?: (string | PathConfigAlias)[];
   /**
    * Path configuration for child screens.
    */
@@ -1015,12 +1022,6 @@ export type PathConfig<ParamList extends {}> = {
    * Name of the initial route to use for the navigator when the path matches.
    */
   initialRouteName?: keyof ParamList;
-  /**
-   * A function returning a state, which may be set after modifying the routes name.
-   */
-  getStateForRouteNamesChange?: (
-    state: NavigationState
-  ) => PartialState<NavigationState> | undefined;
 };
 
 export type PathConfigMap<ParamList extends {}> = {

package/src/useScheduleUpdate.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
 /**
  * When screen config changes, we want to update the navigator in the same update phase.
  * However, navigation state is in the root component and React won't let us update it from a child.
@@ -17,5 +19,5 @@ export function useScheduleUpdate(callback: () => void) {
   // However, since we are using sync store, it might be fine
   scheduleUpdate(callback);
 
-  React.useEffect(flushUpdates);
+  useIsomorphicLayoutEffect(flushUpdates);
 }

package/src/validatePathConfig.tsx

@@ -11,6 +11,7 @@ export function validatePathConfig(config: unknown, root = true) {
     ...(root
       ? null
       : {
+          alias: 'array',
           exact: 'boolean',
           stringify: 'object',
           parse: 'object',
@@ -33,8 +34,14 @@ export function validatePathConfig(config: unknown, root = true) {
           // @ts-expect-error: we know the key exists
           const value = config[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'];