@react-navigation/core 7.17.2 → 7.17.4

package/src/getStateFromPath.tsx

@@ -29,6 +29,8 @@ type RouteConfig = {
   params: { screen: string; name?: string; index: number }[];
   routeNames: string[];
   parse?: ParseConfig;
+  explicitParamNames?: Set<string>;
+  hasNestedScreens: boolean;
 };
 
 type InitialRouteConfig = {
@@ -49,6 +51,22 @@ type ParsedRoute = {
 type ConfigResources = {
   initialRoutes: InitialRouteConfig[];
   configs: RouteConfig[];
+  configsByScreen: Record<string, RouteConfig[]>;
+};
+
+const NESTED_SCREEN_PARAM_NAMES = [
+  'screen',
+  'params',
+  'initial',
+  'path',
+  'merge',
+  'pop',
+];
+
+const getExplicitParamNames = (parse?: ParseConfig) => {
+  const names = Object.entries(parse ?? {}).map(([name]) => name);
+
+  return names.length ? new Set(names) : undefined;
 };
 
 /**
@@ -76,7 +94,8 @@ export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
-  const { initialRoutes, configs } = getConfigResources(options);
+  const { initialRoutes, configs, configsByScreen } =
+    getConfigResources(options);
 
   const screens = options?.screens;
 
@@ -103,15 +122,23 @@ export function getStateFromPath<ParamList extends {}>(
     remaining = remaining.replace(normalizedPrefix, '');
   }
 
+  const decodedSegments: string[] = [];
+
+  for (const segment of remaining.split('/')) {
+    if (!segment) {
+      continue;
+    }
+
+    try {
+      decodedSegments.push(decodeURIComponent(segment));
+    } catch {
+      return undefined;
+    }
+  }
+
   if (screens === undefined) {
     // When no config is specified, use the path segments as route names
-    const routes = remaining
-      .split('/')
-      .filter(Boolean)
-      .map((segment) => {
-        const name = decodeURIComponent(segment);
-        return { name };
-      });
+    const routes = decodedSegments.map((name) => ({ name }));
 
     if (routes.length) {
       return createNestedStateObject(path, routes, initialRoutes);
@@ -130,32 +157,26 @@ export function getStateFromPath<ParamList extends {}>(
         path,
         match.routeNames.map((name) => ({ name })),
         initialRoutes,
-        configs
+        match
       );
     }
 
     return undefined;
   }
 
-  let result: PartialState<NavigationState> | undefined;
-  let current: PartialState<NavigationState> | undefined;
-
   // 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, configs);
-
-  if (routes !== undefined) {
-    // This will always be empty if full path matched
-    current = createNestedStateObject(path, routes, initialRoutes, configs);
-    remaining = remainingPath;
-    result = current;
-  }
+  const { routes, config } = matchAgainstConfigs(
+    remaining,
+    configs,
+    configsByScreen
+  );
 
-  if (current == null || result == null) {
+  if (routes === undefined || config === undefined) {
     return undefined;
   }
 
-  return result;
+  return createNestedStateObject(path, routes, initialRoutes, config);
 }
 
 /**
@@ -189,12 +210,16 @@ function prepareConfigResources(options?: Options<{}>) {
 
   checkForDuplicatedConfigs(configs);
 
-  const configWithRegexes = getConfigsWithRegexes(configs);
+  const configsByScreen: Record<string, RouteConfig[]> = {};
+
+  for (const c of configs) {
+    (configsByScreen[c.screen] ??= []).push(c);
+  }
 
   return {
     initialRoutes,
     configs,
-    configWithRegexes,
+    configsByScreen,
   };
 }
 
@@ -337,17 +362,14 @@ function checkForDuplicatedConfigs(configs: RouteConfig[]) {
   }, {});
 }
 
-function getConfigsWithRegexes(configs: RouteConfig[]) {
-  return configs.map((c) => ({
-    ...c,
-    // Add `$` to the regex to make sure it matches till end of the path and not just beginning
-    regex: c.regex ? new RegExp(c.regex.source + '$') : undefined,
-  }));
-}
-
-const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
+const matchAgainstConfigs = (
+  remaining: string,
+  configs: RouteConfig[],
+  configsByScreen: Record<string, RouteConfig[]>
+) => {
   let routes: ParsedRoute[] | undefined;
   let remainingPath = remaining;
+  let matchingConfig: RouteConfig | undefined;
 
   // Go through all configs, and see if the next path segment matches our regex
   for (const config of configs) {
@@ -359,53 +381,57 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 
     // If our regex matches, we need to extract params from the path
     if (match) {
-      routes = config.routeNames.map((routeName) => {
-        const routeConfig = configs.find((c) => {
-          // Check matching name AND pattern in case same screen is used at different levels in config
-          return (
-            c.screen === routeName &&
-            arrayStartsWith(config.segments, c.segments)
-          );
-        });
+      routes = [];
+      matchingConfig = config;
 
-        const params =
-          routeConfig && match.groups
-            ? Object.fromEntries(
-                Object.entries(match.groups)
-                  .map(([key, value]) => {
-                    const index = Number(key.replace('param_', ''));
-                    const param = routeConfig.params.find(
-                      (it) => it.index === index
-                    );
-
-                    if (param?.screen === routeName && param?.name) {
-                      return [param.name, value];
-                    }
-
-                    return null;
-                  })
-                  .filter((it) => it != null)
-                  .map(([key, value]) => {
-                    if (value == null) {
-                      return [key, undefined];
-                    }
-
-                    const decoded = decodeURIComponent(value);
-                    const parsed = routeConfig.parse?.[key]
-                      ? routeConfig.parse[key](decoded)
-                      : decoded;
-
-                    return [key, parsed];
-                  })
-              )
-            : undefined;
+      for (const routeName of config.routeNames) {
+        // Check matching name AND pattern in case same screen is used at different levels in config
+        const routeConfig = configsByScreen[routeName]?.find((c) =>
+          arrayStartsWith(config.segments, c.segments)
+        );
 
-        if (params && Object.keys(params).length) {
-          return { name: routeName, params };
+        let params: Record<string, unknown> | undefined;
+
+        if (routeConfig && match.groups) {
+          const paramEntries: [string, unknown][] = [];
+
+          for (const [key, value] of Object.entries(match.groups)) {
+            const index = Number(key.replace('param_', ''));
+            const param = routeConfig.params.find((it) => it.index === index);
+
+            if (param?.screen !== routeName || !param.name) {
+              continue;
+            }
+
+            if (value == null) {
+              paramEntries.push([param.name, undefined]);
+              continue;
+            }
+
+            let decoded: string;
+
+            try {
+              decoded = decodeURIComponent(value);
+            } catch {
+              return { routes: undefined, remainingPath };
+            }
+
+            const parser = routeConfig.parse?.[param.name];
+
+            paramEntries.push([param.name, parser ? parser(decoded) : decoded]);
+          }
+
+          if (paramEntries.length) {
+            params = Object.fromEntries(paramEntries);
+          }
         }
 
-        return { name: routeName };
-      });
+        if (params && Object.keys(params).length) {
+          routes.push({ name: routeName, params });
+        } else {
+          routes.push({ name: routeName });
+        }
+      }
 
       remainingPath = remainingPath.replace(match[0], '');
 
@@ -413,7 +439,7 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
     }
   }
 
-  return { routes, remainingPath };
+  return { routes, remainingPath, config: matchingConfig };
 };
 
 const createNormalizedConfigs = (
@@ -439,6 +465,9 @@ const createNormalizedConfigs = (
     // if an object is specified as the value (e.g. Foo: { ... }),
     // it can have `path` property and
     // it could have `screens` prop which has nested configs
+    const nestedScreens = config.screens;
+    const hasNestedScreens = !!nestedScreens;
+
     if (typeof config.path === 'string') {
       if (config.exact && config.path == null) {
         throw new Error(
@@ -458,7 +487,8 @@ const createNormalizedConfigs = (
                 screen,
                 [...routeNames],
                 [...paths, { screen, path: alias }],
-                config.parse
+                config.parse,
+                hasNestedScreens
               )
             );
           } else if (typeof alias === 'object') {
@@ -469,7 +499,8 @@ const createNormalizedConfigs = (
                 alias.exact
                   ? [{ screen, path: alias.path }]
                   : [...paths, { screen, path: alias.path }],
-                alias.parse
+                alias.parse,
+                hasNestedScreens
               )
             );
           }
@@ -484,7 +515,13 @@ const createNormalizedConfigs = (
 
       paths.push({ screen, path: config.path });
       configs.push(
-        createConfigItem(screen, [...routeNames], [...paths], config.parse)
+        createConfigItem(
+          screen,
+          [...routeNames],
+          [...paths],
+          config.parse,
+          hasNestedScreens
+        )
       );
 
       configs.push(...aliasConfigs);
@@ -500,7 +537,7 @@ const createNormalizedConfigs = (
       );
     }
 
-    if (config.screens) {
+    if (nestedScreens) {
       // property `initialRouteName` without `screens` has no purpose
       if (config.initialRouteName) {
         initials.push({
@@ -509,10 +546,10 @@ const createNormalizedConfigs = (
         });
       }
 
-      Object.keys(config.screens).forEach((nestedConfig) => {
+      Object.keys(nestedScreens).forEach((nestedConfig) => {
         const result = createNormalizedConfigs(
           nestedConfig,
-          config.screens as Record<string, string | PathConfig<ParamListBase>>,
+          nestedScreens as Record<string, string | PathConfig<ParamListBase>>,
           initials,
           [...paths],
           [...parentScreens],
@@ -533,7 +570,8 @@ const createConfigItem = (
   screen: string,
   routeNames: string[],
   paths: { screen: string; path: string }[],
-  parse?: ParseConfig
+  parse?: ParseConfig,
+  hasNestedScreens = false
 ): RouteConfig => {
   const parts: (PatternPart & { screen: string })[] = [];
 
@@ -578,22 +616,11 @@ const createConfigItem = (
     params,
     routeNames,
     parse,
+    explicitParamNames: getExplicitParamNames(parse),
+    hasNestedScreens,
   };
 };
 
-const findParseConfigForRoute = (
-  routeName: string,
-  flatConfig: RouteConfig[]
-): ParseConfig | undefined => {
-  for (const config of flatConfig) {
-    if (routeName === config.routeNames[config.routeNames.length - 1]) {
-      return config.parse;
-    }
-  }
-
-  return undefined;
-};
-
 // Try to find an initial route connected with the one passed
 const findInitialRoute = (
   routeName: string,
@@ -655,7 +682,7 @@ const createNestedStateObject = (
   path: string,
   routes: ParsedRoute[],
   initialRoutes: InitialRouteConfig[],
-  flatConfig?: RouteConfig[]
+  routeConfig?: RouteConfig
 ) => {
   let route = routes.shift() as ParsedRoute;
   const parentScreens: string[] = [];
@@ -699,7 +726,10 @@ const createNestedStateObject = (
 
   const params = parseQueryParams(
     path,
-    flatConfig ? findParseConfigForRoute(route.name, flatConfig) : undefined
+    routeConfig?.parse,
+    routeConfig?.explicitParamNames,
+    routeConfig?.hasNestedScreens,
+    route.params
   );
 
   if (params) {
@@ -711,7 +741,10 @@ const createNestedStateObject = (
 
 const parseQueryParams = (
   path: string,
-  parseConfig?: Record<string, (value: string) => unknown>
+  parseConfig?: ParseConfig,
+  explicitParamNames?: Set<string>,
+  hasNestedScreens = false,
+  routeParams?: Record<string, unknown>
 ) => {
   const query = path.split('?')[1];
   const params: Record<string, unknown> = queryString.parse(query);
@@ -727,5 +760,19 @@ const parseQueryParams = (
     });
   }
 
+  if (
+    hasNestedScreens &&
+    !explicitParamNames?.has('screen') &&
+    (typeof params.screen === 'string' ||
+      typeof routeParams?.screen === 'string')
+  ) {
+    for (const name of NESTED_SCREEN_PARAM_NAMES) {
+      if (!explicitParamNames?.has(name)) {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete params[name];
+      }
+    }
+  }
+
   return Object.keys(params).length ? params : undefined;
 };

package/src/index.tsx

@@ -25,7 +25,6 @@ export {
   type StaticConfigGroup,
   type StaticConfigScreens,
   type StaticNavigation,
-  type StaticParamList,
   type StaticScreenProps,
 } from './StaticNavigation';
 export { ThemeContext } from './theming/ThemeContext';

package/src/types.tsx

@@ -10,14 +10,148 @@ import type {
 } from '@react-navigation/routers';
 import type * as React from 'react';
 
+/**
+ * Flatten a type to remove all type alias names, unions etc.
+ * This will show a plain object when hovering over the type.
+ */
+type FlatType<T> = { [K in keyof T]: T[K] } & {};
+
+/**
+ * keyof T doesn't work for union types. We can use distributive conditional types instead.
+ * https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
+ */
+type KeysOf<T> = T extends {} ? keyof T : never;
+
+/**
+ * We get a union type when using keyof, but we want an intersection instead.
+ * https://stackoverflow.com/a/50375286/1665026
+ */
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I
+) => void
+  ? I
+  : never;
+
+type UnknownToUndefined<T> = unknown extends T ? undefined : T;
+
+type ParamsForScreenComponent<T> = T extends {
+  screen: React.ComponentType<{ route: { params: infer P } }>;
+}
+  ? P
+  : T extends React.ComponentType<{ route: { params: infer P } }>
+    ? P
+    : undefined;
+
+type StaticNavigationConfig = {
+  readonly config: {
+    readonly screens?: Record<string, any>;
+    readonly groups?: {
+      [key: string]: {
+        screens: Record<string, any>;
+      };
+    };
+  };
+};
+
+type ParamsForScreen<T> = T extends {
+  screen: infer Screen;
+}
+  ? Screen extends StaticNavigationConfig
+    ? NavigatorScreenParams<StaticParamList<Screen>> | undefined
+    : UnknownToUndefined<ParamsForScreenComponent<T>>
+  : T extends StaticNavigationConfig
+    ? NavigatorScreenParams<StaticParamList<T>> | undefined
+    : UnknownToUndefined<ParamsForScreenComponent<T>>;
+
+type ParamListForScreens<Screens> = {
+  [Key in KeysOf<Screens>]: ParamsForScreen<Screens[Key]>;
+};
+
+type ParamListForGroups<
+  Groups extends
+    | Readonly<{
+        [key: string]: {
+          screens: Record<string, any>;
+        };
+      }>
+    | undefined,
+> = Groups extends {
+  [key: string]: {
+    screens: Record<string, any>;
+  };
+}
+  ? ParamListForScreens<UnionToIntersection<Groups[keyof Groups]['screens']>>
+  : {};
+
+/**
+ * Infer the param list from the static navigation config.
+ */
+export type StaticParamList<T extends StaticNavigationConfig> = FlatType<
+  ParamListForScreens<T['config']['screens']> &
+    ParamListForGroups<T['config']['groups']>
+>;
+
+type ParamListForStaticNavigator<T> = T extends StaticNavigationConfig
+  ? StaticParamList<T>
+  : {};
+
+type ParamListForTypedNavigator<T> = T extends {
+  Screen: any;
+} & PrivateValueStore<infer Value>
+  ? Value[0]
+  : {};
+
+type ParamListForRootNavigator<T> =
+  string extends keyof ParamListForTypedNavigator<T>
+    ? ParamListForStaticNavigator<T>
+    : ParamListForTypedNavigator<T>;
+
+/**
+ * Root navigator used in the app.
+ * It's used for the global types in the app.
+ *
+ * Users need to use module augmentation to add their navigator type:
+ *
+ * ```ts
+ * // Navigator created with static or dynamic API
+ * const RootStack = createStackNavigator({
+ *   // ...
+ * });
+ *
+ * type RootStackType = typeof RootStack;
+ *
+ * declare module '@react-navigation/core' {
+ *   interface RootNavigator extends RootStackType {}
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface RootNavigator {}
+
+/**
+ * Theme object for the navigation components.
+ *
+ * Custom properties can be added using declaration merging:
+ *
+ * ```ts
+ * declare module '@react-navigation/core' {
+ *   interface Theme extends NativeTheme {
+ *     myCustomProperty: string;
+ *   }
+ * }
+ * ```
+ */
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface Theme {}
+
+type RootTheme = Theme;
+
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace
   namespace ReactNavigation {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface RootParamList {}
+    interface RootParamList extends ParamListForRootNavigator<RootNavigator> {}
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    interface Theme {}
+    interface Theme extends RootTheme {}
   }
 }
 

package/src/useEventEmitter.tsx

@@ -75,59 +75,54 @@ export function useEventEmitter<T extends Record<string, any>>(
       target?: string;
       canPreventDefault?: boolean;
     }) => {
-      const items = listeners.current[type] || {};
+      const items = listeners.current[type];
 
       // Copy the current list of callbacks in case they are mutated during execution
-      const callbacks =
-        target !== undefined
-          ? items[target]?.slice()
-          : ([] as Listeners)
-              .concat(...Object.keys(items).map((t) => items[t]))
-              .filter((cb, i, self) => self.lastIndexOf(cb) === i);
-
-      const event: EventArg<any, any, any> = {
-        get type() {
-          return type;
-        },
+      let callbacks: Listeners | undefined;
+
+      if (items !== undefined) {
+        callbacks =
+          target !== undefined
+            ? items[target]?.slice()
+            : ([] as Listeners)
+                .concat(...Object.keys(items).map((t) => items[t]))
+                .filter((cb, i, self) => self.lastIndexOf(cb) === i);
+      }
+
+      const descriptors: PropertyDescriptorMap = {
+        type: { enumerable: true, value: type },
       };
 
       if (target !== undefined) {
-        Object.defineProperty(event, 'target', {
-          enumerable: true,
-          get() {
-            return target;
-          },
-        });
+        descriptors.target = { enumerable: true, value: target };
       }
 
       if (data !== undefined) {
-        Object.defineProperty(event, 'data', {
-          enumerable: true,
-          get() {
-            return data;
-          },
-        });
+        descriptors.data = { enumerable: true, value: data };
       }
 
+      let defaultPrevented = false;
+
       if (canPreventDefault) {
-        let defaultPrevented = false;
-
-        Object.defineProperties(event, {
-          defaultPrevented: {
-            enumerable: true,
-            get() {
-              return defaultPrevented;
-            },
+        descriptors.defaultPrevented = {
+          enumerable: true,
+          get() {
+            return defaultPrevented;
           },
-          preventDefault: {
-            enumerable: true,
-            value() {
-              defaultPrevented = true;
-            },
+        };
+        descriptors.preventDefault = {
+          enumerable: true,
+          value() {
+            defaultPrevented = true;
           },
-        });
+        };
       }
 
+      const event: EventArg<any, any, any> = Object.defineProperties(
+        {} as EventArg<any, any, any>,
+        descriptors
+      );
+
       listenRef.current?.(event);
 
       callbacks?.forEach((cb) => cb(event));