@react-navigation/core 7.21.2 → 7.21.4

package/src/getStateFromPath.tsx

@@ -26,10 +26,11 @@ type RouteConfig = {
   screen: string;
   regex?: RegExp;
   segments: string[];
-  params: { screen: string; name?: string; index: number }[];
+  params: { screen: string; name: string; index: number }[];
   routeNames: string[];
   parse?: ParseConfig;
   explicitParamNames?: Set<string>;
+  pathParamNames: Set<string>;
   hasNestedScreens: boolean;
 };
 
@@ -122,23 +123,21 @@ export function getStateFromPath<ParamList extends {}>(
     remaining = remaining.replace(normalizedPrefix, '');
   }
 
-  const decodedSegments: string[] = [];
+  if (screens === undefined) {
+    // When no config is specified, use the path segments as route names
+    const routes: ParsedRoute[] = [];
 
-  for (const segment of remaining.split('/')) {
-    if (!segment) {
-      continue;
-    }
+    for (const segment of remaining.split('/')) {
+      if (!segment) {
+        continue;
+      }
 
-    try {
-      decodedSegments.push(decodeURIComponent(segment));
-    } catch {
-      return undefined;
+      try {
+        routes.push({ name: decodeURIComponent(segment) });
+      } catch {
+        return undefined;
+      }
     }
-  }
-
-  if (screens === undefined) {
-    // When no config is specified, use the path segments as route names
-    const routes = decodedSegments.map((name) => ({ name }));
 
     if (routes.length) {
       return createNestedStateObject(path, routes, initialRoutes);
@@ -166,9 +165,21 @@ 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 firstRawSegment = remaining.split('/')[0];
+
+  let firstDecodedSegment: string | undefined;
+
+  try {
+    firstDecodedSegment =
+      firstRawSegment != null ? decodeURIComponent(firstRawSegment) : undefined;
+  } catch {
+    firstDecodedSegment = undefined;
+  }
+
   const { routes, config } = matchAgainstConfigs(
     remaining,
-    decodedSegments,
+    firstDecodedSegment,
+    firstRawSegment,
     configs,
     configsByScreen
   );
@@ -209,12 +220,17 @@ function prepareConfigResources(options?: Options<{}>) {
   const initialRoutes = getInitialRoutes(options);
   const configs = getSortedNormalizedConfigs(initialRoutes, options?.screens);
 
-  checkForDuplicatedConfigs(configs);
-
   const configsByScreen: Record<string, RouteConfig[]> = {};
+  const configsByPattern = new Map<string, RouteConfig>();
 
   for (const c of configs) {
     (configsByScreen[c.screen] ??= []).push(c);
+
+    const pattern = c.segments.join('/');
+    const existing = configsByPattern.get(pattern);
+
+    checkForDuplicatedConfigs(existing, c, pattern);
+    configsByPattern.set(pattern, c);
   }
 
   return {
@@ -330,50 +346,45 @@ function getSortedNormalizedConfigs(
     });
 }
 
-function checkForDuplicatedConfigs(configs: RouteConfig[]) {
-  // Check for duplicate patterns in the config
-  configs.reduce<Record<string, RouteConfig>>((acc, config) => {
-    const pattern = config.segments.join('/');
-
-    if (acc[pattern]) {
-      const a = acc[pattern].routeNames;
-      const b = config.routeNames;
-
-      // It's not a problem if the path string omitted from a inner most screen
-      // For example, it's ok if a path resolves to `A > B > C` or `A > B`
-      const intersects =
-        a.length > b.length
-          ? b.every((it, i) => a[i] === it)
-          : a.every((it, i) => b[i] === it);
-
-      if (!intersects) {
-        throw new Error(
-          `Found conflicting screens with the same pattern. The pattern '${
-            pattern
-          }' resolves to both '${a.join(' > ')}' and '${b.join(
-            ' > '
-          )}'. Patterns must be unique and cannot resolve to more than one screen.`
-        );
-      }
-    }
+// Throw if two configs resolve to the same pattern but conflicting screens
+function checkForDuplicatedConfigs(
+  existing: RouteConfig | undefined,
+  config: RouteConfig,
+  pattern: string
+) {
+  if (!existing) {
+    return;
+  }
 
-    return Object.assign(acc, {
-      [pattern]: config,
-    });
-  }, {});
+  const a = existing.routeNames;
+  const b = config.routeNames;
+
+  // It's not a problem if the path string omitted from a inner most screen
+  // For example, it's ok if a path resolves to `A > B > C` or `A > B`
+  const intersects =
+    a.length > b.length ? arrayStartsWith(a, b) : arrayStartsWith(b, a);
+
+  if (!intersects) {
+    throw new Error(
+      `Found conflicting screens with the same pattern. The pattern '${
+        pattern
+      }' resolves to both '${a.join(' > ')}' and '${b.join(
+        ' > '
+      )}'. Patterns must be unique and cannot resolve to more than one screen.`
+    );
+  }
 }
 
 const matchAgainstConfigs = (
   remaining: string,
-  decodedSegments: string[],
+  firstDecodedSegment: string | undefined,
+  firstRawSegment: string | undefined,
   configs: RouteConfig[],
   configsByScreen: Record<string, RouteConfig[]>
 ) => {
   let routes: ParsedRoute[] | undefined;
   let remainingPath = remaining;
   let matchingConfig: RouteConfig | undefined;
-  const firstDecodedSegment = decodedSegments[0];
-  const firstRawSegment = remainingPath.split('/')[0];
 
   // Go through all configs, and see if the next path segment matches our regex
   for (const config of configs) {
@@ -395,8 +406,8 @@ const matchAgainstConfigs = (
 
     // If our regex matches, we need to extract params from the path
     if (match) {
-      routes = [];
-      matchingConfig = config;
+      const matchedRoutes: ParsedRoute[] = [];
+      let hasInvalidParam = false;
 
       for (const routeName of config.routeNames) {
         // Check matching name AND pattern in case same screen is used at different levels in config
@@ -409,14 +420,13 @@ const matchAgainstConfigs = (
         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) {
+          for (const param of routeConfig.params) {
+            if (param.screen !== routeName) {
               continue;
             }
 
+            const value = match.groups[`param_${param.index}`];
+
             if (value == null) {
               paramEntries.push([param.name, undefined]);
               continue;
@@ -427,7 +437,8 @@ const matchAgainstConfigs = (
             try {
               decoded = decodeURIComponent(value);
             } catch {
-              return { routes: undefined, remainingPath };
+              hasInvalidParam = true;
+              break;
             }
 
             const parser = routeConfig.parse?.[param.name];
@@ -435,18 +446,28 @@ const matchAgainstConfigs = (
             paramEntries.push([param.name, parser ? parser(decoded) : decoded]);
           }
 
+          if (hasInvalidParam) {
+            break;
+          }
+
           if (paramEntries.length) {
             params = Object.fromEntries(paramEntries);
           }
         }
 
         if (params && Object.keys(params).length) {
-          routes.push({ name: routeName, params });
+          matchedRoutes.push({ name: routeName, params });
         } else {
-          routes.push({ name: routeName });
+          matchedRoutes.push({ name: routeName });
         }
       }
 
+      if (hasInvalidParam) {
+        continue;
+      }
+
+      routes = matchedRoutes;
+      matchingConfig = config;
       remainingPath = remainingPath.replace(match[0], '');
 
       break;
@@ -610,8 +631,10 @@ const createConfigItem = (
   const parts: (PatternPart & { screen: string })[] = [];
 
   // Parse the path string into parts for easier matching
-  for (const { screen, path } of paths) {
-    parts.push(...getPatternParts(path).map((part) => ({ ...part, screen })));
+  for (const { screen: pathScreen, path } of paths) {
+    parts.push(
+      ...getPatternParts(path).map((part) => ({ ...part, screen: pathScreen }))
+    );
   }
 
   const regex = parts.length
@@ -631,17 +654,24 @@ const createConfigItem = (
     : undefined;
 
   const segments = parts.map((it) => it.segment);
-  const params = parts
-    .map((it, i) =>
-      it.param
-        ? {
-            index: i,
-            screen: it.screen,
-            name: it.param,
-          }
-        : null
-    )
-    .filter((it) => it != null);
+  const params: RouteConfig['params'] = [];
+  const pathParamNames = new Set<string>();
+
+  for (const [index, part] of parts.entries()) {
+    if (!part.param) {
+      continue;
+    }
+
+    params.push({
+      index,
+      screen: part.screen,
+      name: part.param,
+    });
+
+    if (part.screen === screen) {
+      pathParamNames.add(part.param);
+    }
+  }
 
   return {
     screen,
@@ -651,6 +681,7 @@ const createConfigItem = (
     routeNames,
     parse,
     explicitParamNames: getExplicitParamNames(parse),
+    pathParamNames,
     hasNestedScreens,
   };
 };
@@ -761,6 +792,7 @@ const createNestedStateObject = (
   const params = parseQueryParams(
     path,
     routeConfig?.parse,
+    routeConfig?.pathParamNames,
     routeConfig?.explicitParamNames,
     routeConfig?.hasNestedScreens,
     route.params
@@ -776,6 +808,7 @@ const createNestedStateObject = (
 const parseQueryParams = (
   path: string,
   parseConfig?: ParseConfig,
+  pathParamNames: Set<string> = new Set(),
   explicitParamNames?: Set<string>,
   hasNestedScreens = false,
   routeParams?: Record<string, unknown>
@@ -783,6 +816,11 @@ const parseQueryParams = (
   const query = path.split('?')[1];
   const params: Record<string, unknown> = queryString.parse(query);
 
+  for (const name of pathParamNames) {
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete params[name];
+  }
+
   if (parseConfig) {
     Object.keys(params).forEach((name) => {
       if (

package/src/types.tsx

@@ -1103,21 +1103,23 @@ export type NavigatorTypeBag<
   Navigator: Navigator;
 };
 
-type TypedNavigatorComponent<Bag extends NavigatorTypeBagBase> =
+type TypedNavigatorStaticComponent<Bag extends NavigatorTypeBagBase> =
   React.ComponentType<
-    Omit<
-      React.ComponentProps<
-        TypedNavigatorInternal<
-          Bag['ParamList'],
-          Bag['NavigatorID'],
-          Bag['State'],
-          Bag['ScreenOptions'],
-          Bag['EventMap'],
-          Bag['NavigationList'],
-          Bag['Navigator']
-        >['Navigator']
-      >,
-      'children'
+    Partial<
+      Omit<
+        React.ComponentProps<
+          TypedNavigatorInternal<
+            Bag['ParamList'],
+            Bag['NavigatorID'],
+            Bag['State'],
+            Bag['ScreenOptions'],
+            Bag['EventMap'],
+            Bag['NavigationList'],
+            Bag['Navigator']
+          >['Navigator']
+        >,
+        'children'
+      >
     >
   >;
 
@@ -1152,10 +1154,10 @@ type TypedNavigatorStatic<
   config: Config;
   with: (
     Component: React.ComponentType<{
-      Navigator: TypedNavigatorComponent<Bag>;
+      Navigator: TypedNavigatorStaticComponent<Bag>;
     }>
   ) => TypedNavigatorStaticDecorated<Bag, Config>;
-  getComponent: () => TypedNavigatorComponent<Bag>;
+  getComponent: () => TypedNavigatorStaticComponent<Bag>;
 } & PrivateValueStore<[Bag['ParamList'], Bag['NavigationList'], unknown]>;
 
 export type TypedNavigator<

package/src/useEventEmitter.tsx

@@ -19,7 +19,7 @@ export function useEventEmitter<T extends Record<string, any>>(
   const listenRef = React.useRef(listen);
   const onPostEmitRef = React.useRef(onPostEmit);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     listenRef.current = listen;
     onPostEmitRef.current = onPostEmit;
   });

package/src/useKeyedChildListeners.tsx

@@ -28,8 +28,10 @@ export function useKeyedChildListeners() {
       keyedListeners[type][key] = listener;
 
       return () => {
-        // @ts-expect-error: according to ref stated above you can use `key` to index type
-        keyedListeners[type][key] = undefined;
+        if (keyedListeners[type][key] === listener) {
+          // @ts-expect-error: according to ref stated above you can use `key` to index type
+          keyedListeners[type][key] = undefined;
+        }
       };
     },
     [keyedListeners]

package/src/useNavigationBuilder.tsx

@@ -37,7 +37,6 @@ import {
 } from './types';
 import { UnhandledActionContext } from './UnhandledActionContext';
 import { useChildListeners } from './useChildListeners';
-import { useClientLayoutEffect } from './useClientLayoutEffect';
 import { useComponent } from './useComponent';
 import { useCurrentRender } from './useCurrentRender';
 import { type ScreenConfigWithParent, useDescriptors } from './useDescriptors';
@@ -588,7 +587,7 @@ export function useNavigationBuilder<
 
   const previousRouteKeyListRef = React.useRef(routeKeyList);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     previousRouteKeyListRef.current = routeKeyList;
   });
 
@@ -794,19 +793,6 @@ export function useNavigationBuilder<
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // In some cases (e.g. route names change), internal state might have changed
-  // But it hasn't been committed yet, so hasn't propagated to the sync external store
-  // During this time, we need to return the internal state in `getState`
-  // Otherwise it can result in inconsistent state during render in children
-  // To avoid this, we use a ref for render phase, and immediately clear it on commit
-  const stateRef = React.useRef<State | null>(state);
-
-  stateRef.current = state;
-
-  useClientLayoutEffect(() => {
-    stateRef.current = null;
-  });
-
   const getState = useLatestCallback((): State => {
     const currentState = getCurrentState();
 
@@ -955,9 +941,9 @@ export function useNavigationBuilder<
     onAction,
     onUnhandledAction,
     getState,
+    state,
     emitter,
     router,
-    stateRef,
   });
 
   useFocusedListenersChildrenAdapter({

package/src/useNavigationCache.tsx

@@ -134,7 +134,7 @@ export function useNavigationCache<
     [base, getState, navigation, setOptions, emitter]
   );
 
-  cache.current = state.routes.reduce<
+  const navigations = state.routes.reduce<
     NavigationCache<State, ScreenOptions, EventMap>
   >((acc, route) => {
     const previous = cache.current[route.key];
@@ -233,8 +233,12 @@ export function useNavigationCache<
     return acc;
   }, {});
 
+  React.useInsertionEffect(() => {
+    cache.current = navigations;
+  });
+
   return {
     base,
-    navigations: cache.current,
+    navigations,
   };
 }

package/src/useNavigationHelpers.tsx

@@ -20,9 +20,9 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
   onAction: (action: NavigationAction) => boolean;
   onUnhandledAction: (action: NavigationAction) => void;
   getState: () => State;
+  state: State;
   emitter: NavigationEventEmitter<any>;
   router: Router<State, Action>;
-  stateRef: React.RefObject<State | null>;
 };
 
 /**
@@ -39,12 +39,29 @@ export function useNavigationHelpers<
   onAction,
   onUnhandledAction,
   getState,
+  state,
   emitter,
   router,
-  stateRef,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.useContext(NavigationContext);
 
+  // In some cases (e.g. route names change), internal state might have changed
+  // But it hasn't been committed yet, so hasn't propagated to any listeners
+  // During this time, we need to return the internal state in `getState`
+  // Otherwise it can return an inconsistent state during render in children
+  // This may affect hooks like `useNavigationState` that need to read the state during render
+  // To avoid this, we use a ref for render phase, and immediately clear it on commit
+  // The ref won't be cleared if the render is discarded, e.g. when interrupted
+  // So we also track the stored state the render was based on
+  // Then ignore the ref once the stored state changes due to another dispatch
+  const stateRef = React.useRef<{ state: State; base: State } | null>(null);
+
+  stateRef.current = { state, base: getState() };
+
+  React.useInsertionEffect(() => {
+    stateRef.current = null;
+  });
+
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {
       const action = typeof op === 'function' ? op(getState()) : op;
@@ -103,16 +120,16 @@ export function useNavigationHelpers<
         return parentNavigationHelpers;
       },
       getState: (): State => {
+        const current = getState();
+        const pending = stateRef.current;
+
         // FIXME: Workaround for when the state is read during render
-        // By this time, we haven't committed the new state yet
-        // Without this `useSyncExternalStore` will keep reading the old state
-        // This may result in `useNavigationState` or `useIsFocused` returning wrong values
-        // Apart from `useSyncExternalStore`, `getState` should never be called during render
-        if (stateRef.current != null) {
-          return stateRef.current;
+        // Apart from subscriptions, `getState` should never be called during render
+        if (pending != null && pending.base === current) {
+          return pending.state;
         }
 
-        return getState();
+        return current;
       },
     } as NavigationHelpers<ParamListBase, EventMap> & ActionHelpers;
 

package/src/useNavigationState.tsx

@@ -54,7 +54,7 @@ export function NavigationStateListenerProvider({
     };
   });
 
-  React.useLayoutEffect(() => {
+  React.useInsertionEffect(() => {
     stateRef.current = state;
     listeners.current.forEach((callback) => callback());
   }, [state]);

package/src/useOnAction.tsx

@@ -60,7 +60,7 @@ export function useOnAction<State extends NavigationState>({
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     routerConfigOptionsRef.current = routerConfigOptions;
   });
 

package/src/useOptionsGetters.tsx

@@ -31,8 +31,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     }
   }, [navigation, onOptionsChange]);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     optionsRef.current = options;
+  }, [options]);
+
+  React.useEffect(() => {
     optionsChangeListener();
 
     return navigation?.addListener('focus', optionsChangeListener);

package/src/usePreventRemove.tsx

@@ -23,15 +23,24 @@ export function usePreventRemove(
   const navigation = useNavigation();
   const { key: routeKey } = useRoute();
 
-  const { setPreventRemove } = usePreventRemoveContext();
+  const { setPreventRemove, notifyPreventRemove } = usePreventRemoveContext();
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     setPreventRemove(id, routeKey, preventRemove);
+
     return () => {
       setPreventRemove(id, routeKey, false);
     };
   }, [setPreventRemove, id, routeKey, preventRemove]);
 
+  React.useEffect(() => {
+    notifyPreventRemove();
+
+    return () => {
+      notifyPreventRemove();
+    };
+  }, [id, routeKey, preventRemove, notifyPreventRemove]);
+
   const beforeRemoveListener = useLatestCallback<
     EventListenerCallback<EventMapCore<any>, 'beforeRemove'>
   >((e) => {

package/src/useRouteCache.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { isRecordEqual } from './isRecordEqual';
 import type { RouteProp } from './types';
 
-type RouteCache = Map<string, RouteProp<ParamListBase>>;
-
 /**
  * Utilities such as `getFocusedRouteNameFromRoute` need to access state.
  * So we need a way to suppress the warning for those use cases.
@@ -21,9 +19,12 @@ export function useRouteCache<State extends NavigationState>(
   routes: State['routes']
 ) {
   // Cache object which holds route objects for each screen
-  const cache = React.useMemo(() => ({ current: new Map() as RouteCache }), []);
+  const cache = React.useMemo(
+    () => ({ current: new Map<string, RouteProp<ParamListBase>>() }),
+    []
+  );
 
-  cache.current = routes.reduce((acc, route) => {
+  const next = routes.reduce((acc, route) => {
     const previous = cache.current.get(route.key);
     const { state, ...routeWithoutState } = route;
 
@@ -53,16 +54,23 @@ export function useRouteCache<State extends NavigationState>(
       }
     }
 
-    Object.defineProperty(proxy, CHILD_STATE, {
-      enumerable: false,
-      configurable: true,
-      value: state,
-    });
+    // @ts-expect-error: this isn't in type definitions coz we want this private
+    if (proxy[CHILD_STATE] !== state) {
+      Object.defineProperty(proxy, CHILD_STATE, {
+        enumerable: false,
+        configurable: true,
+        value: state,
+      });
+    }
 
     acc.set(route.key, proxy);
 
     return acc;
-  }, new Map() as RouteCache);
+  }, new Map<string, RouteProp<ParamListBase>>());
+
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
 
-  return Array.from(cache.current.values());
+  return Array.from(next.values());
 }