@react-navigation/core 7.17.1 → 7.17.3

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

package/src/useNavigationBuilder.tsx

@@ -331,7 +331,7 @@ export function useNavigationBuilder<
 
   const isNestedParamsConsumed =
     typeof route?.params === 'object' && route.params != null
-      ? consumedParams?.ref?.deref() === route.params
+      ? consumedParams?.isConsumed(route.params)
       : false;
 
   const {
@@ -376,44 +376,7 @@ export function useNavigationBuilder<
     return original;
   });
 
-  const screens = routeConfigs.reduce<
-    Record<string, ScreenConfigWithParent<State, ScreenOptions, EventMap>>
-  >((acc, config) => {
-    if (config.props.name in acc) {
-      throw new Error(
-        `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${config.props.name}')`
-      );
-    }
-
-    acc[config.props.name] = config;
-    return acc;
-  }, {});
-
   const routeNames = routeConfigs.map((config) => config.props.name);
-  const routeKeyList = routeNames.reduce<Record<string, React.Key | undefined>>(
-    (acc, curr) => {
-      acc[curr] = screens[curr].keys.map((key) => key ?? '').join(':');
-      return acc;
-    },
-    {}
-  );
-  const routeParamList = routeNames.reduce<Record<string, object | undefined>>(
-    (acc, curr) => {
-      const { initialParams } = screens[curr].props;
-      acc[curr] = initialParams;
-      return acc;
-    },
-    {}
-  );
-  const routeGetIdList = routeNames.reduce<
-    RouterConfigOptions['routeGetIdList']
-  >(
-    (acc, curr) =>
-      Object.assign(acc, {
-        [curr]: screens[curr].props.getId,
-      }),
-    {}
-  );
 
   if (!routeNames.length) {
     throw new Error(
@@ -421,6 +384,31 @@ export function useNavigationBuilder<
     );
   }
 
+  const screens: Record<
+    string,
+    ScreenConfigWithParent<State, ScreenOptions, EventMap>
+  > = {};
+
+  const routeKeyList: Record<string, React.Key | undefined> = {};
+  const routeParamList: Record<string, object | undefined> = {};
+  const routeGetIdList: RouterConfigOptions['routeGetIdList'] = {};
+
+  for (const config of routeConfigs) {
+    const name = config.props.name;
+
+    if (name in screens) {
+      throw new Error(
+        `A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${name}')`
+      );
+    }
+
+    screens[name] = config;
+    routeKeyList[name] = config.keys.map((key) => key ?? '').join(':');
+    routeParamList[name] = config.props.initialParams;
+
+    Object.assign(routeGetIdList, { [name]: config.props.getId });
+  }
+
   const isStateValid = React.useCallback(
     (state: NavigationState | PartialState<NavigationState>) =>
       state.type === undefined || state.type === router.type,
@@ -725,20 +713,18 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  const setConsumedParamsRef = consumedParams?.setRef;
+  const setConsumedParams = consumedParams?.setConsumed;
 
   React.useEffect(() => {
     if (
-      setConsumedParamsRef &&
+      setConsumedParams &&
       didConsumeNestedParams &&
       typeof route?.params === 'object' &&
       route.params != null
     ) {
-      // Track whether the params have been already consumed
-      // Set it to the same object, so merged params can be handled again
-      setConsumedParamsRef(new WeakRef(route.params));
+      setConsumedParams(route.params);
     }
-  }, [didConsumeNestedParams, route?.params, setConsumedParamsRef]);
+  }, [didConsumeNestedParams, route?.params, setConsumedParams]);
 
   const shouldUpdate = state !== nextState;
 
@@ -837,35 +823,41 @@ export function useNavigationBuilder<
       return;
     }
 
-    const navigation = descriptors[route.key].navigation;
-
-    const listeners = ([] as (((e: any) => void) | undefined)[])
-      .concat(
-        // Get an array of listeners for all screens + common listeners on navigator
-        ...[
-          screenListeners,
-          ...routeNames.map((name) => {
-            const { listeners } = screens[name].props;
-            return listeners;
-          }),
-        ].map((listeners) => {
-          const map =
-            typeof listeners === 'function'
-              ? listeners({ route: route as any, navigation })
-              : listeners;
-
-          return map
-            ? Object.keys(map)
-                .filter((type) => type === e.type)
-                .map((type) => map?.[type])
-            : undefined;
-        })
-      )
-      // We don't want same listener to be called multiple times for same event
-      // So we remove any duplicate functions from the array
-      .filter((cb, i, self) => cb && self.lastIndexOf(cb) === i);
+    const hasPerScreenListeners = routeNames.some(
+      (name) => screens[name].props.listeners != null
+    );
 
-    listeners.forEach((listener) => listener?.(e));
+    if (screenListeners != null || hasPerScreenListeners) {
+      const navigation = descriptors[route.key].navigation;
+
+      const listeners = ([] as (((e: any) => void) | undefined)[])
+        .concat(
+          // Get an array of listeners for all screens + common listeners on navigator
+          ...[
+            screenListeners,
+            ...routeNames.map((name) => {
+              const { listeners } = screens[name].props;
+              return listeners;
+            }),
+          ].map((listeners) => {
+            const map =
+              typeof listeners === 'function'
+                ? listeners({ route: route as any, navigation })
+                : listeners;
+
+            return map
+              ? Object.keys(map)
+                  .filter((type) => type === e.type)
+                  .map((type) => map?.[type])
+              : undefined;
+          })
+        )
+        // We don't want same listener to be called multiple times for same event
+        // So we remove any duplicate functions from the array
+        .filter((cb, i, self) => cb && self.lastIndexOf(cb) === i);
+
+      listeners.forEach((listener) => listener?.(e));
+    }
   });
 
   useFocusEvents({ state, emitter });

package/src/useRouteCache.tsx

@@ -36,9 +36,10 @@ export function useRouteCache<State extends NavigationState>(
       proxy = routeWithoutState;
     }
 
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== 'production' && proxy !== previous) {
       // 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];