@react-navigation/core 7.17.2 → 7.17.3

package/src/StaticNavigation.tsx

@@ -6,7 +6,6 @@ import type {
   DefaultNavigatorOptions,
   EventMapBase,
   NavigationListBase,
-  NavigatorScreenParams,
   NavigatorTypeBagBase,
   PathConfig,
   RouteConfigComponent,
@@ -15,77 +14,7 @@ import type {
 } from './types';
 import { useRoute } from './useRoute';
 
-/**
- * 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 ParamsForScreen<T> = T extends {
-  screen: { config: StaticConfig<NavigatorTypeBagBase> };
-}
-  ? NavigatorScreenParams<StaticParamList<T['screen']>> | undefined
-  : T extends { config: StaticConfig<NavigatorTypeBagBase> }
-    ? 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: StaticConfigScreens<
-            ParamListBase,
-            NavigationState,
-            {},
-            EventMapBase,
-            any
-          >;
-        };
-      }>
-    | undefined,
-> = Groups extends {
-  [key: string]: {
-    screens: StaticConfigScreens<
-      ParamListBase,
-      NavigationState,
-      {},
-      EventMapBase,
-      any
-    >;
-  };
-}
-  ? ParamListForScreens<UnionToIntersection<Groups[keyof Groups]['screens']>>
-  : {};
+export type { StaticParamList } from './types';
 
 type StaticRouteConfig<
   ParamList extends ParamListBase,
@@ -287,25 +216,6 @@ export type StaticScreenProps<T extends Record<string, unknown> | undefined> = {
   };
 };
 
-/**
- * Infer the param list from the static navigation config.
- */
-export type StaticParamList<
-  T extends {
-    readonly config: {
-      readonly screens?: Record<string, any>;
-      readonly groups?: {
-        [key: string]: {
-          screens: Record<string, any>;
-        };
-      };
-    };
-  },
-> = FlatType<
-  ParamListForScreens<T['config']['screens']> &
-    ParamListForGroups<T['config']['groups']>
->;
-
 type StaticNavigationBase = {
   config: StaticConfig<NavigatorTypeBagBase>;
   getComponent: () => React.ComponentType<{}>;

package/src/checkSerializable.tsx

@@ -1,14 +1,16 @@
-const checkSerializableWithoutCircularReference = (
-  o: { [key: string]: any },
-  seen: Set<any>,
-  location: (string | number)[]
-):
+type Result =
   | { serializable: true }
   | {
       serializable: false;
       location: (string | number)[];
       reason: string;
-    } => {
+    };
+
+const checkSerializableWithoutCircularReference = (
+  o: { [key: string]: any },
+  seen: Set<any>,
+  location: (string | number)[]
+): Result => {
   if (
     o === undefined ||
     o === null ||
@@ -25,7 +27,7 @@ const checkSerializableWithoutCircularReference = (
   ) {
     return {
       serializable: false,
-      location,
+      location: location.slice(),
       reason: typeof o === 'function' ? 'Function' : String(o),
     };
   }
@@ -34,7 +36,7 @@ const checkSerializableWithoutCircularReference = (
     return {
       serializable: false,
       reason: 'Circular reference',
-      location,
+      location: location.slice(),
     };
   }
 
@@ -42,30 +44,38 @@ const checkSerializableWithoutCircularReference = (
 
   if (Array.isArray(o)) {
     for (let i = 0; i < o.length; i++) {
+      location.push(i);
       const childResult = checkSerializableWithoutCircularReference(
         o[i],
-        new Set<any>(seen),
-        [...location, i]
+        seen,
+        location
       );
+      location.pop();
 
       if (!childResult.serializable) {
+        seen.delete(o);
         return childResult;
       }
     }
   } else {
     for (const key in o) {
+      location.push(key);
       const childResult = checkSerializableWithoutCircularReference(
         o[key],
-        new Set<any>(seen),
-        [...location, key]
+        seen,
+        location
       );
+      location.pop();
 
       if (!childResult.serializable) {
+        seen.delete(o);
         return childResult;
       }
     }
   }
 
+  seen.delete(o);
+
   return { serializable: true };
 };
 

package/src/getActionFromState.tsx

@@ -28,14 +28,30 @@ type NavigateAction<State extends NavigationState> = {
   };
 };
 
+// Cache the normalized config across calls for the same `options` reference,
+// so we don't re-walk the config tree on every action conversion.
+const cachedNormalizedConfig = new WeakMap<Options, ConfigItem>();
+
 export function getActionFromState(
   state: PartialState<NavigationState>,
   options?: Options
 ): NavigateAction<NavigationState> | CommonActions.Action | undefined {
-  // Create a normalized configs object which will be easier to use
-  const normalizedConfig = options
-    ? createNormalizedConfigItem(options as PathConfig<object> | string)
-    : {};
+  let normalizedConfig;
+
+  if (options) {
+    const cached = cachedNormalizedConfig.get(options);
+
+    if (cached) {
+      normalizedConfig = cached;
+    } else {
+      normalizedConfig = createNormalizedConfigItem(
+        options as PathConfig<object> | string
+      );
+      cachedNormalizedConfig.set(options, normalizedConfig as ConfigItem);
+    }
+  } else {
+    normalizedConfig = {};
+  }
 
   const routes =
     state.index != null ? state.routes.slice(0, state.index + 1) : state.routes;

package/src/getStateFromPath.tsx

@@ -49,6 +49,7 @@ type ParsedRoute = {
 type ConfigResources = {
   initialRoutes: InitialRouteConfig[];
   configs: RouteConfig[];
+  configsByScreen: Record<string, RouteConfig[]>;
 };
 
 /**
@@ -76,7 +77,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;
 
@@ -142,7 +144,11 @@ 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, configs);
+  const { routes, remainingPath } = matchAgainstConfigs(
+    remaining,
+    configs,
+    configsByScreen
+  );
 
   if (routes !== undefined) {
     // This will always be empty if full path matched
@@ -189,12 +195,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,15 +347,11 @@ 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;
 
@@ -360,13 +366,10 @@ 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)
-          );
-        });
+        // 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)
+        );
 
         const params =
           routeConfig && match.groups

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));