@react-navigation/core 8.0.0-alpha.4 → 8.0.0-alpha.41

package/src/useOnPreventRemove.tsx

@@ -1,12 +1,15 @@
 import type {
   NavigationAction,
+  NavigationRoute,
   NavigationState,
+  ParamListBase,
+  PartialRoute,
 } from '@react-navigation/routers';
 import * as React from 'react';
 
 import {
   type ChildBeforeRemoveListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationRouteContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
@@ -23,50 +26,76 @@ const VISITED_ROUTE_KEYS = Symbol('VISITED_ROUTE_KEYS');
 export const shouldPreventRemove = (
   emitter: NavigationEventEmitter<EventMapCore<any>>,
   beforeRemoveListeners: Record<string, ChildBeforeRemoveListener | undefined>,
-  currentRoutes: { key: string }[],
-  nextRoutes: { key?: string | undefined }[],
+  currentRoutes: NavigationRoute<ParamListBase, string>[],
+  nextRoutes: (
+    | NavigationRoute<ParamListBase, string>
+    | PartialRoute<NavigationRoute<ParamListBase, string>>
+  )[],
   action: NavigationAction
 ) => {
-  const nextRouteKeys = nextRoutes.map((route) => route.key);
+  const nextRoutesByKey = new Map(
+    nextRoutes
+      .map((route) => [route.key, route] as const)
+      .filter(([, route]) => route.key != null)
+  );
 
-  // Call these in reverse order so last screens handle the event first
-  const removedRoutes = currentRoutes
-    .filter((route) => !nextRouteKeys.includes(route.key))
-    .reverse();
-
-  const visitedRouteKeys: Set<string> =
-    // @ts-expect-error: add this property to mark that we've already emitted this action
-    action[VISITED_ROUTE_KEYS] ?? new Set<string>();
+  const visitedRouteKeys =
+    VISITED_ROUTE_KEYS in action && action[VISITED_ROUTE_KEYS] instanceof Set
+      ? action[VISITED_ROUTE_KEYS]
+      : new Set<string>();
 
   const beforeRemoveAction = {
     ...action,
     [VISITED_ROUTE_KEYS]: visitedRouteKeys,
   };
 
-  for (const route of removedRoutes) {
+  // Call these in reverse order so last screens handle the event first
+  const reversedCurrentRoutes = [...currentRoutes].reverse();
+
+  for (const route of reversedCurrentRoutes) {
     if (visitedRouteKeys.has(route.key)) {
       // Skip if we've already emitted this action for this screen
       continue;
     }
 
-    // First, we need to check if any child screens want to prevent it
-    const isPrevented = beforeRemoveListeners[route.key]?.(beforeRemoveAction);
-
-    if (isPrevented) {
-      return true;
-    }
-
-    visitedRouteKeys.add(route.key);
+    if (!nextRoutesByKey.has(route.key)) {
+      // The route is not in next state, so it's being removed
+      // First, we need to check if any child screens want to prevent it
+      const isPrevented = beforeRemoveListeners[route.key]?.(
+        beforeRemoveAction,
+        undefined
+      );
+
+      if (isPrevented) {
+        return true;
+      }
+
+      visitedRouteKeys.add(route.key);
+
+      const event = emitter.emit({
+        type: 'beforeRemove',
+        target: route.key,
+        data: { action: beforeRemoveAction },
+        canPreventDefault: true,
+      });
 
-    const event = emitter.emit({
-      type: 'beforeRemove',
-      target: route.key,
-      data: { action: beforeRemoveAction },
-      canPreventDefault: true,
-    });
+      if (event.defaultPrevented) {
+        return true;
+      }
+    } else {
+      // The route is kept but its nested state changed, so propagate the check into the nested navigator
+      const nextRoute = nextRoutesByKey.get(route.key);
+
+      if (route.state != null && route.state !== nextRoute?.state) {
+        const isPrevented = beforeRemoveListeners[route.key]?.(
+          beforeRemoveAction,
+          nextRoute?.state
+        );
 
-    if (event.defaultPrevented) {
-      return true;
+        if (isPrevented) {
+          return true;
+        }
+      }
     }
   }
 
@@ -78,23 +107,29 @@ export function useOnPreventRemove({
   emitter,
   beforeRemoveListeners,
 }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
-  const route = React.useContext(NavigationRouteContext);
+  const { addKeyedListener } = useNavigationBuilderContext();
+
+  const route = React.use(NavigationRouteContext);
+
   const routeKey = route?.key;
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     if (routeKey) {
-      return addKeyedListener?.('beforeRemove', routeKey, (action) => {
-        const state = getState();
-
-        return shouldPreventRemove(
-          emitter,
-          beforeRemoveListeners,
-          state.routes,
-          [],
-          action
-        );
-      });
+      return addKeyedListener?.(
+        'beforeRemove',
+        routeKey,
+        (action, nextState) => {
+          const state = getState();
+
+          return shouldPreventRemove(
+            emitter,
+            beforeRemoveListeners,
+            state.routes,
+            nextState?.routes ?? [],
+            action
+          );
+        }
+      );
     }
   }, [addKeyedListener, beforeRemoveListeners, emitter, getState, routeKey]);
 }

package/src/useOnRouteFocus.tsx

@@ -5,13 +5,13 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 
-type Options<Action extends NavigationAction> = {
-  router: Router<NavigationState, Action>;
-  getState: () => NavigationState;
-  setState: (state: NavigationState) => void;
-  key?: string;
+type Options<State extends NavigationState, Action extends NavigationAction> = {
+  router: Router<State, Action>;
+  getState: () => State;
+  setState: (state: State) => void;
+  key?: string | undefined;
 };
 
 /**
@@ -19,15 +19,11 @@ type Options<Action extends NavigationAction> = {
  * Focus action needs to be treated specially, coz when a nested route is focused,
  * the parent navigators also needs to be focused.
  */
-export function useOnRouteFocus<Action extends NavigationAction>({
-  router,
-  getState,
-  key: sourceRouteKey,
-  setState,
-}: Options<Action>) {
-  const { onRouteFocus: onRouteFocusParent } = React.useContext(
-    NavigationBuilderContext
-  );
+export function useOnRouteFocus<
+  State extends NavigationState,
+  Action extends NavigationAction,
+>({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
+  const { onRouteFocus: onRouteFocusParent } = useNavigationBuilderContext();
 
   return React.useCallback(
     (key: string) => {

package/src/useOptionsGetters.tsx

@@ -1,42 +1,41 @@
-import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
-import { NavigationStateContext } from './NavigationStateContext';
-import type { NavigationProp } from './types';
+import { IsFocusedContext } from './useIsFocused';
+
+export const OptionsGetterContext = React.createContext<
+  ((key: string, getter: () => object | undefined | null) => void) | undefined
+>(undefined);
 
 type Options = {
   key?: string;
-  navigation?: NavigationProp<ParamListBase>;
   options?: object | undefined;
+  getFocusedRouteKey?: () => string | undefined;
 };
 
-export function useOptionsGetters({ key, options, navigation }: Options) {
+export function useOptionsGetters({
+  key,
+  options,
+  getFocusedRouteKey,
+}: Options) {
+  const isFocused = React.use(IsFocusedContext) ?? true;
+
   const optionsRef = React.useRef<object | undefined>(options);
   const optionsGettersFromChildRef = React.useRef<
     Record<string, () => object | undefined | null>
   >({});
 
-  const { onOptionsChange } = React.useContext(NavigationBuilderContext);
-  const { addOptionsGetter: parentAddOptionsGetter } = React.useContext(
-    NavigationStateContext
-  );
+  const onOptionsChange = React.use(NavigationBuilderContext)?.onOptionsChange;
 
-  const optionsChangeListener = React.useCallback(() => {
-    const isFocused = navigation?.isFocused() ?? true;
-    const hasChildren = Object.keys(optionsGettersFromChildRef.current).length;
+  const parentAddOptionsGetter = React.use(OptionsGetterContext);
 
-    if (isFocused && !hasChildren) {
-      onOptionsChange(optionsRef.current ?? {});
-    }
-  }, [navigation, onOptionsChange]);
-
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     optionsRef.current = options;
-    optionsChangeListener();
+  }, [options]);
 
-    return navigation?.addListener('focus', optionsChangeListener);
-  }, [navigation, options, optionsChangeListener]);
+  React.useEffect(() => {
+    onOptionsChange?.();
+  }, [isFocused, onOptionsChange, options]);
 
   const getOptionsFromListener = React.useCallback(() => {
     for (const key in optionsGettersFromChildRef.current) {
@@ -54,9 +53,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
   }, []);
 
   const getCurrentOptions = React.useCallback(() => {
-    const isFocused = navigation?.isFocused() ?? true;
-
-    if (!isFocused) {
+    // We use focused route key from the navigator instead of `isFocused`
+    // Because `isFocused` may reflect the value the screen last rendered with,
+    // e.g. if `Activity` hides the screen before it rendered the new value,
+    // it updates at a lower priority, so it may be delayed.
+    if (key != null && getFocusedRouteKey?.() !== key) {
       return null;
     }
 
@@ -67,24 +68,37 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     }
 
     return optionsRef.current;
-  }, [navigation, getOptionsFromListener]);
+  }, [key, getFocusedRouteKey, getOptionsFromListener]);
 
-  React.useEffect(() => {
-    return parentAddOptionsGetter?.(key!, getCurrentOptions);
+  React.useInsertionEffect(() => {
+    // We don't have a parent at the root
+    if (key != null) {
+      return parentAddOptionsGetter?.(key, getCurrentOptions);
+    }
   }, [getCurrentOptions, parentAddOptionsGetter, key]);
 
   const addOptionsGetter = React.useCallback(
     (key: string, getter: () => object | undefined | null) => {
       optionsGettersFromChildRef.current[key] = getter;
-      optionsChangeListener();
+
+      // Hidden screens may register without running their passive effects.
+      // Wait until the commit finishes before reporting their options.
+      if (onOptionsChange !== undefined) {
+        void Promise.resolve().then(onOptionsChange);
+      }
 
       return () => {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete optionsGettersFromChildRef.current[key];
-        optionsChangeListener();
+
+        // Other getters and the focused route may still change during cleanup.
+        // Wait until the commit finishes before reporting the remaining options.
+        if (onOptionsChange !== undefined) {
+          void Promise.resolve().then(onOptionsChange);
+        }
       };
     },
-    [optionsChangeListener]
+    [onOptionsChange]
   );
 
   return {

package/src/usePreventRemove.tsx

@@ -1,5 +1,4 @@
 import type { NavigationAction } from '@react-navigation/routers';
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
@@ -18,20 +17,29 @@ export function usePreventRemove(
   preventRemove: boolean,
   callback: (options: { data: { action: NavigationAction } }) => void
 ) {
-  const [id] = React.useState(() => nanoid());
+  const id = React.useId();
 
   const navigation = useNavigation();
   const { key: routeKey } = useRoute();
 
-  const { setPreventRemove } = usePreventRemoveContext();
+  const { setPreventRemove, notifyPreventRemove } = usePreventRemoveContext();
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     setPreventRemove(id, routeKey, preventRemove);
+
     return () => {
       setPreventRemove(id, routeKey, false);
     };
   }, [setPreventRemove, id, routeKey, preventRemove]);
 
+  React.useEffect(() => {
+    notifyPreventRemove();
+
+    return () => {
+      notifyPreventRemove();
+    };
+  }, [id, routeKey, preventRemove, notifyPreventRemove]);
+
   const beforeRemoveListener = useLatestCallback<
     EventListenerCallback<EventMapCore<any>, 'beforeRemove'>
   >((e) => {
@@ -44,7 +52,7 @@ export function usePreventRemove(
     callback({ data: e.data });
   });
 
-  React.useEffect(
+  React.useInsertionEffect(
     () => navigation?.addListener('beforeRemove', beforeRemoveListener),
     [navigation, beforeRemoveListener]
   );

package/src/usePreventRemoveContext.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { PreventRemoveContext } from './PreventRemoveContext';
 
 export function usePreventRemoveContext() {
-  const value = React.useContext(PreventRemoveContext);
+  const value = React.use(PreventRemoveContext);
 
   if (value == null) {
     throw new Error(
-      "Couldn't find the prevent remove context. Is your component inside NavigationContent?"
+      "Couldn't find the prevent remove context. This is likely a bug in the navigator.\n\nIf you're using a custom navigator, make sure that the navigator content is wrapped by the 'render' function returned by 'useNavigationBuilder'."
     );
   }
 

package/src/useRegisterNavigator.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 
 import { SingleNavigatorContext } from './EnsureSingleNavigator';
@@ -8,8 +7,9 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  * This is used to prevent multiple navigators under a single container or screen.
  */
 export function useRegisterNavigator() {
-  const [key] = React.useState(() => nanoid());
-  const container = React.useContext(SingleNavigatorContext);
+  const key = React.useId();
+
+  const container = React.use(SingleNavigatorContext);
 
   if (container === undefined) {
     throw new Error(
@@ -17,7 +17,7 @@ export function useRegisterNavigator() {
     );
   }
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     const { register, unregister } = container;
 
     register(key);

package/src/useRoute.tsx

@@ -5,15 +5,26 @@ import {
   NamedRouteContextListContext,
   NavigationRouteContext,
 } from './NavigationProvider';
-import type { RootParamList, RouteForName, RouteProp } from './types';
+import type {
+  NestedParamLists,
+  RootParamList,
+  RouteForName,
+  RouteProp,
+} from './types';
+import type { KeyOf } from './utilities';
 
 /**
  * Get all possible route names from a param list and its nested navigators.
+ * Recurses into the param lists directly instead of using `RouteForName`,
+ * So the route objects don't need to be built just to get the names.
  */
-type AllRouteNames<ParamList extends {}> = RouteForName<
-  ParamList,
-  string
->['name'];
+type AllRouteNames<ParamList extends {}> =
+  | KeyOf<ParamList>
+  | AllNestedRouteNames<NestedParamLists<ParamList>>;
+
+type AllNestedRouteNames<ParamLists> = ParamLists extends {}
+  ? AllRouteNames<ParamLists>
+  : never;
 
 /**
  * Hook to access the route prop of the parent screen anywhere.
@@ -22,7 +33,10 @@ type AllRouteNames<ParamList extends {}> = RouteForName<
  */
 export function useRoute<
   const ParamList extends {} = RootParamList,
-  const RouteName extends AllRouteNames<ParamList> = AllRouteNames<ParamList>,
+  // The `& string` reduces the constraint to a plain union of names,
+  // so errors for invalid names list the valid names
+  const RouteName extends AllRouteNames<ParamList> & string =
+    AllRouteNames<ParamList> & string,
 >(name: RouteName): RouteForName<ParamList, RouteName>;
 export function useRoute<
   const ParamList extends {} = RootParamList,

package/src/useRouteCache.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 import { isRecordEqual } from './isRecordEqual';
 import type { RouteProp } from './types';
 
-type RouteCache = Map<string, RouteProp<ParamListBase>>;
-
 /**
  * Utilities such as `getFocusedRouteNameFromRoute` need to access state.
  * So we need a way to suppress the warning for those use cases.
@@ -13,6 +11,10 @@ type RouteCache = Map<string, RouteProp<ParamListBase>>;
  */
 export const CHILD_STATE = Symbol('CHILD_STATE');
 
+type CachedRoute = RouteProp<ParamListBase> & {
+  [CHILD_STATE]?: NavigationState;
+};
+
 /**
  * Hook to cache route props for each screen in the navigator.
  * This lets add warnings and modifications to the route object but keep references between renders.
@@ -21,47 +23,67 @@ export function useRouteCache<State extends NavigationState>(
   routes: State['routes']
 ) {
   // Cache object which holds route objects for each screen
-  const cache = React.useMemo(() => ({ current: new Map() as RouteCache }), []);
+  const cache = React.useMemo(
+    () => ({ current: new Map<string, CachedRoute>() }),
+    []
+  );
 
-  cache.current = routes.reduce((acc, route) => {
-    const previous = cache.current.get(route.key);
-    const { state, ...routeWithoutState } = route;
+  const next = React.useMemo(() => {
+    return routes.reduce((acc, route) => {
+      const previous = cache.current.get(route.key);
 
-    let proxy;
+      const { state: _, ...routeWithoutState } = route;
 
-    if (previous && isRecordEqual(previous, routeWithoutState)) {
-      // If a cached route object already exists, reuse it
-      proxy = previous;
-    } else {
-      proxy = routeWithoutState;
-    }
+      let proxy: CachedRoute;
 
-    if (process.env.NODE_ENV !== 'production') {
-      // FIXME: since the state is updated with mutation, the route object cannot be frozen
-      // As a workaround, loop through the object and make the properties readonly
-      for (const key in proxy) {
-        // @ts-expect-error: this is fine since we are looping through the object
-        const value = proxy[key];
+      if (previous && isRecordEqual(previous, routeWithoutState)) {
+        // If a cached route object already exists, reuse it
+        proxy = previous;
+      } else {
+        proxy = routeWithoutState;
 
-        Object.defineProperty(proxy, key, {
-          enumerable: true,
-          configurable: true,
-          writable: false,
-          value,
-        });
+        if (process.env.NODE_ENV !== 'production') {
+          // FIXME: since the state is updated with mutation, the route object cannot be frozen
+          // As a workaround, loop through the object and make the properties readonly
+          // Only needed once per proxy - skip if we're reusing a previously-frozen one
+          for (const [key, value] of Object.entries(proxy)) {
+            Object.defineProperty(proxy, key, {
+              enumerable: true,
+              configurable: true,
+              writable: false,
+              value,
+            });
+          }
+        }
       }
-    }
 
-    Object.defineProperty(proxy, CHILD_STATE, {
-      enumerable: false,
-      configurable: true,
-      value: state,
-    });
+      acc.set(route.key, proxy);
 
-    acc.set(route.key, proxy);
+      return acc;
+    }, new Map<string, CachedRoute>());
+  }, [cache, routes]);
 
-    return acc;
-  }, new Map() as RouteCache);
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
+  // Update child state on every render, including when the memo is reused.
+  // This restores the previous child state when a pending render is canceled.
+  return Array.from(next.values(), (proxy, index) => {
+    const state = routes[index]?.state;
+
+    // FIXME: We mutate the child state without replacing the cached route object,
+    // so nested navigation doesn't re-render the parent screen.
+    // This is not concurrent render safe, pending renders mutate this shared child state.
+    // Then `getFocusedRouteNameFromRoute` can expose it before the render commits.
+    if (proxy[CHILD_STATE] !== state) {
+      Object.defineProperty(proxy, CHILD_STATE, {
+        enumerable: false,
+        configurable: true,
+        value: state,
+      });
+    }
 
-  return Array.from(cache.current.values());
+    return proxy;
+  });
 }

package/src/useScheduleUpdate.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 
 /**
  * When screen config changes, we want to update the navigator in the same update phase.
- * However, navigation state is in the root component and React won't let us update it from a child.
- * This is a workaround for that, the scheduled update is stored in the ref without actually calling setState.
- * It lets all subsequent updates access the latest state so it stays correct.
- * Then we call setState during after the component updates.
+ * However, navigation state is in the root component and React won't let us update it from a child during render.
+ * The render could also be interrupted in concurrent mode, so we need to update after commit.
+ * So we queue the update in an insertion effect and flush it in a layout effect.
+ * Insertion effects run before layout effects, so every navigator in the tree has queued its update before we flush.
+ * This lets nested updates be applied from the root down without clobbering each other.
  */
 export function useScheduleUpdate(callback: () => void) {
-  const { scheduleUpdate, flushUpdates } = React.useContext(
-    NavigationBuilderContext
-  );
+  const { scheduleUpdate, flushUpdates } = useNavigationBuilderContext();
 
-  // FIXME: This is potentially unsafe
-  // However, since we are using sync store, it might be fine
-  scheduleUpdate(callback);
+  const latestCallback = useLatestCallback(callback);
+
+  React.useInsertionEffect(() => {
+    scheduleUpdate(latestCallback);
+  });
 
   React.useLayoutEffect(flushUpdates);
 }

package/src/useStateForPath.tsx

@@ -9,7 +9,7 @@ import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStat
  * @returns Minimal state to build a path for the current route.
  */
 export function useStateForPath() {
-  const state = React.useContext(NavigationFocusedRouteStateContext);
+  const state = React.use(NavigationFocusedRouteStateContext);
 
   return state;
 }