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

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

@@ -93,7 +93,7 @@ export type DefaultNavigatorOptions<
               ScreenOptions,
               EventMap
             >,
-            RouteProp<ParamList>
+            ScreenRouteProp<ParamList>
           >
         >;
         children: React.ReactNode;
@@ -107,7 +107,7 @@ export type DefaultNavigatorOptions<
     | (
         | ScreenListeners<State, EventMap>
         | ((props: {
-            route: RouteProp<ParamList>;
+            route: ScreenRouteProp<ParamList>;
             navigation: Navigation;
           }) => ScreenListeners<State, EventMap>)
       )
@@ -120,7 +120,7 @@ export type DefaultNavigatorOptions<
     | (
         | ScreenOptions
         | ((props: {
-            route: RouteProp<ParamList>;
+            route: ScreenRouteProp<ParamList>;
             navigation: Navigation;
             theme: Theme;
           }) => ScreenOptions)
@@ -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
@@ -569,6 +569,13 @@ export type RouteProp<
   in out 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, any, any, any, any>,
   B extends NavigationProp<ParamListBase, any, any, any, any>,
@@ -662,7 +669,7 @@ export type ScreenLayoutArgs<
   in out ScreenOptions extends {},
   in out Navigation,
 > = {
-  route: RouteProp<ParamList, RouteName>;
+  route: ScreenRouteProp<ParamList, RouteName>;
   options: ScreenOptions;
   navigation: Navigation;
   theme: Theme;
@@ -724,16 +731,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 +750,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<
@@ -860,7 +867,7 @@ export type RouteGroupConfig<
     | (
         | ScreenOptions
         | ((props: {
-            route: RouteProp<ParamList, keyof ParamList>;
+            route: ScreenRouteProp<ParamList>;
             navigation: Navigation;
             theme: Theme;
           }) => ScreenOptions)
@@ -1147,27 +1154,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 +1433,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 +1483,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 +1519,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 +1646,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>