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

package/src/DataLoading.tsx

@@ -71,12 +71,33 @@ export function getLoaderForState(
   tree: TreeForPathConfig,
   state: PartialState<NavigationState> | NavigationState | undefined
 ): (() => Promise<void>) | undefined {
-  const focusedRoute = state?.routes[state.index ?? 0];
+  return getLoaderForStateChange(tree, state, undefined, undefined);
+}
+
+export function getLoaderForStateChange(
+  tree: TreeForPathConfig,
+  state: PartialState<NavigationState> | NavigationState | undefined,
+  previousState: PartialState<NavigationState> | NavigationState | undefined,
+  consumedParams: WeakMap<object, true> | undefined
+): (() => Promise<void>) | undefined {
+  const focusedRoute = state?.routes[state.index ?? state.routes.length - 1];
+  const previousFocusedRoute =
+    previousState?.routes[
+      previousState.index ?? previousState.routes.length - 1
+    ];
 
   if (!focusedRoute) {
     return undefined;
   }
 
+  const isNewlyFocused =
+    previousState === undefined ||
+    previousFocusedRoute == null ||
+    focusedRoute.name !== previousFocusedRoute.name ||
+    (focusedRoute.key != null &&
+      previousFocusedRoute.key != null &&
+      focusedRoute.key !== previousFocusedRoute.key);
+
   const item = findScreenInConfig(tree.config, focusedRoute.name);
 
   if (item == null) {
@@ -95,7 +116,11 @@ export function getLoaderForState(
 
   const loaders: (() => Promise<void>)[] = [];
 
-  if ('UNSTABLE_loader' in item && typeof item.UNSTABLE_loader === 'function') {
+  if (
+    isNewlyFocused &&
+    'UNSTABLE_loader' in item &&
+    typeof item.UNSTABLE_loader === 'function'
+  ) {
     const loader = item.UNSTABLE_loader;
 
     loaders.push(() =>
@@ -116,13 +141,52 @@ export function getLoaderForState(
   if (nested) {
     const initialRouteName = findInitialRouteName(nested.config);
 
-    let childState = focusedRoute.state ?? getStateFromRouteParams(params);
+    const stateFromParams =
+      focusedRoute.params != null && consumedParams?.has(focusedRoute.params)
+        ? undefined
+        : getStateFromRouteParams(params);
+
+    let childState =
+      previousState !== undefined && stateFromParams != null
+        ? stateFromParams
+        : (focusedRoute.state ?? stateFromParams);
 
     if (childState == null && initialRouteName != null) {
       childState = { routes: [{ name: initialRouteName }] };
     }
 
-    const childLoader = getLoaderForState(nested, childState);
+    let previousChildState:
+      | PartialState<NavigationState>
+      | NavigationState
+      | undefined;
+
+    if (!isNewlyFocused) {
+      const previousRouteParams = previousFocusedRoute?.params;
+      const previousParams =
+        initialParams != null || previousRouteParams != null
+          ? { ...initialParams, ...previousRouteParams }
+          : undefined;
+      const previousStateFromParams =
+        previousRouteParams != null && consumedParams?.has(previousRouteParams)
+          ? undefined
+          : getStateFromRouteParams(previousParams);
+
+      previousChildState =
+        previousFocusedRoute?.state ?? previousStateFromParams;
+
+      if (previousChildState == null && initialRouteName != null) {
+        previousChildState = { routes: [{ name: initialRouteName }] };
+      }
+    }
+
+    const childLoader = getLoaderForStateChange(
+      nested,
+      childState,
+      previousState === undefined
+        ? undefined
+        : (previousChildState ?? { routes: [] }),
+      consumedParams
+    );
 
     if (childLoader) {
       loaders.push(childLoader);

package/src/NavigationIndependentTree.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStateContext';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 import {
   NamedRouteContextListContext,
@@ -23,11 +24,13 @@ export function NavigationIndependentTree({
       <NamedRouteContextListContext.Provider value={undefined}>
         <NavigationRouteContext.Provider value={undefined}>
           <NavigationContext.Provider value={undefined}>
-            <IsFocusedContext.Provider value={undefined}>
-              <NavigationIndependentTreeContext.Provider value={true}>
-                {children}
-              </NavigationIndependentTreeContext.Provider>
-            </IsFocusedContext.Provider>
+            <NavigationFocusedRouteStateContext.Provider value={undefined}>
+              <IsFocusedContext.Provider value={undefined}>
+                <NavigationIndependentTreeContext.Provider value={true}>
+                  {children}
+                </NavigationIndependentTreeContext.Provider>
+              </IsFocusedContext.Provider>
+            </NavigationFocusedRouteStateContext.Provider>
           </NavigationContext.Provider>
         </NavigationRouteContext.Provider>
       </NamedRouteContextListContext.Provider>

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;
   }, {});