@react-navigation/core 7.1.1 → 7.2.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "7.1.1",
+  "version": "7.2.0",
   "keywords": [
     "react",
     "react-native",
@@ -46,7 +46,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^7.1.0",
+    "@react-navigation/routers": "^7.1.1",
     "escape-string-regexp": "^4.0.0",
     "nanoid": "3.3.7",
     "query-string": "^7.1.3",
@@ -63,7 +63,7 @@
     "del-cli": "^5.1.0",
     "immer": "^10.0.3",
     "react": "18.3.1",
-    "react-native-builder-bob": "^0.29.0",
+    "react-native-builder-bob": "^0.33.2",
     "react-test-renderer": "18.2.0",
     "typescript": "^5.5.2"
   },
@@ -95,5 +95,5 @@
       ]
     ]
   },
-  "gitHead": "2412e4baf33f625f134135bb2d1715e9f25c8feb"
+  "gitHead": "19e6e5374159176c3642b60065bcc29376856180"
 }

package/src/StaticNavigation.tsx

@@ -542,15 +542,27 @@ export function createPathConfigForStaticNavigation(
               } else {
                 Object.assign(screenConfig, item.linking);
               }
+
+              if (typeof screenConfig.path === 'string') {
+                // Normalize the path to remove leading and trailing slashes
+                screenConfig.path = screenConfig.path
+                  .split('/')
+                  .filter(Boolean)
+                  .join('/');
+              }
             }
 
             let screens;
 
+            const skipInitialDetectionInChild =
+              skipInitialDetection ||
+              (screenConfig.path != null && screenConfig.path !== '');
+
             if ('config' in item) {
               screens = createPathConfigForTree(
                 item,
                 undefined,
-                skipInitialDetection || screenConfig.path != null
+                skipInitialDetectionInChild
               );
             } else if (
               'screen' in item &&
@@ -560,7 +572,7 @@ export function createPathConfigForStaticNavigation(
               screens = createPathConfigForTree(
                 item.screen,
                 undefined,
-                skipInitialDetection || screenConfig.path != null
+                skipInitialDetectionInChild
               );
             }
 
@@ -575,18 +587,10 @@ export function createPathConfigForStaticNavigation(
               !('linking' in item && item.linking == null)
             ) {
               if (screenConfig.path != null) {
-                if (!skipInitialDetection) {
-                  // Normalize the path to remove leading and trailing slashes
-                  const path = screenConfig.path
-                    ?.split('/')
-                    .filter(Boolean)
-                    .join('/');
-
+                if (!skipInitialDetection && screenConfig.path === '') {
                   // We encounter a leaf screen with empty path,
                   // Clear the initial screen config as it's not needed anymore
-                  if (!skipInitialDetection && path === '') {
-                    initialScreenConfig = undefined;
-                  }
+                  initialScreenConfig = undefined;
                 }
               } else {
                 if (!skipInitialDetection && initialScreenConfig == null) {

package/src/arrayStartsWith.tsx

@@ -0,0 +1,10 @@
+/**
+ * Compare two arrays to check if the first array starts with the second array.
+ */
+export function arrayStartsWith<T>(array: T[], start: T[]) {
+  if (start.length > array.length) {
+    return false;
+  }
+
+  return start.every((it, index) => it === array[index]);
+}

package/src/getPathFromState.tsx

@@ -5,6 +5,7 @@ import type {
 } from '@react-navigation/routers';
 import * as queryString from 'query-string';
 
+import { getPatternParts, type PatternPart } from './getPatternParts';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
@@ -16,10 +17,10 @@ type Options<ParamList extends {}> = {
 
 type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
-type StringifyConfig = Record<string, (value: any) => string>;
+type StringifyConfig = Record<string, (value: unknown) => string>;
 
 type ConfigItem = {
-  pattern?: string;
+  parts?: PatternPart[];
   stringify?: StringifyConfig;
   screens?: Record<string, ConfigItem>;
 };
@@ -91,7 +92,7 @@ export function getPathFromState<ParamList extends {}>(
 ): string {
   if (state == null) {
     throw Error(
-      "Got 'undefined' for the navigation state. You must pass a valid state object."
+      `Got '${String(state)}' for the navigation state. You must pass a valid state object.`
     );
   }
 
@@ -104,7 +105,7 @@ export function getPathFromState<ParamList extends {}>(
   let path = '/';
   let current: State | undefined = state;
 
-  const allParams: Record<string, any> = {};
+  const allParams: Record<string, string> = {};
 
   while (current) {
     let index = typeof current.index === 'number' ? current.index : 0;
@@ -112,19 +113,20 @@ export function getPathFromState<ParamList extends {}>(
       state?: State;
     };
 
-    let pattern: string | undefined;
+    let parts: PatternPart[] | undefined;
 
-    let focusedParams: Record<string, any> | undefined;
-    const focusedRoute = getActiveRoute(state);
+    let focusedParams: Record<string, string> | undefined;
     let currentOptions = configs;
 
+    const focusedRoute = getActiveRoute(state);
+
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
     const nestedRouteNames = [];
 
     let hasNext = true;
 
     while (route.name in currentOptions && hasNext) {
-      pattern = currentOptions[route.name].pattern;
+      parts = currentOptions[route.name].parts;
 
       nestedRouteNames.push(route.name);
 
@@ -138,7 +140,7 @@ export function getPathFromState<ParamList extends {}>(
           ])
         );
 
-        if (pattern) {
+        if (parts?.length) {
           Object.assign(allParams, currentParams);
         }
 
@@ -147,17 +149,15 @@ export function getPathFromState<ParamList extends {}>(
           // We save it here since it's been stringified already
           focusedParams = { ...currentParams };
 
-          pattern
-            ?.split('/')
-            .filter((p) => p.startsWith(':'))
+          parts
             // eslint-disable-next-line no-loop-func
-            .forEach((p) => {
-              const name = getParamName(p);
-
-              // 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[name];
+            ?.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];
+                }
               }
             });
         }
@@ -186,28 +186,21 @@ export function getPathFromState<ParamList extends {}>(
       }
     }
 
-    if (pattern === undefined) {
-      pattern = nestedRouteNames.join('/');
-    }
-
     if (currentOptions[route.name] !== undefined) {
-      path += pattern
-        .split('/')
-        .map((p) => {
-          const name = getParamName(p);
-
+      path += parts
+        ?.map(({ segment, param, optional }) => {
           // 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
-          if (p === '*') {
+          if (segment === '*') {
             return route.name;
           }
 
           // If the path has a pattern for a param, put the param in the path
-          if (p.startsWith(':')) {
-            const value = allParams[name];
+          if (param) {
+            const value = allParams[param];
 
-            if (value === undefined && p.endsWith('?')) {
+            if (value === undefined && optional) {
               // Optional params without value assigned in route.params should be ignored
               return '';
             }
@@ -220,15 +213,20 @@ export function getPathFromState<ParamList extends {}>(
             );
           }
 
-          return encodeURIComponent(p);
+          return encodeURIComponent(segment);
         })
         .join('/');
     } else {
       path += encodeURIComponent(route.name);
     }
 
-    if (!focusedParams) {
-      focusedParams = focusedRoute.params;
+    if (!focusedParams && focusedRoute.params) {
+      focusedParams = Object.fromEntries(
+        Object.entries(focusedRoute.params).map(([key, value]) => [
+          key,
+          String(value),
+        ])
+      );
     }
 
     if (route.state) {
@@ -251,36 +249,37 @@ export function getPathFromState<ParamList extends {}>(
     current = route.state;
   }
 
+  // Include the root path if specified
+  if (options?.path) {
+    path = `${options.path}/${path}`;
+  }
+
   // Remove multiple as well as trailing slashes
   path = path.replace(/\/+/g, '/');
   path = path.length > 1 ? path.replace(/\/$/, '') : path;
 
-  // Include the root path if specified
-  if (options?.path) {
-    path = joinPaths(options.path, path);
+  // If path doesn't start with a slash, add it
+  // This makes sure that history.pushState will update the path correctly instead of appending
+  if (!path.startsWith('/')) {
+    path = `/${path}`;
   }
 
   return path;
 }
 
-const getParamName = (pattern: string) =>
-  pattern.replace(/^:/, '').replace(/\?$/, '');
-
-const joinPaths = (...paths: string[]): string =>
-  ([] as string[])
-    .concat(...paths.map((p) => p.split('/')))
-    .filter(Boolean)
-    .join('/');
-
 const createConfigItem = (
   config: PathConfig<object> | string,
-  parentPattern?: string
+  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 pattern = parentPattern ? joinPaths(parentPattern, config) : config;
+    const parts = getPatternParts(config);
+
+    if (parentParts) {
+      return { parts: [...parentParts, ...parts] };
+    }
 
-    return { pattern };
+    return { parts };
   }
 
   if (config.exact && config.path === undefined) {
@@ -291,18 +290,22 @@ 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 pattern =
+  const parts =
     config.exact !== true
-      ? joinPaths(parentPattern || '', config.path || '')
-      : config.path || '';
+      ? [
+          ...(parentParts || []),
+          ...(config.path ? getPatternParts(config.path) : []),
+        ]
+      : config.path
+        ? getPatternParts(config.path)
+        : undefined;
 
   const screens = config.screens
-    ? createNormalizedConfigs(config.screens, pattern)
+    ? createNormalizedConfigs(config.screens, parts)
     : undefined;
 
   return {
-    // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc.
-    pattern: pattern?.split('/').filter(Boolean).join('/'),
+    parts,
     stringify: config.stringify,
     screens,
   };
@@ -310,11 +313,11 @@ const createConfigItem = (
 
 const createNormalizedConfigs = (
   options: PathConfigMap<object>,
-  pattern?: string
+  parts?: PatternPart[]
 ): Record<string, ConfigItem> =>
   Object.fromEntries(
     Object.entries(options).map(([name, c]) => {
-      const result = createConfigItem(c, pattern);
+      const result = createConfigItem(c, parts);
 
       return [name, result];
     })

package/src/getPatternParts.tsx

@@ -0,0 +1,126 @@
+export type PatternPart = {
+  segment: string;
+  param?: string;
+  regex?: string;
+  optional?: boolean;
+};
+
+/**
+ * Parse a path into an array of parts with information about each segment.
+ */
+export function getPatternParts(path: string): PatternPart[] {
+  const parts: PatternPart[] = [];
+
+  let current: PatternPart = { segment: '' };
+
+  let isRegex = false;
+  let isParam = false;
+  let regexInnerParens = 0;
+
+  // One extra iteration to add the last character
+  for (let i = 0; i <= path.length; i++) {
+    const char = path[i];
+
+    if (char != null) {
+      current.segment += char;
+    }
+
+    if (char === ':') {
+      // The segment must start with a colon if it's a param
+      if (current.segment === ':') {
+        isParam = true;
+      } else {
+        throw new Error(
+          `Encountered ':' in the middle of a segment in path: ${path}`
+        );
+      }
+    } else if (char === '(') {
+      if (isParam) {
+        if (isRegex) {
+          // The '(' is part of the regex if we're already inside one
+          regexInnerParens++;
+        } else {
+          isRegex = true;
+        }
+      } else {
+        throw new Error(
+          `Encountered '(' without preceding ':' in path: ${path}`
+        );
+      }
+    } else if (char === ')') {
+      if (isParam && isRegex) {
+        if (regexInnerParens) {
+          // The ')' is part of the regex if we're already inside one
+          regexInnerParens--;
+          current.regex += char;
+        } else {
+          isRegex = false;
+          isParam = false;
+        }
+      } else {
+        throw new Error(
+          `Encountered ')' without preceding '(' in path: ${path}`
+        );
+      }
+    } else if (char === '?') {
+      if (current.param) {
+        isParam = false;
+
+        current.optional = true;
+      } else {
+        throw new Error(
+          `Encountered '?' without preceding ':' in path: ${path}`
+        );
+      }
+    } else if (char == null || (char === '/' && !isRegex)) {
+      isParam = false;
+
+      // Remove trailing slash from segment
+      current.segment = current.segment.replace(/\/$/, '');
+
+      if (current.segment === '') {
+        continue;
+      }
+
+      if (current.param) {
+        current.param = current.param.replace(/^:/, '');
+      }
+
+      if (current.regex) {
+        current.regex = current.regex.replace(/^\(/, '').replace(/\)$/, '');
+      }
+
+      parts.push(current);
+
+      if (char == null) {
+        break;
+      }
+
+      current = { segment: '' };
+    }
+
+    if (isRegex) {
+      current.regex = current.regex || '';
+      current.regex += char;
+    }
+
+    if (isParam && !isRegex) {
+      current.param = current.param || '';
+      current.param += char;
+    }
+  }
+
+  if (isRegex) {
+    throw new Error(`Could not find closing ')' in path: ${path}`);
+  }
+
+  const params = parts.map((part) => part.param).filter(Boolean);
+
+  for (const [index, param] of params.entries()) {
+    if (params.indexOf(param) !== index) {
+      throw new Error(`Duplicate param name '${param}' found in path: ${path}`);
+    }
+  }
+
+  return parts;
+}