@react-navigation/core 7.17.2 → 7.17.4

package/src/useNavigationBuilder.tsx

@@ -63,6 +63,14 @@ type NavigatorRoute = {
   params?: NavigatorScreenParams<ParamListBase>;
 };
 
+const isNavigationState = (
+  state: unknown
+): state is NavigationState | PartialState<NavigationState> =>
+  state != null &&
+  typeof state === 'object' &&
+  'routes' in state &&
+  Array.isArray(state.routes);
+
 const isScreen = (
   child: React.ReactElement<unknown>
 ): child is React.ReactElement<{
@@ -279,8 +287,10 @@ const getRouteConfigsFromChildren = <
 };
 
 const getStateFromParams = (params: NavigatorRoute['params']) => {
-  if (params?.state != null) {
-    return params.state;
+  const state = params?.state;
+
+  if (isNavigationState(state)) {
+    return state;
   } else if (typeof params?.screen === 'string' && params?.initial !== false) {
     return {
       routes: [
@@ -376,44 +386,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 +394,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,
@@ -659,24 +657,21 @@ export function useNavigationBuilder<
 
   if (route?.params && !didConsumeNestedParams) {
     let action: CommonActions.Action | undefined;
+    const stateFromParams = route.params.state;
 
-    if (
-      typeof route.params.state === 'object' &&
-      route.params.state != null &&
-      !isNestedParamsConsumed
-    ) {
+    if (isNavigationState(stateFromParams) && !isNestedParamsConsumed) {
       didConsumeNestedParams = true;
 
       if (
         options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
-        doesStateHaveOnlyInvalidRoutes(route.params.state)
+        doesStateHaveOnlyInvalidRoutes(stateFromParams)
       ) {
-        if (route.params.state !== unhandledState) {
-          setUnhandledState(route.params.state);
+        if (stateFromParams !== unhandledState) {
+          setUnhandledState(stateFromParams);
         }
       } else {
         // If the route was updated with new state, we should reset to it
-        action = CommonActions.reset(route.params.state);
+        action = CommonActions.reset(stateFromParams);
       }
     } else if (
       typeof route.params.screen === 'string' &&
@@ -835,35 +830,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
+    );
+
+    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));
+      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];