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

package/src/NavigationIndependentTree.tsx

@@ -5,9 +5,9 @@ import {
   NamedRouteContextListContext,
   NavigationContext,
   NavigationRouteContext,
-  NavigationRouteNameContext,
 } from './NavigationProvider';
 import { IsFocusedContext } from './useIsFocused';
+import { NamedNavigationStateListenerListContext } from './useNavigationState';
 
 /**
  * Component to make the child navigation container independent of parent containers.
@@ -19,18 +19,18 @@ export function NavigationIndependentTree({
 }) {
   return (
     // We need to clear any existing contexts for nested independent container to work correctly
-    <NamedRouteContextListContext.Provider value={undefined}>
-      <NavigationRouteContext.Provider value={undefined}>
-        <NavigationContext.Provider value={undefined}>
-          <IsFocusedContext.Provider value={undefined}>
-            <NavigationRouteNameContext.Provider value={undefined}>
+    <NamedNavigationStateListenerListContext.Provider value={undefined}>
+      <NamedRouteContextListContext.Provider value={undefined}>
+        <NavigationRouteContext.Provider value={undefined}>
+          <NavigationContext.Provider value={undefined}>
+            <IsFocusedContext.Provider value={undefined}>
               <NavigationIndependentTreeContext.Provider value={true}>
                 {children}
               </NavigationIndependentTreeContext.Provider>
-            </NavigationRouteNameContext.Provider>
-          </IsFocusedContext.Provider>
-        </NavigationContext.Provider>
-      </NavigationRouteContext.Provider>
-    </NamedRouteContextListContext.Provider>
+            </IsFocusedContext.Provider>
+          </NavigationContext.Provider>
+        </NavigationRouteContext.Provider>
+      </NamedRouteContextListContext.Provider>
+    </NamedNavigationStateListenerListContext.Provider>
   );
 }

package/src/NavigationProvider.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import type { NavigationProp } from './types';
 import { FocusedRouteKeyContext, IsFocusedContext } from './useIsFocused';
 import { useLazyValue } from './useLazyValue';
+import { NamedNavigationStateListenerProvider } from './useNavigationState';
 
 /**
  * Context which holds the route prop for a screen.
@@ -19,10 +20,6 @@ export const NavigationContext = React.createContext<
   NavigationProp<ParamListBase> | undefined
 >(undefined);
 
-export const NavigationRouteNameContext = React.createContext<
-  string | undefined
->(undefined);
-
 type Props = {
   route: Route<string>;
   navigation: NavigationProp<ParamListBase>;
@@ -61,18 +58,18 @@ export function NavigationProvider({ route, navigation, children }: Props) {
       : false;
 
   return (
-    <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
-      <NamedRouteContext.Provider value={route}>
-        <NavigationRouteContext.Provider value={route}>
-          <NavigationContext.Provider value={navigation}>
-            <IsFocusedContext.Provider value={isFocused}>
-              <NavigationRouteNameContext.Provider value={route.name}>
+    <NamedNavigationStateListenerProvider name={route.name}>
+      <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
+        <NamedRouteContext.Provider value={route}>
+          <NavigationRouteContext.Provider value={route}>
+            <NavigationContext.Provider value={navigation}>
+              <IsFocusedContext.Provider value={isFocused}>
                 {children}
-              </NavigationRouteNameContext.Provider>
-            </IsFocusedContext.Provider>
-          </NavigationContext.Provider>
-        </NavigationRouteContext.Provider>
-      </NamedRouteContext.Provider>
-    </NamedRouteContextListContext.Provider>
+              </IsFocusedContext.Provider>
+            </NavigationContext.Provider>
+          </NavigationRouteContext.Provider>
+        </NamedRouteContext.Provider>
+      </NamedRouteContextListContext.Provider>
+    </NamedNavigationStateListenerProvider>
   );
 }

package/src/PreventRemoveContext.tsx

@@ -14,6 +14,7 @@ export const PreventRemoveContext = React.createContext<
         routeKey: string,
         preventRemove: boolean
       ) => void;
+      notifyPreventRemove: () => void;
     }
   | undefined
 >(undefined);

package/src/PreventRemoveProvider.tsx

@@ -13,13 +13,7 @@ type Props = {
   children: React.ReactNode;
 };
 
-type PreventedRoutesMap = Map<
-  string,
-  {
-    routeKey: string;
-    preventRemove: boolean;
-  }
->;
+type PreventedRoutesMap = Map<string, string>;
 
 /**
  * Util function to transform map of prevented routes to a simpler object.
@@ -27,17 +21,11 @@ type PreventedRoutesMap = Map<
 const transformPreventedRoutes = (
   preventedRoutesMap: PreventedRoutesMap
 ): PreventedRoutes => {
-  const preventedRoutesToTransform = [...preventedRoutesMap.values()];
+  const preventedRoutes: PreventedRoutes = {};
 
-  const preventedRoutes = preventedRoutesToTransform.reduce<PreventedRoutes>(
-    (acc, { routeKey, preventRemove }) => {
-      acc[routeKey] = {
-        preventRemove: acc[routeKey]?.preventRemove || preventRemove,
-      };
-      return acc;
-    },
-    {}
-  );
+  for (const routeKey of preventedRoutesMap.values()) {
+    preventedRoutes[routeKey] = { preventRemove: true };
+  }
 
   return preventedRoutes;
 };
@@ -50,12 +38,15 @@ export function PreventRemoveProvider({ children }: Props) {
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(() => new Map());
 
+  const registry = React.useRef<PreventedRoutesMap>(new Map());
+
   const navigation = React.use(NavigationHelpersContext);
   const route = React.use(NavigationRouteContext);
 
   const preventRemoveContextValue = React.use(PreventRemoveContext);
   // take `setPreventRemove` from parent context - if exist it means we're in a nested context
   const setParentPrevented = preventRemoveContextValue?.setPreventRemove;
+  const notifyParentPrevented = preventRemoveContextValue?.notifyPreventRemove;
 
   const setPreventRemove = useLatestCallback(
     (id: string, routeKey: string, preventRemove: boolean): void => {
@@ -71,36 +62,49 @@ export function PreventRemoveProvider({ children }: Props) {
         );
       }
 
-      setPreventedRoutesMap((prevPrevented) => {
-        // values haven't changed - do nothing
-        if (
-          routeKey === prevPrevented.get(id)?.routeKey &&
-          preventRemove === prevPrevented.get(id)?.preventRemove
-        ) {
-          return prevPrevented;
-        }
-
-        const nextPrevented = new Map(prevPrevented);
-
-        if (preventRemove) {
-          nextPrevented.set(id, {
-            routeKey,
-            preventRemove,
-          });
-        } else {
-          nextPrevented.delete(id);
-        }
-
-        return nextPrevented;
-      });
+      if (preventRemove) {
+        registry.current.set(id, routeKey);
+      } else {
+        registry.current.delete(id);
+      }
     }
   );
 
-  const isPrevented = [...preventedRoutesMap.values()].some(
-    ({ preventRemove }) => preventRemove
-  );
+  const notifyPreventRemove = useLatestCallback(() => {
+    // eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect
+    setPreventedRoutesMap((prevPrevented) => {
+      const nextPrevented = registry.current;
 
+      const hasChanged =
+        prevPrevented.size !== nextPrevented.size ||
+        [...nextPrevented].some(
+          ([id, routeKey]) => prevPrevented.get(id) !== routeKey
+        );
+
+      // values haven't changed - do nothing
+      if (!hasChanged) {
+        return prevPrevented;
+      }
+
+      return new Map(nextPrevented);
+    });
+  });
+
+  // Sync the state on every commit in case the registry was changed by a screen
+  // unmounting while hidden with `<Activity>`, where no passive effects run
+  // Also notify the parent so nested prevention propagates upwards
   React.useEffect(() => {
+    notifyPreventRemove();
+    notifyParentPrevented?.();
+
+    return () => {
+      notifyParentPrevented?.();
+    };
+  });
+
+  const isPrevented = preventedRoutesMap.size > 0;
+
+  React.useInsertionEffect(() => {
     if (route?.key !== undefined && setParentPrevented !== undefined) {
       // when route is defined (and setParentPrevented) it means we're in a nested stack
       // route.key then will be the route key of parent
@@ -116,9 +120,10 @@ export function PreventRemoveProvider({ children }: Props) {
   const value = React.useMemo(
     () => ({
       setPreventRemove,
+      notifyPreventRemove,
       preventedRoutes: transformPreventedRoutes(preventedRoutesMap),
     }),
-    [setPreventRemove, preventedRoutesMap]
+    [setPreventRemove, notifyPreventRemove, preventedRoutesMap]
   );
 
   return (

package/src/StaticNavigation.tsx

@@ -1,4 +1,8 @@
-import type { NavigationState, ParamListBase } from '@react-navigation/routers';
+import type {
+  NavigationState,
+  ParamListBase,
+  Route,
+} from '@react-navigation/routers';
 import * as React from 'react';
 import { isValidElementType } from 'react-is';
 
@@ -7,10 +11,11 @@ import {
   getPatternParts,
   type PatternPart,
 } from './getPatternParts';
+import { StaticTreeContext } from './StaticTreeContext';
 import type {
-  DefaultNavigatorOptions,
   EventMapBase,
   NavigationListBase,
+  NavigatorProps,
   NavigatorScreenParams,
   NavigatorTypeBagBase,
   NavigatorTypeBagFor,
@@ -27,6 +32,8 @@ import type {
   HasArguments,
   InferParamsFromLinking,
   KeysOf,
+  NoExcessObject,
+  NotUndefinedObject,
   StandardSchemaV1,
   UnionToIntersection,
   ValidPathPattern,
@@ -105,7 +112,13 @@ type ShouldInferFromLinking<Linking> = Linking extends {
 type ParamsForConfig<Linking, Screen, Params = ParamsForScreen<Screen>> =
   ShouldInferFromLinking<Linking> extends true
     ? [Screen] extends [{ config: any }]
-      ? FlatType<InferParamsFromLinking<Linking>> & Params
+      ? undefined extends Params
+        ? FlatType<InferParamsFromLinking<Linking>> & Params
+        : // Optional linking params make the whole route params type optional when intersected.
+          // e.g. `({...} | undefined) & NavigatorScreenParams<{...}>` adds `| undefined` to the whole type.
+          // But if nested navigator had required params, it should still be required.
+          // So we remove `| undefined` from linking params before intersecting with nested navigator params.
+          FlatType<NotUndefinedObject<InferParamsFromLinking<Linking>>> & Params
       : undefined extends Params
         ? FlatType<InferParamsFromLinking<Linking>>
         : FlatType<InferParamsFromLinking<Linking> & Params>
@@ -125,15 +138,7 @@ type ParamListForScreens<Screens> = {
     : ParamsForScreenEntry<Screens[Key]>;
 };
 
-type ParamListForGroups<
-  Groups extends
-    | Readonly<{
-        [key: string]: {
-          screens: {};
-        };
-      }>
-    | undefined,
-> = Groups extends {
+type ParamListForGroups<Groups> = Groups extends {
   [key: string]: {
     screens: infer Screens;
   };
@@ -141,27 +146,20 @@ type ParamListForGroups<
   ? ParamListForScreens<UnionToIntersection<Screens>>
   : {};
 
-type RouteTypeBase = {
-  key: string;
-  name: string;
-  path?: string | undefined;
-  history?: { type: 'params'; params: object }[] | undefined;
-};
-
-type RouteType<Params, P = AnyToUnknown<Params>> = Readonly<
-  RouteTypeBase &
+type StaticRoute<Params, P = AnyToUnknown<Params>> = Readonly<
+  Omit<Route<string>, 'params'> &
     (undefined extends Params
       ? {
           /**
            * Params for this route
            */
-          params?: P;
+          params?: P extends object ? Readonly<P> : P;
         }
       : {
           /**
            * Params for this route
            */
-          params: P;
+          params: Readonly<P>;
         })
 >;
 
@@ -222,23 +220,25 @@ type StaticScreenConfigLinkingAlias = {
   shared?: boolean;
 };
 
+type StaticScreenConfigLinkingExtras = {
+  /**
+   * Additional path alias that will be matched to the same screen.
+   */
+  alias?: (string | StaticScreenConfigLinkingAlias)[];
+  /**
+   * Name of the initial route to use for the nested navigator when the path matches.
+   */
+  initialRouteName?: string | undefined;
+  /**
+   * Path configuration for child screens in the nested navigator.
+   * Only supported when the screen renders a navigator with dynamic API.
+   */
+  screens?: PathConfigMap<ParamListBase> | undefined;
+};
+
 export type StaticScreenConfigLinking =
   | string
-  | (StaticScreenConfigLinkingAlias & {
-      /**
-       * Additional path alias that will be matched to the same screen.
-       */
-      alias?: (string | StaticScreenConfigLinkingAlias)[];
-      /**
-       * Name of the initial route to use for the nested navigator when the path matches.
-       */
-      initialRouteName?: string | undefined;
-      /**
-       * Path configuration for child screens in the nested navigator.
-       * Only supported when the screen renders a navigator with dynamic API.
-       */
-      screens?: PathConfigMap<ParamListBase> | undefined;
-    })
+  | (StaticScreenConfigLinkingAlias & StaticScreenConfigLinkingExtras)
   | null
   | undefined;
 
@@ -288,7 +288,7 @@ export type StaticScreenConfig<
   options?:
     | ScreenOptions
     | ((props: {
-        route: RouteType<Params>;
+        route: StaticRoute<Params>;
         navigation: Navigation;
         theme: Theme;
       }) => ScreenOptions);
@@ -308,7 +308,7 @@ export type StaticScreenConfig<
   listeners?:
     | ScreenListeners<State, EventMap>
     | ((props: {
-        route: RouteType<Params>;
+        route: StaticRoute<Params>;
         navigation: Navigation;
       }) => ScreenListeners<State, EventMap>);
 
@@ -328,7 +328,7 @@ export type StaticScreenConfig<
    *
    */
   layout?: (props: {
-    route: RouteType<Params>;
+    route: StaticRoute<Params>;
     options: ScreenOptions;
     navigation: Navigation;
     theme: Theme;
@@ -355,7 +355,9 @@ export type StaticScreenConfig<
    * getId: ({ params }) => params?.userId,
    * ```
    */
-  getId?: (props: { params: AnyToUnknown<Params> }) => string | undefined;
+  getId?: (props: {
+    params: AnyToUnknown<Params extends object ? Readonly<Params> : Params>;
+  }) => string | undefined;
 
   /**
    * Linking config for the screen.
@@ -377,11 +379,27 @@ export type StaticScreenConfig<
    * Optional key for this screen.
    */
   navigationKey?: string;
+
+  /**
+   * Loader function to start loading data when the screen is navigated to.
+   *
+   * @example
+   * ```js
+   * UNSTABLE_loader: ({ params }) => loadProfile(params.id),
+   * ```
+   */
+  UNSTABLE_loader?: (options: {
+    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'],
 >(
   config: StaticScreenConfig<
     Linking,
@@ -390,7 +408,10 @@ export type StaticScreenFactory<in out Bag extends NavigatorTypeBagBase> = <
     Bag['ScreenOptions'],
     Bag['EventMap'],
     Bag['NavigationList'][keyof Bag['ParamList']]
-  >
+  > & {
+    options?: ProvidedOptions &
+      NoExcessOptions<ProvidedOptions, Bag['ScreenOptions']>;
+  }
 ) => StaticScreenConfig<
   Linking,
   Screen,
@@ -456,51 +477,33 @@ type StaticConfigGroup<
   >;
 };
 
-export type StaticConfig<Bag extends NavigatorTypeBagBase> =
-  StaticConfigInternal<
+export type StaticConfig<
+  Bag extends NavigatorTypeBagBase,
+  Screens = StaticConfigScreens<
     Bag['ParamList'],
     Bag['State'],
     Bag['ScreenOptions'],
     Bag['EventMap'],
-    Bag['NavigationList'],
-    Bag['Navigator']
-  >;
-
-type StaticConfigInternal<
-  ParamList extends ParamListBase,
-  State extends NavigationState,
-  ScreenOptions extends {},
-  EventMap extends EventMapBase,
-  NavigationList extends NavigationListBase<ParamList>,
-  Navigator extends React.ComponentType<any>,
-  Screens = StaticConfigScreens<
-    ParamList,
-    State,
-    ScreenOptions,
-    EventMap,
-    NavigationList
+    Bag['NavigationList']
   >,
   Groups = {
     [key: string]: StaticConfigGroup<
-      ParamList,
-      State,
-      ScreenOptions,
-      EventMap,
-      NavigationList
+      Bag['ParamList'],
+      Bag['State'],
+      Bag['ScreenOptions'],
+      Bag['EventMap'],
+      Bag['NavigationList']
     >;
   },
 > = Omit<
-  Omit<
-    React.ComponentProps<Navigator>,
-    keyof DefaultNavigatorOptions<any, any, any, any, any>
-  > &
-    DefaultNavigatorOptions<
-      ParamList,
-      State,
-      ScreenOptions,
-      EventMap,
-      NavigationList[keyof ParamList]
-    >,
+  NavigatorProps<
+    Bag['ParamList'],
+    Bag['State'],
+    Bag['ScreenOptions'],
+    Bag['EventMap'],
+    Bag['NavigationList'][keyof Bag['ParamList']],
+    Bag['Navigator']
+  >,
   'screens' | 'children'
 > &
   (
@@ -526,6 +529,67 @@ type StaticConfigInternal<
       }
   );
 
+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 NoExcessScreens<Screens, ScreenOptions extends {}> = {
+  [RouteName in keyof Screens]: NoExcessScreen<
+    Screens[RouteName],
+    ScreenOptions
+  >;
+};
+
+type NoExcessGroups<
+  Groups,
+  Bag extends NavigatorTypeBagBase,
+  ScreenOptions extends {},
+> = {
+  [GroupName in keyof Groups]: NoExcessObject<
+    Groups[GroupName],
+    StaticConfigGroup<
+      ParamListBase,
+      NavigationState,
+      {},
+      EventMapBase,
+      NavigationListBase<ParamListBase>
+    >
+  > &
+    NoExcessStaticConfig<Groups[GroupName], Bag, ScreenOptions>;
+};
+
+// Each property is probed with `Config extends { key: infer X }` and the results are intersected.
+// These conditionals stay deferred while the config is inferred, so they don't interfere with the inference.
+// Indexed access (`Config['screens']`) or a mapped type over the whole config breaks the param list inference.
+export type NoExcessStaticConfig<
+  Config,
+  Bag extends NavigatorTypeBagBase,
+  ScreenOptions extends {} = Bag['ScreenOptions'],
+> = (Config extends { screenOptions: infer ProvidedOptions }
+  ? {
+      screenOptions: NoExcessOptions<ProvidedOptions, ScreenOptions>;
+    }
+  : unknown) &
+  (Config extends { screens: infer Screens }
+    ? {
+        screens: NoExcessScreens<Screens, ScreenOptions>;
+      }
+    : unknown) &
+  (Config extends { groups: infer Groups }
+    ? {
+        groups: NoExcessGroups<Groups, Bag, ScreenOptions>;
+      }
+    : unknown);
+
 /**
  * Props for a screen component which is rendered by a static navigator.
  * Takes the route params as a generic argument.
@@ -534,7 +598,7 @@ export type StaticScreenProps<
   in out T extends Record<string, unknown> | undefined,
 > = {
   route: {
-    params: T;
+    readonly params: T;
   };
 };
 
@@ -724,14 +788,16 @@ export function createComponentForStaticConfig<
         : { ...rest.screenListeners, ...props.screenListeners };
 
     return (
-      <Navigator
-        {...rest}
-        {...props}
-        screenOptions={screenOptions}
-        screenListeners={screenListeners}
-      >
-        {children}
-      </Navigator>
+      <StaticTreeContext.Provider value={tree}>
+        <Navigator
+          {...rest}
+          {...props}
+          screenOptions={screenOptions}
+          screenListeners={screenListeners}
+        >
+          {children}
+        </Navigator>
+      </StaticTreeContext.Provider>
     );
   };
 
@@ -740,7 +806,7 @@ export function createComponentForStaticConfig<
   return NavigatorComponent;
 }
 
-type TreeForPathConfig = {
+export type TreeForPathConfig = {
   config: ConfigForPathConfig;
 };
 
@@ -752,11 +818,7 @@ type ConfigForPathConfig = {
 
 type LinkingForPathConfig =
   | string
-  | (Partial<StaticScreenConfigLinkingAlias> & {
-      alias?: (string | StaticScreenConfigLinkingAlias)[];
-      initialRouteName?: string | undefined;
-      screens?: PathConfigMap<ParamListBase> | undefined;
-    })
+  | (Partial<StaticScreenConfigLinkingAlias> & StaticScreenConfigLinkingExtras)
   | null
   | undefined;
 
@@ -766,7 +828,9 @@ type ScreenForPathConfig =
   | ScreenValueForPathConfig
   | {
       screen: ScreenValueForPathConfig;
+      initialParams?: object;
       linking?: LinkingForPathConfig;
+      UNSTABLE_loader?: unknown;
     };
 
 type PathConfigMapForStaticNavigation = Record<

package/src/StaticTreeContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+import type { TreeForPathConfig } from './StaticNavigation';
+
+export const StaticTreeContext = React.createContext<
+  TreeForPathConfig | undefined
+>(undefined);