@react-navigation/core 7.21.5 → 7.21.7

package/src/types.tsx

@@ -190,7 +190,7 @@ export type DefaultNavigatorOptions<
           ScreenOptions,
           EventMap
         >,
-        RouteProp<ParamList>
+        ScreenRouteProp<ParamList>
       >
     >;
     children: React.ReactNode;
@@ -202,7 +202,7 @@ export type DefaultNavigatorOptions<
   screenListeners?:
     | ScreenListeners<State, EventMap>
     | ((props: {
-        route: RouteProp<ParamList>;
+        route: ScreenRouteProp<ParamList>;
         navigation: Navigation;
       }) => ScreenListeners<State, EventMap>);
 
@@ -212,7 +212,7 @@ export type DefaultNavigatorOptions<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList>;
+        route: ScreenRouteProp<ParamList>;
         navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
@@ -647,6 +647,13 @@ export type RouteProp<
   RouteName extends keyof ParamList = Keyof<ParamList>,
 > = Route<Extract<RouteName, string>, ParamList[RouteName]>;
 
+type ScreenRouteProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = Keyof<ParamList>,
+> = {
+  [Name in Extract<RouteName, string>]: RouteProp<ParamList, Name>;
+}[Extract<RouteName, string>];
+
 export type CompositeNavigationProp<
   A extends NavigationProp<ParamListBase, string, any, any, any>,
   B extends NavigationHelpersCommon<ParamListBase, any>,
@@ -709,7 +716,7 @@ export type ScreenLayoutArgs<
   ScreenOptions extends {},
   Navigation,
 > = {
-  route: RouteProp<ParamList, RouteName>;
+  route: ScreenRouteProp<ParamList, RouteName>;
   options: ScreenOptions;
   navigation: Navigation;
   theme: ReactNavigation.Theme;
@@ -896,7 +903,7 @@ export type RouteGroupConfig<
   screenOptions?:
     | ScreenOptions
     | ((props: {
-        route: RouteProp<ParamList, keyof ParamList>;
+        route: ScreenRouteProp<ParamList>;
         navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
@@ -1103,25 +1110,36 @@ export type NavigatorTypeBag<
   Navigator: Navigator;
 };
 
-type TypedNavigatorStaticComponent<Bag extends NavigatorTypeBagBase> =
-  React.ComponentType<
-    Partial<
+type StaticParamListForConfig<Config> =
+  Config extends StaticNavigationConfig['config']
+    ? StaticParamList<{ config: Config }> extends infer ParamList extends
+        ParamListBase
+      ? ParamList
+      : ParamListBase
+    : ParamListBase;
+
+type TypedNavigatorStaticComponent<
+  Bag extends NavigatorTypeBagBase,
+  Config,
+> = React.ComponentType<
+  Partial<
+    Omit<
       Omit<
-        React.ComponentProps<
-          TypedNavigatorInternal<
-            Bag['ParamList'],
-            Bag['NavigatorID'],
-            Bag['State'],
-            Bag['ScreenOptions'],
-            Bag['EventMap'],
-            Bag['NavigationList'],
-            Bag['Navigator']
-          >['Navigator']
+        React.ComponentProps<Bag['Navigator']>,
+        keyof DefaultNavigatorOptions<any, any, any, any, any, any>
+      > &
+        DefaultNavigatorOptions<
+          StaticParamListForConfig<Config>,
+          Bag['NavigatorID'],
+          Bag['State'],
+          Bag['ScreenOptions'],
+          Bag['EventMap'],
+          Bag['NavigationList'][keyof Bag['ParamList']]
         >,
-        'children'
-      >
+      'children'
     >
-  >;
+  >
+>;
 
 type TypedNavigatorStaticDecorated<
   Bag extends NavigatorTypeBagBase,
@@ -1154,10 +1172,10 @@ type TypedNavigatorStatic<
   config: Config;
   with: (
     Component: React.ComponentType<{
-      Navigator: TypedNavigatorStaticComponent<Bag>;
+      Navigator: TypedNavigatorStaticComponent<Bag, Config>;
     }>
   ) => TypedNavigatorStaticDecorated<Bag, Config>;
-  getComponent: () => TypedNavigatorStaticComponent<Bag>;
+  getComponent: () => TypedNavigatorStaticComponent<Bag, Config>;
 } & PrivateValueStore<[Bag['ParamList'], Bag['NavigationList'], unknown]>;
 
 export type TypedNavigator<
@@ -1284,7 +1302,7 @@ type PathConfigAlias = {
 export type PathConfig<ParamList extends {}> = Partial<PathConfigAlias> & {
   /**
    * An object mapping the param name to a function which converts the param value to a string.
-   * By default, all params are converted to strings using `String(value)`.
+   * By default, arrays and null are preserved for query params, and other values are converted using `String(value)`.
    *
    * @example
    * ```js

package/src/useDescriptors.tsx

@@ -311,7 +311,7 @@ export function useDescriptors<
       render() {
         return element;
       },
-      options: customOptions as ScreenOptions,
+      options: customOptions,
     };
 
     return acc;

package/src/useFocusEvents.tsx

@@ -45,7 +45,12 @@ export function useFocusEvents<State extends NavigationState>({
   React.useEffect(() => {
     const lastFocusedKey = lastFocusedKeyRef.current;
 
-    lastFocusedKeyRef.current = currentFocusedKey;
+    const isFocused = navigation ? navigation.isFocused() : true;
+
+    if (isFocused) {
+      // Remember the current route as focused if the navigator is focused
+      lastFocusedKeyRef.current = currentFocusedKey;
+    }
 
     // We wouldn't have `lastFocusedKey` on initial mount
     // Fire focus event for the current route on mount if there's no parent navigator
@@ -55,10 +60,7 @@ export function useFocusEvents<State extends NavigationState>({
 
     // We should only emit events when the focused key changed and navigator is focused
     // When navigator is not focused, screens inside shouldn't receive focused status either
-    if (
-      lastFocusedKey === currentFocusedKey ||
-      !(navigation ? navigation.isFocused() : true)
-    ) {
+    if (lastFocusedKey === currentFocusedKey || !isFocused) {
       return;
     }
 

package/src/useLazyValue.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-export function useLazyValue<T>(create: () => T) {
+export function useLazyValue<T>(create: () => T): T {
   const lazyRef = React.useRef<T>(undefined);
 
   if (lazyRef.current === undefined) {
     lazyRef.current = create();
   }
 
-  return lazyRef.current as T;
+  return lazyRef.current;
 }

package/src/useNavigationBuilder.tsx

@@ -19,7 +19,6 @@ import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { deepFreeze } from './deepFreeze';
 import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
-import { isRecordEqual } from './isRecordEqual';
 import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationMetaContext } from './NavigationMetaContext';
@@ -105,7 +104,7 @@ const getRouteConfigsFromChildren = <
   EventMap extends EventMapBase,
 >(
   children: React.ReactNode,
-  groupKey?: string,
+  groupKeys: string[] = [],
   groupOptions?: ScreenConfigWithParent<
     State,
     ScreenOptions,
@@ -148,7 +147,7 @@ const getRouteConfigsFromChildren = <
         }
 
         acc.push({
-          keys: [groupKey, child.props.navigationKey],
+          keys: [...groupKeys, child.props.navigationKey],
           options: groupOptions,
           layout: groupLayout,
           props: child.props as RouteConfig<
@@ -178,7 +177,9 @@ const getRouteConfigsFromChildren = <
         acc.push(
           ...getRouteConfigsFromChildren<State, ScreenOptions, EventMap>(
             child.props.children as React.ReactNode,
-            child.props.navigationKey,
+            child.props.navigationKey != null
+              ? [...groupKeys, child.props.navigationKey]
+              : groupKeys,
             // FIXME
             // @ts-expect-error: add validation
             child.type !== Group
@@ -286,10 +287,23 @@ const getRouteConfigsFromChildren = <
   return configs;
 };
 
-const getStateFromParams = (params: NavigatorRoute['params']) => {
+const getStateFromParams = (
+  params: NavigatorRoute['params'],
+  type: string
+): NavigationState | PartialState<NavigationState> | undefined => {
   const state = params?.state;
 
   if (isNavigationState(state)) {
+    if (state.type != null && state.type !== type) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(
+          `The state passed in the params is for a navigator of type '${state.type}', but it was passed to a navigator of type '${type}'. This can happen if the state was meant for a different navigator. The state will be discarded.`
+        );
+      }
+
+      return undefined;
+    }
+
     return state;
   } else if (typeof params?.screen === 'string' && params?.initial !== false) {
     return {
@@ -341,7 +355,7 @@ export function useNavigationBuilder<
 
   const isNestedParamsConsumed =
     typeof route?.params === 'object' && route.params != null
-      ? consumedParams?.isConsumed(route.params)
+      ? consumedParams?.has(route.params)
       : false;
 
   const {
@@ -399,7 +413,7 @@ export function useNavigationBuilder<
     ScreenConfigWithParent<State, ScreenOptions, EventMap>
   > = {};
 
-  const routeKeyList: Record<string, React.Key | undefined> = {};
+  const routeKeyList: Record<string, (string | undefined)[]> = {};
   const routeParamList: Record<string, object | undefined> = {};
   const routeGetIdList: RouterConfigOptions['routeGetIdList'] = {};
 
@@ -413,7 +427,7 @@ export function useNavigationBuilder<
     }
 
     screens[name] = config;
-    routeKeyList[name] = config.keys.map((key) => key ?? '').join(':');
+    routeKeyList[name] = config.keys;
     routeParamList[name] = config.props.initialParams;
 
     Object.assign(routeGetIdList, { [name]: config.props.getId });
@@ -547,7 +561,7 @@ export function useNavigationBuilder<
     } else {
       const paramsForState = isNestedParamsConsumed ? undefined : route?.params;
       const stateFromParams = paramsForState
-        ? getStateFromParams(paramsForState)
+        ? getStateFromParams(paramsForState, router.type)
         : undefined;
 
       const stateBeforeInitialization = (stateFromParams ?? currentState) as
@@ -569,13 +583,21 @@ export function useNavigationBuilder<
 
       if (
         stateBeforeInitialization != null &&
+        isStateValid(stateBeforeInitialization) &&
         options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(stateBeforeInitialization)
       ) {
         return [stateBeforeInitialization, hydratedState, true, paramsForState];
       }
 
-      return [undefined, hydratedState, false, paramsForState];
+      return [
+        undefined,
+        hydratedState,
+        false,
+        // Current state is already initialized
+        // So params weren't used, and need to be handled later
+        isStateInitialized(currentState) ? undefined : paramsForState,
+      ];
     }
     // We explicitly don't include routeNames, route.params etc. in the dep list
     // below. We want to avoid forcing a new state to be calculated in those cases
@@ -593,6 +615,16 @@ export function useNavigationBuilder<
 
   const previousRouteKeyList = previousRouteKeyListRef.current;
 
+  // Names of the screens whose navigation key changed since the last render
+  const routeKeyChanges = Object.keys(routeKeyList).filter((name) => {
+    const current = routeKeyList[name];
+    const previous = previousRouteKeyList[name];
+
+    return (
+      current != null && previous != null && !isArrayEqual(current, previous)
+    );
+  });
+
   const [unhandledState, setUnhandledState] = React.useState<
     NavigationState | PartialState<NavigationState> | undefined
   >(stateBeforeInitialization);
@@ -620,10 +652,14 @@ export function useNavigationBuilder<
   let nextState: State = state;
   let shouldClearUnhandledState = false;
 
-  // Previously unhandled state is now valid again
-  // And current state no longer has any valid routes
-  // We should reuse the unhandled state instead of re-calculating the state
-  if (
+  if (unhandledState != null && !isStateValid(unhandledState)) {
+    // The stored unhandled state is for a different type of navigator
+    // It can't be used with this navigator, so we discard it
+    setUnhandledState(undefined);
+  } else if (
+    // Previously unhandled state is now valid again
+    // And current state no longer has any valid routes
+    // We should reuse the unhandled state instead of re-calculating the state
     unhandledState?.routes.every((r) => routeNames.includes(r.name)) &&
     state?.routes.every((r) => !routeNames.includes(r.name))
   ) {
@@ -638,18 +674,14 @@ export function useNavigationBuilder<
     );
   } else if (
     !isArrayEqual(state.routeNames, routeNames) ||
-    !isRecordEqual(routeKeyList, previousRouteKeyList)
+    routeKeyChanges.length !== 0
   ) {
     // When the list of route names change, the router should handle it to remove invalid routes
     nextState = router.getStateForRouteNamesChange(state, {
       routeNames,
       routeParamList,
       routeGetIdList,
-      routeKeyChanges: Object.keys(routeKeyList).filter(
-        (name) =>
-          name in previousRouteKeyList &&
-          routeKeyList[name] !== previousRouteKeyList[name]
-      ),
+      routeKeyChanges,
     });
   }
 
@@ -657,21 +689,24 @@ export function useNavigationBuilder<
 
   if (route?.params && !didConsumeNestedParams) {
     let action: CommonActions.Action | undefined;
-    const stateFromParams = route.params.state;
 
-    if (isNavigationState(stateFromParams) && !isNestedParamsConsumed) {
+    if (isNavigationState(route.params.state) && !isNestedParamsConsumed) {
       didConsumeNestedParams = true;
 
-      if (
-        options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
-        doesStateHaveOnlyInvalidRoutes(stateFromParams)
-      ) {
-        if (stateFromParams !== unhandledState) {
-          setUnhandledState(stateFromParams);
+      const stateFromParams = getStateFromParams(route.params, router.type);
+
+      if (stateFromParams != null) {
+        if (
+          options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
+          doesStateHaveOnlyInvalidRoutes(stateFromParams)
+        ) {
+          if (stateFromParams !== unhandledState) {
+            setUnhandledState(stateFromParams);
+          }
+        } else {
+          // If the route was updated with new state, we should reset to it
+          action = CommonActions.reset(stateFromParams);
         }
-      } else {
-        // If the route was updated with new state, we should reset to it
-        action = CommonActions.reset(stateFromParams);
       }
     } else if (
       typeof route.params.screen === 'string' &&
@@ -684,7 +719,7 @@ export function useNavigationBuilder<
         options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
         !routeNames.includes(route.params.screen)
       ) {
-        const state = getStateFromParams(route.params);
+        const state = getStateFromParams(route.params, router.type);
 
         if (state != null && !deepEqual(state, unhandledState)) {
           setUnhandledState(state);
@@ -713,6 +748,18 @@ export function useNavigationBuilder<
         })
       : null;
 
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      action != null &&
+      updatedState === null
+    ) {
+      const names = routeNames.map((name) => `'${name}'`).join(', ');
+
+      console.error(
+        `The 'state' or 'screen' passed in the params couldn't be applied to the navigator with the screens: ${names}. This can happen if the params contain names of screens that don't exist in the navigator. The navigation specified in the params will be ignored.`
+      );
+    }
+
     nextState =
       updatedState !== null
         ? router.getRehydratedState(updatedState, {
@@ -723,18 +770,16 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  const setConsumedParams = consumedParams?.setConsumed;
-
   React.useEffect(() => {
     if (
-      setConsumedParams &&
+      consumedParams &&
       didConsumeNestedParams &&
       typeof route?.params === 'object' &&
       route.params != null
     ) {
-      setConsumedParams(route.params);
+      consumedParams.set(route.params, true);
     }
-  }, [didConsumeNestedParams, route?.params, setConsumedParams]);
+  }, [consumedParams, didConsumeNestedParams, route?.params]);
 
   const shouldUpdate = state !== nextState;
 

package/src/useOnAction.tsx

@@ -52,6 +52,7 @@ export function useOnAction<State extends NavigationState>({
     onRouteFocus: onRouteFocusParent,
     addListener: addListenerParent,
     onDispatchAction,
+    flushUpdates,
   } = React.useContext(NavigationBuilderContext);
   const navigationInChildEnabled = React.useContext(
     DeprecatedNavigationInChildContext
@@ -69,6 +70,11 @@ export function useOnAction<State extends NavigationState>({
       action: NavigationAction,
       visitedNavigators: Set<string> = new Set<string>()
     ) => {
+      // Apply any pending state updates scheduled during render before handling the action
+      // Otherwise the action will be handled with an outdated state,
+      // and the pending updates will overwrite the changes from the action
+      flushUpdates();
+
       const state = getState();
 
       // Since actions can bubble both up and down, they could come to the same navigator again
@@ -91,6 +97,17 @@ export function useOnAction<State extends NavigationState>({
         result =
           result === null && action.target === state.key ? state : result;
 
+        if (result !== null && result.stale !== false) {
+          // Some actions (e.g. `RESET`) may return a stale state from the router
+          // We rehydrate it before storing so the stored state is always usable
+          // Otherwise anything reading the state before the next render
+          // (e.g. another dispatch immediately after) would get an outdated state
+          result = router.getRehydratedState(
+            result,
+            routerConfigOptionsRef.current
+          );
+        }
+
         if (result !== null) {
           if (state !== result) {
             const isPrevented = shouldPreventRemove(
@@ -107,6 +124,13 @@ export function useOnAction<State extends NavigationState>({
               return true;
             }
 
+            if (getState() !== state) {
+              // Listeners for 'beforeRemove' may dispatch actions that change the state
+              // Then the result we have is outdated and would overwrite those changes
+              // So we handle the action again to calculate the result with the latest state
+              return onAction(action, new Set<string>());
+            }
+
             onDispatchAction(action, false);
 
             setState(result);
@@ -158,6 +182,7 @@ export function useOnAction<State extends NavigationState>({
       actionListeners,
       beforeRemoveListeners,
       emitter,
+      flushUpdates,
       getState,
       navigationInChildEnabled,
       key,

package/src/useOnPreventRemove.tsx

@@ -34,9 +34,10 @@ export const shouldPreventRemove = (
     .filter((route) => !nextRouteKeys.includes(route.key))
     .reverse();
 
-  const visitedRouteKeys: Set<string> =
-    // @ts-expect-error: add this property to mark that we've already emitted this action
-    action[VISITED_ROUTE_KEYS] ?? new Set<string>();
+  const visitedRouteKeys =
+    VISITED_ROUTE_KEYS in action && action[VISITED_ROUTE_KEYS] instanceof Set
+      ? action[VISITED_ROUTE_KEYS]
+      : new Set<string>();
 
   const beforeRemoveAction = {
     ...action,

package/src/useRouteCache.tsx

@@ -41,10 +41,7 @@ export function useRouteCache<State extends NavigationState>(
       // 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];
-
+      for (const [key, value] of Object.entries(proxy)) {
         Object.defineProperty(proxy, key, {
           enumerable: true,
           configurable: true,

package/src/useSyncState.tsx

@@ -25,9 +25,10 @@ const createStore = <T,>(getInitialState: () => T) => {
 
   const setState = (newState: T) => {
     state = deepFreeze(newState);
-    didUpdate = true;
 
-    if (!isBatching) {
+    if (isBatching) {
+      didUpdate = true;
+    } else {
       listeners.forEach((listener) => listener());
     }
   };