@react-navigation/core 8.0.0-alpha.24 → 8.0.0-alpha.25

package/src/getStateFromPath.tsx

@@ -43,6 +43,7 @@ type RouteConfig = {
   routeNames: string[];
   parse?: ParseConfig | undefined;
   explicitParamNames?: Set<string> | undefined;
+  pathParamNames: Set<string>;
   hasNestedScreens: boolean;
   shared: boolean;
 };
@@ -202,23 +203,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);
@@ -248,7 +247,29 @@ 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;
+  }
+
   for (const config of configs) {
+    // Regex matching is expensive, so skip configs that can't match this path.
+    if (
+      !canMatchFirstSegment(
+        config.segments[0],
+        firstDecodedSegment,
+        firstRawSegment
+      )
+    ) {
+      continue;
+    }
+
     const routes = matchAgainstConfig(remaining, config, configsByScreen);
 
     if (routes === undefined) {
@@ -287,6 +308,26 @@ export function getStateFromPath<ParamList extends {}>(
   return undefined;
 }
 
+const canMatchFirstSegment = (
+  configSegment: string | undefined,
+  decodedSegment: string | undefined,
+  rawSegment: string | undefined
+) => {
+  if (decodedSegment === undefined) {
+    return true;
+  }
+
+  if (configSegment === undefined) {
+    return false;
+  }
+
+  if (configSegment === '*' || configSegment.startsWith(':')) {
+    return true;
+  }
+
+  return configSegment === decodedSegment || configSegment === rawSegment;
+};
+
 /**
  * Reference to the last used config resources. This is used to avoid recomputing the config resources when the options are the same.
  */
@@ -295,11 +336,17 @@ const cachedConfigResources = new WeakMap<Options<{}>, ConfigResources>();
 function getConfigResources<ParamList extends {}>(
   options: Options<ParamList> | undefined
 ) {
-  if (!options) return prepareConfigResources();
+  if (!options) {
+    return prepareConfigResources();
+  }
 
   const cached = cachedConfigResources.get(options);
 
-  if (cached) return cached;
+  if (cached) {
+    return cached;
+  }
+
+  validatePathConfig(options);
 
   const resources = prepareConfigResources(options);
 
@@ -309,21 +356,23 @@ function getConfigResources<ParamList extends {}>(
 }
 
 function prepareConfigResources(options?: Options<{}>) {
-  if (options) {
-    validatePathConfig(options);
-  }
-
   const initialRoutes = getInitialRoutes(options);
   const configs = getSortedNormalizedConfigs(initialRoutes, options?.screens);
 
-  checkForDuplicatedConfigs(configs);
-
   const configsByScreen: Record<string, RouteConfig[]> = {};
   const configsByPattern: Record<string, RouteConfig[]> = {};
 
   for (const c of configs) {
     (configsByScreen[c.screen] ??= []).push(c);
-    (configsByPattern[c.pattern] ??= []).push(c);
+
+    const existing = configsByPattern[c.pattern];
+
+    if (existing) {
+      checkForDuplicatedConfigs(existing[existing.length - 1], c);
+      existing.push(c);
+    } else {
+      configsByPattern[c.pattern] = [c];
+    }
   }
 
   return {
@@ -453,37 +502,31 @@ function getSortedNormalizedConfigs(
   });
 }
 
-function checkForDuplicatedConfigs(configs: RouteConfig[]) {
-  // Check for duplicate patterns in the config
-  const patterns: Record<string, RouteConfig> = {};
-
-  for (const config of configs) {
-    const pattern = config.pattern;
-    const existing = patterns[pattern];
-
-    if (existing) {
-      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
-          ? b.every((it, i) => a[i] === it)
-          : a.every((it, i) => b[i] === it);
-
-      if (!intersects && (!existing.shared || !config.shared)) {
-        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 unless shared: true is specified.`
-        );
-      }
-    }
+// Throw if two configs resolve to the same pattern but conflicting screens
+function checkForDuplicatedConfigs(
+  existing: RouteConfig | undefined,
+  config: RouteConfig
+) {
+  if (!existing) {
+    return;
+  }
 
-    patterns[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 && (!existing.shared || !config.shared)) {
+    throw new Error(
+      `Found conflicting screens with the same pattern. The pattern '${
+        config.pattern
+      }' resolves to both '${a.join(' > ')}' and '${b.join(
+        ' > '
+      )}'. Patterns must be unique and cannot resolve to more than one screen unless shared: true is specified.`
+    );
   }
 }
 
@@ -521,15 +564,13 @@ const matchAgainstConfig = (
     if (routeConfig && match.groups) {
       params = {};
 
-      for (const key in match.groups) {
-        const value = match.groups[key];
-        const index = Number(key.replace(PARAM_GROUP_PREFIX, ''));
-        const param = routeConfig.params.find((it) => it.index === index);
-
-        if (!param || param.screen !== routeName) {
+      for (const param of routeConfig.params) {
+        if (param.screen !== routeName) {
           continue;
         }
 
+        const value = match.groups[`${PARAM_GROUP_PREFIX}${param.index}`];
+
         if (value == null) {
           params[param.name] = undefined;
           hasParams = true;
@@ -748,6 +789,7 @@ const createConfigItem = (
 
   const segments: string[] = [];
   const params: RouteConfig['params'] = [];
+  const pathParamNames = new Set<string>();
 
   if (parts.length) {
     let regexString = '^(';
@@ -765,6 +807,10 @@ const createConfigItem = (
           screen: part.screen,
           name: part.param,
         });
+
+        if (part.screen === screen) {
+          pathParamNames.add(part.param);
+        }
       } else {
         regexString += `${part.segment === '*' ? '.*' : escape(part.segment)}\\/`;
       }
@@ -788,6 +834,7 @@ const createConfigItem = (
     routeNames,
     parse,
     explicitParamNames: getExplicitParamNames(parse),
+    pathParamNames,
     hasNestedScreens,
     shared,
   };
@@ -1006,16 +1053,10 @@ const createNestedStateObject = (
 
   focusedRoute.path = path.replace(/\/$/, '');
 
-  const pathParamNames = new Set(
-    routeConfig?.params
-      .filter((param) => param.screen === routeConfig.screen)
-      .map((param) => param.name)
-  );
-
   const queryParams = parseQueryParams(
     path,
     routeConfig?.parse,
-    pathParamNames,
+    routeConfig?.pathParamNames,
     routeConfig?.explicitParamNames,
     routeConfig?.hasNestedScreens,
     focusedRoute.params

package/src/index.tsx

@@ -4,6 +4,7 @@ export {
   createNavigatorFactory,
   type TypedNavigatorFactory,
 } from './createNavigatorFactory';
+export { getLoaderForState as UNSTABLE_getLoaderForState } from './DataLoading';
 export { findFocusedRoute } from './findFocusedRoute';
 export { getActionFromState } from './getActionFromState';
 export { getFocusedRouteNameFromRoute } from './getFocusedRouteNameFromRoute';
@@ -59,6 +60,7 @@ export type {
   NavigatorScreenParams,
   NavigatorTypeBagBase,
   NavigatorTypeBagFor,
+  NestedNavigatorsForParamList,
   PathConfig,
   PathConfigMap,
   RootNavigator,

package/src/types.tsx

@@ -429,7 +429,7 @@ type NavigationHelpersCommon<
 
 type ParamType<
   ParamList extends {},
-  RouteName extends keyof ParamList | unknown,
+  RouteName,
   IsPartial extends boolean = false,
 > = RouteName extends keyof ParamList
   ? ParamList[RouteName] extends undefined
@@ -724,16 +724,16 @@ export type RouteConfigComponent<
        * React component to render for this screen.
        */
       component: ScreenComponentType<ParamList, RouteName>;
-      getComponent?: never | undefined;
-      children?: never | undefined;
+      getComponent?: never;
+      children?: never;
     }
   | {
       /**
        * Lazily get a React component to render for this screen.
        */
       getComponent: () => ScreenComponentType<ParamList, RouteName>;
-      component?: never | undefined;
-      children?: never | undefined;
+      component?: never;
+      children?: never;
     }
   | {
       /**
@@ -743,8 +743,8 @@ export type RouteConfigComponent<
         route: RouteProp<ParamList, RouteName>;
         navigation: any;
       }) => React.ReactNode;
-      component?: never | undefined;
-      getComponent?: never | undefined;
+      component?: never;
+      getComponent?: never;
     };
 
 export type RouteConfigProps<
@@ -1147,27 +1147,18 @@ type NavigationListForScreenParams<
   RouteName extends keyof ParamList,
   ExcludedRouteNames,
   Parent extends NavigationProp<any, any, any, any, any> | undefined,
-> =
-  T extends PrivateValueStore<[any, any, any, any]>
-    ? T extends NavigatorLike
-      ? NavigationListForNestedInternal<
-          T,
-          GenericNavigationComposite<ParamList, RouteName, Parent>
-        >
-      : NavigationListForParamListScreenParams<
-          T,
-          ParamList,
-          RouteName,
-          ExcludedRouteNames,
-          Parent
-        >
-    : NavigationListForParamListScreenParams<
-        T,
-        ParamList,
-        RouteName,
-        ExcludedRouteNames,
-        Parent
-      >;
+> = T extends PrivateValueStore<[any, any, any, any]> & NavigatorLike
+  ? NavigationListForNestedInternal<
+      T,
+      GenericNavigationComposite<ParamList, RouteName, Parent>
+    >
+  : NavigationListForParamListScreenParams<
+      T,
+      ParamList,
+      RouteName,
+      ExcludedRouteNames,
+      Parent
+    >;
 
 type NavigationListForParamListScreenParams<
   T extends {},
@@ -1435,20 +1426,39 @@ export type NavigatorTypeBagFor<
   ParamList extends {},
 > = TypeBag & { ParamList: ParamList };
 
-type TypedNavigatorComponent<Bag extends NavigatorTypeBagBase> =
+export type NavigatorProps<
+  ParamList extends ParamListBase,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  Navigation,
+  Navigator extends React.ComponentType<any>,
+> = Omit<
+  React.ComponentProps<Navigator>,
+  keyof DefaultNavigatorOptions<any, any, any, any, any>
+> &
+  DefaultNavigatorOptions<
+    ParamList,
+    State,
+    ScreenOptions,
+    EventMap,
+    Navigation
+  >;
+
+type TypedNavigatorStaticComponent<Bag extends NavigatorTypeBagBase> =
   React.ComponentType<
-    Omit<
-      React.ComponentProps<
-        TypedNavigatorInternal<
+    Partial<
+      Omit<
+        NavigatorProps<
           Bag['ParamList'],
           Bag['State'],
           Bag['ScreenOptions'],
           Bag['EventMap'],
-          Bag['NavigationList'],
+          Bag['NavigationList'][keyof Bag['ParamList']],
           Bag['Navigator']
-        >['Navigator']
-      >,
-      'children'
+        >,
+        'children'
+      >
     >
   >;
 
@@ -1466,10 +1476,10 @@ type TypedNavigatorStatic<
   config: Config;
   with: (
     Component: React.ComponentType<{
-      Navigator: TypedNavigatorComponent<Bag>;
+      Navigator: TypedNavigatorStaticComponent<Bag>;
     }>
   ) => TypedNavigatorStaticDecorated<Bag, Config>;
-  getComponent: () => TypedNavigatorComponent<Bag>;
+  getComponent: () => TypedNavigatorStaticComponent<Bag>;
 };
 
 export type TypedNavigator<
@@ -1502,17 +1512,14 @@ type TypedNavigatorInternal<
    * Navigator component which manages the child screens.
    */
   Navigator: React.ComponentType<
-    Omit<
-      React.ComponentProps<Navigator>,
-      keyof DefaultNavigatorOptions<any, any, any, any, any>
-    > &
-      DefaultNavigatorOptions<
-        ParamList,
-        State,
-        ScreenOptions,
-        EventMap,
-        NavigationList[keyof ParamList]
-      >
+    NavigatorProps<
+      ParamList,
+      State,
+      ScreenOptions,
+      EventMap,
+      NavigationList[keyof ParamList],
+      Navigator
+    >
   >;
   /**
    * Component used for grouping multiple route configuration.
@@ -1632,7 +1639,12 @@ type PathConfigAlias<Params> = {
 };
 
 export type PathConfig<Params> = FlatType<
-  Partial<PathConfigAlias<Params>> & {
+  Partial<Omit<PathConfigAlias<Params>, 'path'>> & {
+    /**
+     * Path string to match against.
+     * e.g. `/users/:id` will match `/users/1` and extract `id` param as `1`.
+     */
+    path?: string | undefined;
     /**
      * 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)`.

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/useNavigation.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
 
 import { NavigationContainerRefContext } from './NavigationContainerRefContext';
-import {
-  NavigationContext,
-  NavigationRouteNameContext,
-} from './NavigationProvider';
+import { NavigationContext } from './NavigationProvider';
 import type {
   GenericNavigation,
   NavigationListForNavigator,
@@ -46,23 +43,7 @@ export function useNavigation(name?: string): unknown {
     return navigation ?? root;
   }
 
-  const routeName = React.use(NavigationRouteNameContext);
-
-  // Generally, this condition isn't needed as `getParent(name)` works for current screen
-  // However, it'll throw if the hook is used in a preloaded screen
-  if (routeName === name) {
-    if (navigation === undefined) {
-      throw new Error(
-        `Couldn't find a navigation object for '${name}'. This is not expected.`
-      );
-    }
-
-    return navigation;
-  }
-
-  // We get parent first so that `getParent(name)` is not called in preloaded screens
-  // It's ok since `getParent` also works for current screen, so parent is not skipped
-  const parent = navigation?.getParent()?.getParent(name);
+  const parent = navigation?.getParent(name);
 
   if (parent === undefined) {
     throw new Error(

package/src/useNavigationBuilder.tsx

@@ -583,7 +583,7 @@ export function useNavigationBuilder<
 
   const previousRouteKeyListRef = React.useRef(routeKeyList);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     previousRouteKeyListRef.current = routeKeyList;
   });
 
@@ -789,19 +789,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;
-
-  React.useLayoutEffect(() => {
-    stateRef.current = null;
-  });
-
   const getState = useLatestCallback((): State => {
     const currentState = getCurrentState();
 
@@ -956,9 +943,9 @@ export function useNavigationBuilder<
     onAction,
     onUnhandledAction,
     getState,
+    state,
     emitter,
     router,
-    stateRef,
   });
 
   useFocusedListenersChildrenAdapter({
@@ -1013,7 +1000,10 @@ export function useNavigationBuilder<
     return (
       <NavigationMetaContext.Provider value={undefined}>
         <NavigationHelpersContext.Provider value={navigation}>
-          <NavigationStateListenerProvider state={state}>
+          <NavigationStateListenerProvider
+            state={state}
+            getState={navigation.getState}
+          >
             <FocusedRouteKeyContext.Provider value={focusedRoute.key}>
               <PreventRemoveProvider>{element}</PreventRemoveProvider>
             </FocusedRouteKeyContext.Provider>

package/src/useNavigationCache.tsx

@@ -91,27 +91,15 @@ export function useNavigationCache<
     [getState, parentNavigationHelpers, navigation, setOptions, emitter]
   );
 
-  cache.current = routes.reduce<
+  const next = routes.reduce<
     NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
   >((acc, route) => {
     const previous = cache.current[route.key];
 
-    type Thunk =
-      | NavigationAction
-      | ((state: State) => NavigationAction | null | undefined);
-
     if (previous) {
       // If a cached navigation object already exists, reuse it
       acc[route.key] = previous;
     } else {
-      const dispatch = (thunk: Thunk) => {
-        const action = typeof thunk === 'function' ? thunk(getState()) : thunk;
-
-        if (action != null) {
-          navigation.dispatch({ source: route.key, ...action });
-        }
-      };
-
       const withStack = (callback: () => void) => {
         let isStackSet = false;
 
@@ -134,6 +122,23 @@ export function useNavigationCache<
         }
       };
 
+      const dispatch = (
+        thunk:
+          | NavigationAction
+          | ((state: State) => NavigationAction | null | undefined)
+      ) => {
+        withStack(() =>
+          React.startTransition(() => {
+            const action =
+              typeof thunk === 'function' ? thunk(getState()) : thunk;
+
+            if (action != null) {
+              navigation.dispatch({ source: route.key, ...action });
+            }
+          })
+        );
+      };
+
       const actions = {
         ...router.actionCreators,
         ...CommonActions,
@@ -142,10 +147,8 @@ export function useNavigationCache<
       const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
         (acc, name) => {
           acc[name] = (...args: any) =>
-            withStack(() =>
-              // @ts-expect-error: name is a valid key, but TypeScript is dumb
-              dispatch(actions[name](...args))
-            );
+            // @ts-expect-error: name is a valid key, but TypeScript is dumb
+            dispatch(actions[name](...args));
 
           return acc;
         },
@@ -160,7 +163,7 @@ export function useNavigationCache<
         ...helpers,
         // FIXME: too much work to fix the types for now
         ...(emitter.create(route.key) as any),
-        dispatch: (thunk: Thunk) => withStack(() => dispatch(thunk)),
+        dispatch,
         getParent: (routeName) => {
           if (routeName === route.name) {
             // If the passed route name is the same as the current route's name,
@@ -197,5 +200,9 @@ export function useNavigationCache<
     return acc;
   }, {});
 
-  return cache.current;
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
+  return next;
 }