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

package/src/SceneView.tsx

@@ -6,7 +6,6 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { EnsureSingleNavigator } from './EnsureSingleNavigator';
 import { isArrayEqual } from './isArrayEqual';
 import {
@@ -105,37 +104,6 @@ export function SceneView<
 
   const getIsInitial = React.useCallback(() => isInitialRef.current, []);
 
-  const [consumedParams, setConsumedParams] = React.useState<WeakMap<
-    object,
-    true
-  > | null>(null);
-
-  const consumedParamsContext = React.useMemo(
-    () => ({
-      isConsumed: (params: object) => {
-        if (consumedParams) {
-          return consumedParams.has(params);
-        }
-
-        return false;
-      },
-      setConsumed: (params: object) => {
-        setConsumedParams((prev) => {
-          if (prev && prev.has(params)) {
-            return prev;
-          }
-
-          const map = new WeakMap<object, true>();
-
-          map.set(params, true);
-
-          return map;
-        });
-      },
-    }),
-    [consumedParams]
-  );
-
   const parentFocusedRouteState = React.use(NavigationFocusedRouteStateContext);
 
   const focusedRouteState = React.useMemo(() => {
@@ -205,25 +173,23 @@ export function SceneView<
     : screen.component;
 
   return (
-    <ConsumedParamsContext.Provider value={consumedParamsContext}>
-      <NavigationStateContext.Provider value={context}>
-        <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
-          <EnsureSingleNavigator>
-            <StaticContainer
-              name={screen.name}
-              render={ScreenComponent || screen.children}
-              navigation={navigation}
-              route={route}
-            >
-              {ScreenComponent !== undefined ? (
-                <ScreenComponent navigation={navigation} route={route} />
-              ) : screen.children !== undefined ? (
-                screen.children({ navigation, route })
-              ) : null}
-            </StaticContainer>
-          </EnsureSingleNavigator>
-        </NavigationFocusedRouteStateContext.Provider>
-      </NavigationStateContext.Provider>
-    </ConsumedParamsContext.Provider>
+    <NavigationStateContext.Provider value={context}>
+      <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
+        <EnsureSingleNavigator>
+          <StaticContainer
+            name={screen.name}
+            render={ScreenComponent || screen.children}
+            navigation={navigation}
+            route={route}
+          >
+            {ScreenComponent !== undefined ? (
+              <ScreenComponent navigation={navigation} route={route} />
+            ) : screen.children !== undefined ? (
+              screen.children({ navigation, route })
+            ) : null}
+          </StaticContainer>
+        </EnsureSingleNavigator>
+      </NavigationFocusedRouteStateContext.Provider>
+    </NavigationStateContext.Provider>
   );
 }

package/src/StaticNavigation.tsx

@@ -32,7 +32,9 @@ import type {
   HasArguments,
   InferParamsFromLinking,
   KeysOf,
+  NoExcessCallbackReturn,
   NoExcessObject,
+  NoExcessValue,
   NotUndefinedObject,
   StandardSchemaV1,
   UnionToIntersection,
@@ -53,19 +55,23 @@ type ParamsForScreenComponent<T> = [T] extends [(...args: any[]) => any]
     : undefined
   : ScreenComponentParams<T>;
 
-// If every nested route's params include `undefined`, the nested navigator
-// itself can be omitted. Otherwise, require `NavigatorScreenParams`.
+// If the initial route's params include `undefined`, the nested navigator itself can be optional.
+// If no initial route is specified, check if every nested route's params include `undefined`.
+// Otherwise the nested navigator needs to be required.
 type ParamsForNestedNavigator<
   T extends { config: any },
   ParamList extends {} = StaticParamList<T>,
   Params = NavigatorScreenParams<ParamList>,
+  RouteNames extends keyof ParamList = T['config'] extends {
+    initialRouteName: infer RouteName extends keyof ParamList;
+  }
+    ? RouteName
+    : keyof ParamList,
 > = {
-  // Map each route to `never` when params are optional, or name when params are required
-  // If every route has optional params, the resulting union is `never`
-  [RouteName in keyof ParamList]-?: undefined extends ParamList[RouteName]
+  [RouteName in RouteNames]-?: undefined extends ParamList[RouteName]
     ? never
     : RouteName;
-}[keyof ParamList] extends never
+}[RouteNames] extends never
   ? Params | undefined
   : Params;
 
@@ -132,6 +138,8 @@ type ParamListForScreens<Screens> = {
     any,
     any,
     any,
+    any,
+    any,
     any
   >
     ? ParamsForConfig<Linking, Screen>
@@ -146,22 +154,22 @@ type ParamListForGroups<Groups> = Groups extends {
   ? ParamListForScreens<UnionToIntersection<Screens>>
   : {};
 
-type StaticRoute<Params, P = AnyToUnknown<Params>> = Readonly<
-  Omit<Route<string>, 'params'> &
-    (undefined extends Params
-      ? {
-          /**
-           * Params for this route
-           */
-          params?: P extends object ? Readonly<P> : P;
-        }
-      : {
-          /**
-           * Params for this route
-           */
-          params: Readonly<P>;
-        })
->;
+type StaticRouteBase = Readonly<Omit<Route<string>, 'params'>>;
+
+type StaticRoute<Params, P = AnyToUnknown<Params>> = StaticRouteBase &
+  (undefined extends Params
+    ? {
+        /**
+         * Params for this route
+         */
+        readonly params?: P extends object ? Readonly<P> : P;
+      }
+    : {
+        /**
+         * Params for this route
+         */
+        readonly params: Readonly<P>;
+      });
 
 type StaticScreenConfigLinkingAlias = {
   /**
@@ -193,7 +201,7 @@ type StaticScreenConfigLinkingAlias = {
   >;
   /**
    * 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
@@ -246,15 +254,17 @@ export type StaticScreenConfigScreen =
   | React.ComponentType<any>
   | StaticNavigation<any>;
 
-export type StaticScreenConfig<
-  Linking extends StaticScreenConfigLinking,
-  Screen,
-  State extends NavigationState,
-  ScreenOptions extends {},
-  EventMap extends EventMapBase,
-  Navigation,
-  Params = ParamsForConfig<Linking, Screen>,
-> = {
+export interface StaticScreenConfig<
+  out Linking extends StaticScreenConfigLinking,
+  out Screen,
+  in out State extends NavigationState,
+  in out ScreenOptions extends {},
+  in out EventMap extends EventMapBase,
+  in out Navigation,
+  in out Params = ParamsForConfig<Linking, Screen>,
+  in out ProvidedOptions extends {} = {},
+  in out ProvidedListeners extends {} = {},
+> {
   /**
    * Static navigation config or Component to render for the screen.
    */
@@ -291,7 +301,7 @@ export type StaticScreenConfig<
         route: StaticRoute<Params>;
         navigation: Navigation;
         theme: Theme;
-      }) => ScreenOptions);
+      }) => NoExcessCallbackReturn<ProvidedOptions, ScreenOptions>);
 
   /**
    * Event listeners for this screen.
@@ -310,7 +320,10 @@ export type StaticScreenConfig<
     | ((props: {
         route: StaticRoute<Params>;
         navigation: Navigation;
-      }) => ScreenListeners<State, EventMap>);
+      }) => NoExcessCallbackReturn<
+        ProvidedListeners,
+        ScreenListeners<State, EventMap>
+      >);
 
   /**
    * Layout for this screen.
@@ -392,14 +405,13 @@ export type StaticScreenConfig<
     name: string;
     params: AnyToUnknown<Params>;
   }) => Promise<void>;
-};
+}
 
 export type StaticScreenFactory<in out Bag extends NavigatorTypeBagBase> = <
   const Linking extends StaticScreenConfigLinking,
   const Screen extends StaticScreenConfigScreen,
-  const ProvidedOptions extends
-    | Bag['ScreenOptions']
-    | ((...args: never[]) => unknown) = Bag['ScreenOptions'],
+  ProvidedOptions extends {} = {},
+  ProvidedListeners extends {} = {},
 >(
   config: StaticScreenConfig<
     Linking,
@@ -407,11 +419,11 @@ export type StaticScreenFactory<in out Bag extends NavigatorTypeBagBase> = <
     Bag['State'],
     Bag['ScreenOptions'],
     Bag['EventMap'],
-    Bag['NavigationList'][keyof Bag['ParamList']]
-  > & {
-    options?: ProvidedOptions &
-      NoExcessOptions<ProvidedOptions, Bag['ScreenOptions']>;
-  }
+    Bag['NavigationList'][keyof Bag['ParamList']],
+    ParamsForConfig<Linking, Screen>,
+    ProvidedOptions,
+    ProvidedListeners
+  >
 ) => StaticScreenConfig<
   Linking,
   Screen,
@@ -446,7 +458,9 @@ type StaticConfigScreens<
         ScreenOptions,
         EventMap,
         NavigationList[RouteName],
-        any
+        any,
+        {},
+        {}
       >;
 };
 
@@ -529,23 +543,26 @@ export type StaticConfig<
       }
   );
 
-type NoExcessOptions<Provided, Allowed extends {}> = Provided extends (
-  ...args: never[]
-) => infer Return
-  ? (...args: never[]) => Allowed & NoExcessObject<Return, Allowed>
-  : NoExcessObject<Provided, Allowed>;
-
-type NoExcessScreen<Screen, ScreenOptions extends {}> = Screen extends {
-  screen: unknown;
-  options: unknown;
-}
-  ? { options: NoExcessOptions<Screen['options'], ScreenOptions> }
-  : unknown;
+type NoExcessScreen<
+  Screen,
+  ScreenOptions extends {},
+  Listeners extends {},
+> = (Screen extends { screen: unknown; options: unknown }
+  ? { options: NoExcessValue<Screen['options'], ScreenOptions> }
+  : unknown) &
+  (Screen extends { screen: unknown; listeners: unknown }
+    ? { listeners: NoExcessValue<Screen['listeners'], Listeners> }
+    : unknown);
 
-type NoExcessScreens<Screens, ScreenOptions extends {}> = {
+type NoExcessScreens<
+  Screens,
+  ScreenOptions extends {},
+  Listeners extends {},
+> = {
   [RouteName in keyof Screens]: NoExcessScreen<
     Screens[RouteName],
-    ScreenOptions
+    ScreenOptions,
+    Listeners
   >;
 };
 
@@ -553,6 +570,7 @@ type NoExcessGroups<
   Groups,
   Bag extends NavigatorTypeBagBase,
   ScreenOptions extends {},
+  Listeners extends {},
 > = {
   [GroupName in keyof Groups]: NoExcessObject<
     Groups[GroupName],
@@ -564,7 +582,7 @@ type NoExcessGroups<
       NavigationListBase<ParamListBase>
     >
   > &
-    NoExcessStaticConfig<Groups[GroupName], Bag, ScreenOptions>;
+    NoExcessStaticConfig<Groups[GroupName], Bag, ScreenOptions, Listeners>;
 };
 
 // Each property is probed with `Config extends { key: infer X }` and the results are intersected.
@@ -574,19 +592,25 @@ export type NoExcessStaticConfig<
   Config,
   Bag extends NavigatorTypeBagBase,
   ScreenOptions extends {} = Bag['ScreenOptions'],
+  Listeners extends {} = ScreenListeners<Bag['State'], Bag['EventMap']>,
 > = (Config extends { screenOptions: infer ProvidedOptions }
   ? {
-      screenOptions: NoExcessOptions<ProvidedOptions, ScreenOptions>;
+      screenOptions: NoExcessValue<ProvidedOptions, ScreenOptions>;
     }
   : unknown) &
+  (Config extends { screenListeners: infer ProvidedListeners }
+    ? {
+        screenListeners: NoExcessValue<ProvidedListeners, Listeners>;
+      }
+    : unknown) &
   (Config extends { screens: infer Screens }
     ? {
-        screens: NoExcessScreens<Screens, ScreenOptions>;
+        screens: NoExcessScreens<Screens, ScreenOptions, Listeners>;
       }
     : unknown) &
   (Config extends { groups: infer Groups }
     ? {
-        groups: NoExcessGroups<Groups, Bag, ScreenOptions>;
+        groups: NoExcessGroups<Groups, Bag, ScreenOptions, Listeners>;
       }
     : unknown);
 
@@ -1138,8 +1162,8 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
 
                 screenConfig.path = normalizePath(
                   key
-                    .replace(/([A-Z]+)/g, '-$1')
-                    .replace(/^-/, '')
+                    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+                    .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
                     .toLowerCase()
                 );
               }

package/src/findFocusedRoute.tsx

@@ -14,7 +14,7 @@ export function findFocusedRoute(state: InitialState): Result {
 
   while (current != null) {
     const route: InitialState['routes'][number] | undefined =
-      current.routes[current.index ?? 0];
+      current.routes[current.index ?? current.routes.length - 1];
 
     if (route?.state == null) {
       return route;

package/src/getActionFromState.tsx

@@ -195,11 +195,16 @@ export function getActionFromState(
   };
 }
 
-const createNormalizedConfigItem = (config: PathConfig<object> | string) =>
+const createNormalizedConfigItem = (
+  config: PathConfig<object> | string
+): ConfigItem =>
   typeof config === 'object' && config != null
     ? {
         initialRouteName:
-          'initialRouteName' in config ? config.initialRouteName : undefined,
+          'initialRouteName' in config &&
+          typeof config.initialRouteName === 'string'
+            ? config.initialRouteName
+            : undefined,
         screens:
           'screens' in config && config.screens != null
             ? createNormalizedConfigs(config.screens)
@@ -209,7 +214,6 @@ const createNormalizedConfigItem = (config: PathConfig<object> | string) =>
 
 const createNormalizedConfigs = (options: PathConfigMap<object>) =>
   Object.entries(options).reduce<Record<string, ConfigItem>>((acc, [k, v]) => {
-    // @ts-expect-error -we can't properly type this
     acc[k] = createNormalizedConfigItem(v);
     return acc;
   }, {});

package/src/getPathFromState.tsx

@@ -16,12 +16,22 @@ type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 
 type StringifyConfig = Record<string, ((value: unknown) => string) | undefined>;
 
+type SerializedParamValue = string | string[] | null;
+
 type ConfigItem = {
   parts?: PatternPart[] | undefined;
+  ownParts: PatternPart[];
   stringify?: StringifyConfig | undefined;
   screens?: Record<string, ConfigItem> | undefined;
 };
 
+const serializeParamValue = (value: unknown): SerializedParamValue =>
+  value === null
+    ? null
+    : Array.isArray(value)
+      ? value.map(String)
+      : String(value);
+
 const encodePathParam = (value: string) => {
   let result = '';
 
@@ -170,8 +180,6 @@ export function getPathFromState<ParamList extends {}>(
   let path = '/';
   let current: State | undefined = state;
 
-  const allParams: Record<string, string> = {};
-
   while (current) {
     let index: number = typeof current.index === 'number' ? current.index : 0;
 
@@ -186,7 +194,11 @@ export function getPathFromState<ParamList extends {}>(
 
     let parts: PatternPart[] | undefined;
 
-    let focusedParams: Record<string, string> | undefined;
+    // Values for each pattern part object, so the same param name
+    // at different nesting levels gets the value from its own level
+    const partValues = new Map<PatternPart, SerializedParamValue | undefined>();
+
+    let focusedParams: Record<string, SerializedParamValue> | undefined;
     let currentOptions = configs;
 
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
@@ -203,12 +215,14 @@ export function getPathFromState<ParamList extends {}>(
 
       parts = config.parts;
 
+      const ownParts = config.ownParts;
+
       nestedRouteNames.push(route.name);
 
       if (route.params) {
         const options = config;
         const params = route.params as Record<string, unknown>;
-        const currentParams: Record<string, string> = {};
+        const currentParams: Record<string, SerializedParamValue> = {};
 
         for (const key in params) {
           const value = params[key];
@@ -216,7 +230,7 @@ export function getPathFromState<ParamList extends {}>(
           if (value === undefined) {
             let optional = false;
 
-            for (const part of options.parts ?? []) {
+            for (const part of ownParts) {
               if (part.param === key) {
                 optional = part.optional === true;
                 break;
@@ -228,39 +242,52 @@ export function getPathFromState<ParamList extends {}>(
             }
           }
 
-          const stringify = options.stringify?.[key] ?? String;
+          const stringify = options.stringify?.[key];
 
-          currentParams[key] = stringify(value);
+          currentParams[key] = stringify
+            ? stringify(value)
+            : serializeParamValue(value);
         }
 
-        if (parts?.length) {
-          Object.assign(allParams, currentParams);
+        const claimedParams = new Set<string>();
+
+        for (const part of ownParts) {
+          if (part.param && part.param in currentParams) {
+            const value = currentParams[part.param];
+
+            if (value !== undefined) {
+              partValues.set(part, value);
+              claimedParams.add(part.param);
+            }
+          }
         }
 
         if (focusedRoute === route) {
           // If this is the focused route, keep the params for later use
           // We save it here since it's been stringified already
+          // Params claimed by the pattern shouldn't be repeated in the query string
           focusedParams = {};
 
           for (const key in currentParams) {
-            let inPattern = false;
-
-            for (const part of parts ?? []) {
-              if (part.param === key) {
-                inPattern = true;
-                break;
-              }
-            }
-
             const value = currentParams[key];
 
-            if (!inPattern && value !== undefined && value !== 'undefined') {
+            if (
+              !claimedParams.has(key) &&
+              value !== undefined &&
+              value !== 'undefined'
+            ) {
               focusedParams[key] = value;
             }
           }
         }
       }
 
+      for (const part of ownParts) {
+        if (part.param && !partValues.has(part)) {
+          partValues.set(part, undefined);
+        }
+      }
+
       // If there is no `screens` property or no nested state, we return pattern
       const routeState = getRouteState(route, config);
 
@@ -298,7 +325,9 @@ export function getPathFromState<ParamList extends {}>(
       if (parts) {
         let index = 0;
 
-        for (const { segment, param, optional } of parts) {
+        for (const part of parts) {
+          const { segment, param, optional } = part;
+
           if (index > 0) {
             path += '/';
           }
@@ -315,7 +344,7 @@ export function getPathFromState<ParamList extends {}>(
 
           // If the path has a pattern for a param, put the param in the path
           if (param) {
-            const value = allParams[param];
+            const value = partValues.get(part);
 
             if (value === undefined && optional) {
               // Optional params without value assigned in route.params should be ignored
@@ -341,7 +370,7 @@ export function getPathFromState<ParamList extends {}>(
       const params = focusedRoute.params as Record<string, unknown>;
 
       for (const key in params) {
-        const value = String(params[key]);
+        const value = serializeParamValue(params[key]);
 
         if (value !== 'undefined') {
           focusedParams[key] = value;
@@ -385,14 +414,13 @@ const createConfigItem = (
   parentParts?: PatternPart[]
 ): ConfigItem => {
   if (typeof config === 'string') {
-    // If a string is specified as the value of the key(e.g. Foo: '/path'), use it as the pattern
-    const parts = getPatternParts(config);
+    const ownParts = getPatternParts(config);
 
     if (parentParts) {
-      return { parts: [...parentParts, ...parts] };
+      return { parts: [...parentParts, ...ownParts], ownParts };
     }
 
-    return { parts };
+    return { parts: ownParts, ownParts };
   }
 
   if (config.exact && config.path === undefined) {
@@ -403,14 +431,12 @@ const createConfigItem = (
 
   // If an object is specified as the value (e.g. Foo: { ... }),
   // It can have `path` property and `screens` prop which has nested configs
+  const ownParts = config.path ? getPatternParts(config.path) : [];
   const parts =
     config.exact !== true
-      ? [
-          ...(parentParts || []),
-          ...(config.path ? getPatternParts(config.path) : []),
-        ]
-      : config.path
-        ? getPatternParts(config.path)
+      ? [...(parentParts || []), ...ownParts]
+      : ownParts.length
+        ? ownParts
         : undefined;
 
   const screens =
@@ -420,6 +446,7 @@ const createConfigItem = (
 
   return {
     parts,
+    ownParts,
     stringify: config.stringify,
     screens,
   };

package/src/getPatternParts.tsx

@@ -15,6 +15,8 @@ export function getPatternParts(path: string): PatternPart[] {
 
   let isRegex = false;
   let isParam = false;
+  let isEscaped = false;
+  let isInCharClass = false;
   let regexInnerParens = 0;
 
   // One extra iteration to add the last character
@@ -34,7 +36,7 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered ':' in the middle of a segment in path: ${path}`
         );
       }
-    } else if (char === '(') {
+    } else if (char === '(' && !isEscaped && !isInCharClass) {
       if (isParam) {
         if (isRegex) {
           // The '(' is part of the regex if we're already inside one
@@ -47,7 +49,7 @@ export function getPatternParts(path: string): PatternPart[] {
           `Encountered '(' without preceding ':' in path: ${path}`
         );
       }
-    } else if (char === ')') {
+    } else if (char === ')' && !isEscaped && !isInCharClass) {
       if (isParam && isRegex) {
         if (regexInnerParens) {
           // The ')' is part of the regex if we're already inside one
@@ -102,6 +104,17 @@ export function getPatternParts(path: string): PatternPart[] {
     if (isRegex) {
       current.regex = current.regex || '';
       current.regex += char;
+
+      // Track escapes and character classes so parens inside them are not special
+      if (isEscaped) {
+        isEscaped = false;
+      } else if (char === '\\') {
+        isEscaped = true;
+      } else if (char === '[') {
+        isInCharClass = true;
+      } else if (char === ']') {
+        isInCharClass = false;
+      }
     }
 
     if (isParam && !isRegex) {