@react-navigation/core 8.0.0-alpha.19 → 8.0.0-alpha.20

package/src/getStateFromPath.tsx

@@ -8,7 +8,11 @@ import queryString from 'query-string';
 
 import { arrayStartsWith } from './arrayStartsWith';
 import { findFocusedRoute } from './findFocusedRoute';
-import { getPatternParts, type PatternPart } from './getPatternParts';
+import {
+  combinePatternParts,
+  getPatternParts,
+  type PatternPart,
+} from './getPatternParts';
 import { isArrayEqual } from './isArrayEqual';
 import type { PathConfig, PathConfigMap } from './types';
 import type {
@@ -31,6 +35,7 @@ type ParseConfig = Record<string, ParseConfigValue | undefined>;
 
 type RouteConfig = {
   screen: string;
+  order: number;
   regex?: RegExp | undefined;
   segments: string[];
   params: { screen: string; name?: string | undefined; index: number }[];
@@ -38,6 +43,7 @@ type RouteConfig = {
   parse?: ParseConfig | undefined;
   explicitParamNames?: Set<string> | undefined;
   hasNestedScreens: boolean;
+  shared: boolean;
 };
 
 type InitialRouteConfig = {
@@ -55,10 +61,13 @@ type ParsedRoute = {
   params?: Record<string, unknown> | undefined;
 };
 
+type RoutePatternPart = PatternPart & { screen: string };
+
 type ConfigResources = {
   initialRoutes: InitialRouteConfig[];
   configs: RouteConfig[];
   configsByScreen: Record<string, RouteConfig[]>;
+  configsByPattern: Record<string, RouteConfig[]>;
 };
 
 const INVALID_SCHEMA_RESULT_ERROR =
@@ -142,13 +151,28 @@ const getValidationResult = (
  */
 export function getStateFromPath<ParamList extends {}>(
   path: string,
-  options?: Options<ParamList>
+  options?: Options<ParamList>,
+  previous?: NavigationState
 ): ResultState | undefined {
-  const { initialRoutes, configs, configsByScreen } =
+  const { initialRoutes, configs, configsByScreen, configsByPattern } =
     getConfigResources(options);
 
   const screens = options?.screens;
 
+  // When a matched config is shared, the same pattern can resolve to multiple branches
+  // pick the one that best matches the current navigation state
+  const resolveSharedConfig = (config: RouteConfig) => {
+    if (config.shared) {
+      const candidates = configsByPattern[config.segments.join('/')];
+
+      if (candidates) {
+        return selectSharedConfig(config, candidates, previous, initialRoutes);
+      }
+    }
+
+    return config;
+  };
+
   let remaining = path
     .replace(/\/+/g, '/') // Replace multiple slash (//) with single ones
     .replace(/^\//, '') // Remove extra leading slash
@@ -203,11 +227,13 @@ export function getStateFromPath<ParamList extends {}>(
     const match = configs.find((config) => config.segments.join('/') === '');
 
     if (match) {
+      const config = resolveSharedConfig(match);
+
       return createNestedStateObject(
         path,
-        match.routeNames.map((name) => ({ name })),
+        config.routeNames.map((name) => ({ name })),
         initialRoutes,
-        match
+        config
       );
     }
 
@@ -223,7 +249,29 @@ export function getStateFromPath<ParamList extends {}>(
       continue;
     }
 
-    const state = createNestedStateObject(path, routes, initialRoutes, config);
+    let selectedConfig = resolveSharedConfig(config);
+    let selectedRoutes = routes;
+
+    if (selectedConfig !== config) {
+      const rematchedRoutes = matchAgainstConfig(
+        remaining,
+        selectedConfig,
+        configsByScreen
+      );
+
+      if (rematchedRoutes === undefined) {
+        selectedConfig = config;
+      } else {
+        selectedRoutes = rematchedRoutes;
+      }
+    }
+
+    const state = createNestedStateObject(
+      path,
+      selectedRoutes,
+      initialRoutes,
+      selectedConfig
+    );
 
     if (state !== undefined) {
       return state;
@@ -265,15 +313,18 @@ function prepareConfigResources(options?: Options<{}>) {
   checkForDuplicatedConfigs(configs);
 
   const configsByScreen: Record<string, RouteConfig[]> = {};
+  const configsByPattern: Record<string, RouteConfig[]> = {};
 
   for (const c of configs) {
     (configsByScreen[c.screen] ??= []).push(c);
+    (configsByPattern[c.segments.join('/')] ??= []).push(c);
   }
 
   return {
     initialRoutes,
     configs,
     configsByScreen,
+    configsByPattern,
   };
 }
 
@@ -301,6 +352,7 @@ function getSortedNormalizedConfigs(
         createNormalizedConfigs(key, screens, initialRoutes, [], [], [])
       )
     )
+    .map((config, order) => ({ ...config, order }))
     .sort((a, b) => {
       // Sort config from most specific to least specific:
       // - more segments
@@ -326,22 +378,25 @@ function getSortedNormalizedConfigs(
       }
 
       for (let i = 0; i < Math.max(a.segments.length, b.segments.length); i++) {
+        const aSegment = a.segments[i];
+        const bSegment = b.segments[i];
+
         // if b is longer, b gets higher priority
-        if (a.segments[i] == null) {
+        if (aSegment == null) {
           return 1;
         }
 
         // if a is longer, a gets higher priority
-        if (b.segments[i] == null) {
+        if (bSegment == null) {
           return -1;
         }
 
-        const aWildCard = a.segments[i] === '*';
-        const bWildCard = b.segments[i] === '*';
-        const aParam = a.segments[i].startsWith(':');
-        const bParam = b.segments[i].startsWith(':');
-        const aRegex = aParam && a.segments[i].includes('(');
-        const bRegex = bParam && b.segments[i].includes('(');
+        const aWildCard = aSegment === '*';
+        const bWildCard = bSegment === '*';
+        const aParam = aSegment.startsWith(':');
+        const bParam = bSegment.startsWith(':');
+        const aRegex = aParam && aSegment.includes('(');
+        const bRegex = bParam && bSegment.includes('(');
 
         // if both are wildcard or regex, we compare next component
         if ((aWildCard && bWildCard) || (aRegex && bRegex)) {
@@ -399,13 +454,13 @@ function checkForDuplicatedConfigs(configs: RouteConfig[]) {
           ? b.every((it, i) => a[i] === it)
           : a.every((it, i) => b[i] === it);
 
-      if (!intersects) {
+      if (!intersects && (!acc[pattern].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.`
+          )}'. Patterns must be unique and cannot resolve to more than one screen unless shared: true is specified.`
         );
       }
     }
@@ -434,10 +489,14 @@ const matchAgainstConfig = (
   let validationFailed = false;
   const matchedRoutes: ParsedRoute[] = [];
 
-  for (const routeName of config.routeNames) {
-    // Check matching name AND pattern in case same screen is used at different levels in config
-    const routeConfig = configsByScreen[routeName]?.find((c) =>
-      arrayStartsWith(config.segments, c.segments)
+  for (const [index, routeName] of config.routeNames.entries()) {
+    // Check matching name, route names and pattern in case same screen is used
+    // at different levels or branches in config
+    const routeConfig = configsByScreen[routeName]?.find(
+      (c) =>
+        index === c.routeNames.length - 1 &&
+        arrayStartsWith(config.routeNames, c.routeNames) &&
+        arrayStartsWith(config.segments, c.segments)
     );
 
     let params: Record<string, unknown> | undefined;
@@ -523,7 +582,7 @@ const createNormalizedConfigs = (
   screen: string,
   routeConfig: Record<string, string | PathConfig<{}>>,
   initials: InitialRouteConfig[],
-  paths: { screen: string; path: string }[],
+  parts: RoutePatternPart[],
   parentScreens: string[],
   routeNames: string[]
 ): RouteConfig[] => {
@@ -536,22 +595,28 @@ const createNormalizedConfigs = (
   const config = routeConfig[screen];
 
   if (typeof config === 'string') {
-    paths.push({ screen, path: config });
-    configs.push(createConfigItem(screen, [...routeNames], [...paths]));
+    const configParts = combinePatternParts(
+      parts,
+      getPatternParts(config).map((part) => ({ ...part, screen }))
+    );
+
+    configs.push(createConfigItem(screen, [...routeNames], configParts));
   } else if (typeof config === 'object') {
     // if an object is specified as the value (e.g. Foo: { ... }),
     // it can have `path` property and
     // it could have `screens` prop which has nested configs
     const nestedScreens = 'screens' in config ? config.screens : undefined;
     const hasNestedScreens = !!nestedScreens;
+    const currentParts =
+      typeof config.path === 'string'
+        ? combinePatternParts(
+            parts,
+            getPatternParts(config.path).map((part) => ({ ...part, screen })),
+            config.exact
+          )
+        : parts;
 
     if (typeof config.path === 'string') {
-      if (config.exact && config.path == null) {
-        throw new Error(
-          `Screen '${screen}' doesn't specify a 'path'. A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. \`path: ''\`.`
-        );
-      }
-
       // We should add alias configs after the main config
       // So unless they are more specific, main config will be matched first
       const aliasConfigs = [];
@@ -563,9 +628,13 @@ const createNormalizedConfigs = (
               createConfigItem(
                 screen,
                 [...routeNames],
-                [...paths, { screen, path: alias }],
+                combinePatternParts(
+                  parts,
+                  getPatternParts(alias).map((part) => ({ ...part, screen }))
+                ),
                 config.parse,
-                hasNestedScreens
+                hasNestedScreens,
+                false
               )
             );
           } else if (typeof alias === 'object') {
@@ -573,31 +642,31 @@ const createNormalizedConfigs = (
               createConfigItem(
                 screen,
                 [...routeNames],
-                alias.exact
-                  ? [{ screen, path: alias.path }]
-                  : [...paths, { screen, path: alias.path }],
+                combinePatternParts(
+                  parts,
+                  getPatternParts(alias.path).map((part) => ({
+                    ...part,
+                    screen,
+                  })),
+                  alias.exact
+                ),
                 alias.parse,
-                hasNestedScreens
+                hasNestedScreens,
+                alias.shared === true
               )
             );
           }
         }
       }
 
-      if (config.exact) {
-        // If it's an exact path, we don't need to keep track of the parent screens
-        // So we can clear it
-        paths.length = 0;
-      }
-
-      paths.push({ screen, path: config.path });
       configs.push(
         createConfigItem(
           screen,
           [...routeNames],
-          [...paths],
+          currentParts,
           config.parse,
-          hasNestedScreens
+          hasNestedScreens,
+          config.shared === true
         )
       );
 
@@ -631,7 +700,7 @@ const createNormalizedConfigs = (
           nestedConfig,
           nestedScreens as Record<string, string | PathConfig<{}>>,
           initials,
-          [...paths],
+          currentParts,
           [...parentScreens],
           routeNames
         );
@@ -649,17 +718,11 @@ const createNormalizedConfigs = (
 const createConfigItem = (
   screen: string,
   routeNames: string[],
-  paths: { screen: string; path: string }[],
+  parts: RoutePatternPart[],
   parse?: ParseConfig,
-  hasNestedScreens = false
+  hasNestedScreens = false,
+  shared = false
 ): RouteConfig => {
-  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 })));
-  }
-
   const regex = parts.length
     ? new RegExp(
         `^(${parts
@@ -691,6 +754,7 @@ const createConfigItem = (
 
   return {
     screen,
+    order: 0,
     regex,
     segments,
     params,
@@ -698,7 +762,87 @@ const createConfigItem = (
     parse,
     explicitParamNames: getExplicitParamNames(parse),
     hasNestedScreens,
+    shared,
+  };
+};
+
+const selectSharedConfig = (
+  match: RouteConfig,
+  candidates: RouteConfig[],
+  previous: NavigationState | PartialState<NavigationState> | undefined,
+  initialRoutes: InitialRouteConfig[]
+) => {
+  // Walk the previous state down to the focused leaf to get the active route path
+  const focusedRouteNames: string[] = [];
+
+  let current = previous;
+
+  while (current?.routes.length) {
+    const index =
+      typeof current.index === 'number'
+        ? current.index
+        : current.routes.length - 1;
+
+    const route = current.routes[index];
+
+    if (route == null) {
+      break;
+    }
+
+    focusedRouteNames.push(route.name);
+    current = route.state;
+  }
+
+  // Rank a candidate by how far it aligns with the focused path, then by
+  // how many of its levels match a configured initial route
+  const score = (routeNames: string[]) => {
+    let focused = 0;
+
+    while (
+      routeNames[focused] !== undefined &&
+      routeNames[focused] === focusedRouteNames[focused]
+    ) {
+      focused++;
+    }
+
+    let initial = 0;
+
+    for (const config of initialRoutes) {
+      if (
+        arrayStartsWith(routeNames, config.parentScreens) &&
+        routeNames[config.parentScreens.length] === config.initialRouteName
+      ) {
+        initial++;
+      }
+    }
+
+    return { focused, initial };
   };
+
+  let selected = match;
+  let best = { focused: -1, initial: -1 };
+
+  for (const candidate of candidates) {
+    if (!candidate.shared) {
+      continue;
+    }
+
+    const { focused, initial } = score(candidate.routeNames);
+
+    const better =
+      focused !== best.focused
+        ? focused > best.focused
+        : initial !== best.initial
+          ? initial > best.initial
+          : candidate.order < selected.order;
+
+    if (better) {
+      selected = candidate;
+      best = { focused, initial };
+    }
+  }
+
+  return selected;
 };
 
 // Try to find an initial route connected with the one passed
@@ -711,7 +855,14 @@ const findInitialRoute = (
     if (parentScreens.length === config.parentScreens.length) {
       let sameParents = true;
       for (let i = 0; i < parentScreens.length; i++) {
-        if (parentScreens[i].localeCompare(config.parentScreens[i]) !== 0) {
+        const parentScreen = parentScreens[i];
+        const configParentScreen = config.parentScreens[i];
+
+        if (
+          parentScreen == null ||
+          configParentScreen == null ||
+          parentScreen.localeCompare(configParentScreen) !== 0
+        ) {
           sameParents = false;
           break;
         }
@@ -764,7 +915,12 @@ const createNestedStateObject = (
   initialRoutes: InitialRouteConfig[],
   routeConfig?: RouteConfig
 ): InitialState | undefined => {
-  let route = routes.shift() as ParsedRoute;
+  let route = routes.shift();
+
+  if (route == null) {
+    return undefined;
+  }
+
   const parentScreens: string[] = [];
 
   let initialRoute = findInitialRoute(route.name, parentScreens, initialRoutes);
@@ -780,29 +936,48 @@ const createNestedStateObject = (
   if (routes.length > 0) {
     let nestedState = state;
 
-    while ((route = routes.shift() as ParsedRoute)) {
+    let nextRoute = routes.shift();
+
+    while (nextRoute != null) {
+      route = nextRoute;
       initialRoute = findInitialRoute(route.name, parentScreens, initialRoutes);
 
       const nestedStateIndex =
         nestedState.index || nestedState.routes.length - 1;
+      const nestedRoute = nestedState.routes[nestedStateIndex];
+
+      if (nestedRoute == null) {
+        throw new Error(`Couldn't find a route at index ${nestedStateIndex}.`);
+      }
 
-      nestedState.routes[nestedStateIndex].state = createStateObject(
+      nestedRoute.state = createStateObject(
         initialRoute,
         route,
         routes.length === 0
       );
 
       if (routes.length > 0) {
-        nestedState = nestedState.routes[nestedStateIndex]
-          .state as InitialState;
+        if (nestedRoute.state == null) {
+          throw new Error(
+            `Couldn't find nested state for route '${route.name}'.`
+          );
+        }
+
+        nestedState = nestedRoute.state;
       }
 
       parentScreens.push(route.name);
+      nextRoute = routes.shift();
     }
   }
 
-  route = findFocusedRoute(state) as ParsedRoute;
-  route.path = path.replace(/\/$/, '');
+  const focusedRoute = findFocusedRoute(state);
+
+  if (focusedRoute == null) {
+    return undefined;
+  }
+
+  focusedRoute.path = path.replace(/\/$/, '');
 
   const pathParamNames = new Set(
     routeConfig?.params
@@ -819,7 +994,7 @@ const createNestedStateObject = (
     pathParamNames,
     routeConfig?.explicitParamNames,
     routeConfig?.hasNestedScreens,
-    route.params
+    focusedRoute.params
   );
 
   if (!queryParams.valid) {
@@ -827,7 +1002,7 @@ const createNestedStateObject = (
   }
 
   if (queryParams.params) {
-    route.params = { ...route.params, ...queryParams.params };
+    focusedRoute.params = { ...focusedRoute.params, ...queryParams.params };
   }
 
   return state;
@@ -839,12 +1014,12 @@ const parseQueryParams = (
   pathParamNames: Set<string> = new Set(),
   explicitParamNames?: Set<string>,
   hasNestedScreens = false,
-  routeParams?: Record<string, unknown>
+  routeParams?: object
 ):
   | { valid: true; params?: Record<string, unknown> | undefined }
   | { valid: false } => {
   const query = path.split('?')[1];
-  const params: Record<string, unknown> = queryString.parse(query);
+  const params: Record<string, unknown> = query ? queryString.parse(query) : {};
 
   // Path params should always win over same-named query params.
   for (const name of pathParamNames) {
@@ -912,7 +1087,9 @@ const parseQueryParams = (
     hasNestedScreens &&
     !explicitParamNames?.has('screen') &&
     (typeof params.screen === 'string' ||
-      typeof routeParams?.screen === 'string')
+      (routeParams != null &&
+        'screen' in routeParams &&
+        typeof routeParams.screen === 'string'))
   ) {
     for (const name of NESTED_SCREEN_PARAM_NAMES) {
       if (!explicitParamNames?.has(name)) {

package/src/index.tsx

@@ -35,7 +35,45 @@ export {
 export { ThemeContext } from './theming/ThemeContext';
 export { ThemeProvider } from './theming/ThemeProvider';
 export { useTheme } from './theming/useTheme';
-export * from './types';
+export type {
+  CompositeNavigationProp,
+  CompositeScreenProps,
+  DefaultNavigatorOptions,
+  Descriptor,
+  EventArg,
+  EventConsumer,
+  EventEmitter,
+  EventListenerCallback,
+  EventMapBase,
+  EventMapCore,
+  GenericNavigation,
+  NavigationContainerProps,
+  NavigationContainerRef,
+  NavigationContainerRefWithCurrent,
+  NavigationHelpers,
+  NavigationListBase,
+  NavigationListForNavigator,
+  NavigationListForNested,
+  NavigationProp,
+  NavigatorScreenParams,
+  NavigatorTypeBagBase,
+  NavigatorTypeBagFor,
+  PathConfig,
+  PathConfigMap,
+  RootNavigator,
+  RootParamList,
+  RouteConfig,
+  RouteConfigComponent,
+  RouteConfigProps,
+  RouteForName,
+  RouteGroupConfig,
+  RouteProp,
+  ScreenLayoutArgs,
+  ScreenListeners,
+  Theme,
+  TypedNavigator,
+} from './types';
+export { PrivateValueStore } from './types';
 export { useFocusEffect } from './useFocusEffect';
 export { IsFocusedContext, useIsFocused } from './useIsFocused';
 export { useNavigation } from './useNavigation';