@react-navigation/core 8.0.0-alpha.3 → 8.0.0-alpha.31

package/src/ConsumedParamsContext.tsx

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+export const ConsumedParamsContext = React.createContext<
+  WeakMap<object, true> | undefined
+>(undefined);

package/src/DataLoading.tsx

@@ -0,0 +1,203 @@
+import type { NavigationState, PartialState } from '@react-navigation/routers';
+
+import { getStateFromRouteParams } from './getStateFromRouteParams';
+import type { TreeForPathConfig } from './StaticNavigation';
+
+function findScreenInConfig(config: TreeForPathConfig['config'], name: string) {
+  const screens = config.screens;
+
+  if (screens?.[name] != null) {
+    return screens[name];
+  }
+
+  if (config.groups) {
+    for (const group of Object.values(config.groups)) {
+      if (group.screens[name] != null) {
+        return group.screens[name];
+      }
+    }
+  }
+
+  return undefined;
+}
+
+function findInitialRouteName(
+  config: TreeForPathConfig['config']
+): string | undefined {
+  if (config.initialRouteName != null) {
+    return config.initialRouteName;
+  }
+
+  for (const key in config) {
+    if (key === 'screens' && config.screens) {
+      const name = Object.keys(config.screens)[0];
+
+      if (name != null) {
+        return name;
+      }
+    }
+
+    if (key === 'groups' && config.groups) {
+      for (const group of Object.values(config.groups)) {
+        const name = Object.keys(group.screens)[0];
+
+        if (name != null) {
+          return name;
+        }
+      }
+    }
+  }
+
+  return undefined;
+}
+
+/**
+ * Get loader for the focused route in a static config tree with given navigation state.
+ *
+ * @param tree The static navigation config.
+ * @param state The navigation state to extract the focused route path from.
+ * @returns A function that returns a `Promise<void>`, or `undefined` if no loaders are found.
+ *
+ * @example
+ * ```js
+ * const loader = getLoaderForState(RootStack, {
+ *   index: 0,
+ *   routes: [{ name: 'Home' }],
+ * });
+ * await loader?.();
+ * ```
+ */
+export function getLoaderForState(
+  tree: TreeForPathConfig,
+  state: PartialState<NavigationState> | NavigationState | undefined
+): (() => Promise<void>) | undefined {
+  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) {
+    return undefined;
+  }
+
+  const initialParams =
+    typeof item === 'object' && 'initialParams' in item
+      ? item.initialParams
+      : undefined;
+
+  const params =
+    initialParams != null || focusedRoute.params != null
+      ? { ...initialParams, ...focusedRoute.params }
+      : undefined;
+
+  const loaders: (() => Promise<void>)[] = [];
+
+  if (
+    isNewlyFocused &&
+    'UNSTABLE_loader' in item &&
+    typeof item.UNSTABLE_loader === 'function'
+  ) {
+    const loader = item.UNSTABLE_loader;
+
+    loaders.push(() =>
+      loader({
+        name: focusedRoute.name,
+        params,
+      })
+    );
+  }
+
+  const nested =
+    'config' in item
+      ? item
+      : 'screen' in item && 'config' in item.screen
+        ? item.screen
+        : undefined;
+
+  if (nested) {
+    const initialRouteName = findInitialRouteName(nested.config);
+
+    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 }] };
+    }
+
+    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);
+    }
+  }
+
+  if (loaders.length === 0) {
+    return undefined;
+  }
+
+  return async () => {
+    await Promise.all(loaders.map((l) => l()));
+  };
+}

package/src/NavigationBuilderContext.tsx

@@ -2,6 +2,7 @@ import type {
   NavigationAction,
   NavigationState,
   ParamListBase,
+  PartialState,
 } from '@react-navigation/routers';
 import * as React from 'react';
 
@@ -46,19 +47,21 @@ export type FocusedNavigationListener = <T>(
 
 export type GetStateListener = () => NavigationState;
 
-export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;
+export type ChildBeforeRemoveListener = (
+  action: NavigationAction,
+  nextState: NavigationState | PartialState<NavigationState> | undefined
+) => boolean;
 
 /**
  * Context which holds the required helpers needed to build nested navigators.
  */
 export const NavigationBuilderContext = React.createContext<{
-  onAction?: (
-    action: NavigationAction,
-    visitedNavigators?: Set<string>
-  ) => boolean;
-  addListener?: AddListener;
-  addKeyedListener?: AddKeyedListener;
-  onRouteFocus?: (key: string) => void;
+  onAction?:
+    | ((action: NavigationAction, visitedNavigators?: Set<string>) => boolean)
+    | undefined;
+  addListener?: AddListener | undefined;
+  addKeyedListener?: AddKeyedListener | undefined;
+  onRouteFocus?: ((key: string) => void) | undefined;
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
   onEmitEvent: (event: {
     type: string;
@@ -67,13 +70,15 @@ export const NavigationBuilderContext = React.createContext<{
     data: unknown;
   }) => void;
   onOptionsChange: (options: object) => void;
+  getIsStateEmitted: () => boolean;
   scheduleUpdate: (callback: () => void) => void;
   flushUpdates: () => void;
-  stackRef?: React.MutableRefObject<string | undefined>;
+  stackRef?: React.RefObject<string | undefined> | undefined;
 }>({
   onDispatchAction: () => undefined,
   onEmitEvent: () => undefined,
   onOptionsChange: () => undefined,
+  getIsStateEmitted: () => false,
   scheduleUpdate: () => {
     throw new Error("Couldn't find a context for scheduling updates.");
   },

package/src/NavigationFocusedRouteStateContext.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 export type FocusedRouteState = {
   routes: [
     {
-      key?: string;
+      key?: string | undefined;
       name: string;
-      params?: object;
-      path?: string;
-      state?: FocusedRouteState;
+      params?: object | undefined;
+      path?: string | undefined;
+      state?: FocusedRouteState | undefined;
     },
   ];
 };

package/src/NavigationIndependentTree.tsx

@@ -1,12 +1,17 @@
 import * as React from 'react';
 
+import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStateContext';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 import {
   NamedRouteContextListContext,
   NavigationContext,
   NavigationRouteContext,
-  NavigationRouteNameContext,
 } from './NavigationProvider';
+import { IsFocusedContext } from './useIsFocused';
+import {
+  NamedNavigationStateListenerListContext,
+  NavigationStateListenerContext,
+} from './useNavigationState';
 
 /**
  * Component to make the child navigation container independent of parent containers.
@@ -18,16 +23,22 @@ 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}>
-          <NavigationRouteNameContext.Provider value={undefined}>
-            <NavigationIndependentTreeContext.Provider value={true}>
-              {children}
-            </NavigationIndependentTreeContext.Provider>
-          </NavigationRouteNameContext.Provider>
-        </NavigationContext.Provider>
-      </NavigationRouteContext.Provider>
-    </NamedRouteContextListContext.Provider>
+    <NavigationStateListenerContext.Provider value={undefined}>
+      <NamedNavigationStateListenerListContext.Provider value={undefined}>
+        <NamedRouteContextListContext.Provider value={undefined}>
+          <NavigationRouteContext.Provider value={undefined}>
+            <NavigationContext.Provider value={undefined}>
+              <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>
+      </NamedNavigationStateListenerListContext.Provider>
+    </NavigationStateListenerContext.Provider>
   );
 }

package/src/NavigationProvider.tsx

@@ -2,7 +2,9 @@ import type { ParamListBase, Route } from '@react-navigation/routers';
 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.
@@ -18,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>;
@@ -48,17 +46,30 @@ export function NavigationProvider({ route, navigation, children }: Props) {
     [NamedRouteContext, parents, route.name]
   );
 
+  const parentIsFocused = React.use(IsFocusedContext);
+  const focusedRouteKey = React.use(FocusedRouteKeyContext);
+
+  // Mark route as focused only if:
+  // - It doesn't have a parent navigator
+  // - Parent navigator is focused
+  const isFocused =
+    parentIsFocused == null || parentIsFocused
+      ? focusedRouteKey === route.key
+      : false;
+
   return (
-    <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
-      <NamedRouteContext.Provider value={route}>
-        <NavigationRouteContext.Provider value={route}>
-          <NavigationContext.Provider value={navigation}>
-            <NavigationRouteNameContext.Provider value={route.name}>
-              {children}
-            </NavigationRouteNameContext.Provider>
-          </NavigationContext.Provider>
-        </NavigationRouteContext.Provider>
-      </NamedRouteContext.Provider>
-    </NamedRouteContextListContext.Provider>
+    <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}
+              </IsFocusedContext.Provider>
+            </NavigationContext.Provider>
+          </NavigationRouteContext.Provider>
+        </NamedRouteContext.Provider>
+      </NamedRouteContextListContext.Provider>
+    </NamedNavigationStateListenerProvider>
   );
 }

package/src/NavigationStateContext.tsx

@@ -5,19 +5,19 @@ const MISSING_CONTEXT_ERROR =
   "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
 
 export const NavigationStateContext = React.createContext<{
-  isDefault?: true;
-  state?: NavigationState | PartialState<NavigationState>;
+  isDefault?: true | undefined;
+  state?: NavigationState | PartialState<NavigationState> | undefined;
   getKey: () => string | undefined;
   setKey: (key: string) => void;
   getState: () => NavigationState | PartialState<NavigationState> | undefined;
   setState: (
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
+  subscribe: (callback: () => void) => () => void;
   getIsInitial: () => boolean;
-  addOptionsGetter?: (
-    key: string,
-    getter: () => object | undefined | null
-  ) => void;
+  addOptionsGetter?:
+    | ((key: string, getter: () => object | undefined | null) => void)
+    | undefined;
 }>({
   isDefault: true,
 
@@ -33,6 +33,9 @@ export const NavigationStateContext = React.createContext<{
   get setState(): any {
     throw new Error(MISSING_CONTEXT_ERROR);
   },
+  get subscribe(): any {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
   get getIsInitial(): any {
     throw new Error(MISSING_CONTEXT_ERROR);
   },

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 navigation = React.useContext(NavigationHelpersContext);
-  const route = React.useContext(NavigationRouteContext);
+  const registry = React.useRef<PreventedRoutesMap>(new Map());
 
-  const preventRemoveContextValue = React.useContext(PreventRemoveContext);
+  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/SceneView.tsx

@@ -24,6 +24,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
   routeState: NavigationState | PartialState<NavigationState> | undefined;
   getState: () => State;
   setState: (state: State) => void;
+  subscribe: (callback: () => void) => () => void;
   options: object;
   clearOptions: () => void;
 };
@@ -42,6 +43,7 @@ export function SceneView<
   routeState,
   getState,
   setState,
+  subscribe,
   options,
   clearOptions,
 }: Props<State, ScreenOptions>) {
@@ -70,46 +72,16 @@ export function SceneView<
       const state = getState();
 
       const routes = state.routes.map((r) => {
-        if (r.key !== route.key) {
-          return r;
+        if (r.key === route.key && r.state !== child) {
+          return {
+            ...r,
+            state: child,
+          };
         }
 
-        const nextRoute = r.state !== child ? { ...r, state: child } : r;
-
-        // Before updating the state, cleanup any nested screen and state
-        // This will avoid the navigator trying to handle them again
-        if (
-          nextRoute.params &&
-          (('state' in nextRoute.params &&
-            typeof nextRoute.params.state === 'object' &&
-            nextRoute.params.state !== null) ||
-            ('screen' in nextRoute.params &&
-              typeof nextRoute.params.screen === 'string'))
-        ) {
-          // @ts-expect-error: we don't have correct type for params
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { state, screen, params, initial, ...rest } = nextRoute.params;
-
-          if (Object.keys(rest).length) {
-            return { ...nextRoute, params: rest };
-          } else {
-            const {
-              // We destructure the params to omit them
-              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-              params,
-              ...restRoute
-            } = nextRoute;
-
-            return restRoute;
-          }
-        }
-
-        return nextRoute;
+        return r;
       });
 
-      // Make sure not to update state if routes haven't changed
-      // Otherwise this will result in params cleanup as well
-      // We only want to cleanup params when state changes - after they are used
       if (!isArrayEqual(state.routes, routes)) {
         setState({
           ...state,
@@ -134,9 +106,7 @@ export function SceneView<
 
   const getIsInitial = React.useCallback(() => isInitialRef.current, []);
 
-  const parentFocusedRouteState = React.useContext(
-    NavigationFocusedRouteStateContext
-  );
+  const parentFocusedRouteState = React.use(NavigationFocusedRouteStateContext);
 
   const focusedRouteState = React.useMemo(() => {
     const state: FocusedRouteState = {
@@ -184,6 +154,7 @@ export function SceneView<
       state: routeState,
       getState: getCurrentState,
       setState: setCurrentState,
+      subscribe,
       getKey,
       setKey,
       getIsInitial,
@@ -193,6 +164,7 @@ export function SceneView<
       routeState,
       getCurrentState,
       setCurrentState,
+      subscribe,
       getKey,
       setKey,
       getIsInitial,