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

package/src/useOnGetState.tsx

@@ -14,8 +14,8 @@ type Options = {
 };
 
 export function useOnGetState({ getState, getStateListeners }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
-  const route = React.useContext(NavigationRouteContext);
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const route = React.use(NavigationRouteContext);
   const key = route ? route.key : 'root';
 
   const getRehydratedState = React.useCallback(() => {
@@ -39,7 +39,9 @@ export function useOnGetState({ getState, getStateListeners }: Options) {
     return { ...state, routes };
   }, [getState, getStateListeners]);
 
-  React.useEffect(() => {
+  // Use insertion effect to preserve the listener under `<Activity mode="hidden">`
+  // So `getRootState` will still return state of nested navigators
+  React.useInsertionEffect(() => {
     return addKeyedListener?.('getState', key, getRehydratedState);
   }, [addKeyedListener, getRehydratedState, key]);
 }

package/src/useOnPreventRemove.tsx

@@ -1,6 +1,9 @@
 import type {
   NavigationAction,
+  NavigationRoute,
   NavigationState,
+  ParamListBase,
+  PartialRoute,
 } from '@react-navigation/routers';
 import * as React from 'react';
 
@@ -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,27 @@ export function useOnPreventRemove({
   emitter,
   beforeRemoveListeners,
 }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
-  const route = React.useContext(NavigationRouteContext);
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  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

@@ -7,11 +7,11 @@ import * as React from 'react';
 
 import { NavigationBuilderContext } 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,13 +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(
+export function useOnRouteFocus<
+  State extends NavigationState,
+  Action extends NavigationAction,
+>({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
+  const { onRouteFocus: onRouteFocusParent } = React.use(
     NavigationBuilderContext
   );
 

package/src/useOptionsGetters.tsx

@@ -17,8 +17,8 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     Record<string, () => object | undefined | null>
   >({});
 
-  const { onOptionsChange } = React.useContext(NavigationBuilderContext);
-  const { addOptionsGetter: parentAddOptionsGetter } = React.useContext(
+  const { onOptionsChange } = React.use(NavigationBuilderContext);
+  const { addOptionsGetter: parentAddOptionsGetter } = React.use(
     NavigationStateContext
   );
 
@@ -31,8 +31,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     }
   }, [navigation, onOptionsChange]);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     optionsRef.current = options;
+  }, [options]);
+
+  React.useEffect(() => {
     optionsChangeListener();
 
     return navigation?.addListener('focus', optionsChangeListener);
@@ -69,8 +72,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     return optionsRef.current;
   }, [navigation, 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(

package/src/usePreventRemove.tsx

@@ -23,15 +23,24 @@ export function usePreventRemove(
   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 +53,7 @@ export function usePreventRemove(
     callback({ data: e.data });
   });
 
-  React.useEffect(
+  React.useInsertionEffect(
     () => navigation?.addListener('beforeRemove', beforeRemoveListener),
     [navigation, beforeRemoveListener]
   );

package/src/usePreventRemoveContext.tsx

@@ -3,7 +3,7 @@ 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(

package/src/useRegisterNavigator.tsx

@@ -9,7 +9,7 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  */
 export function useRegisterNavigator() {
   const [key] = React.useState(() => nanoid());
-  const container = React.useContext(SingleNavigatorContext);
+  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.
@@ -21,9 +19,12 @@ 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, RouteProp<ParamListBase>>() }),
+    []
+  );
 
-  cache.current = routes.reduce((acc, route) => {
+  const next = routes.reduce((acc, route) => {
     const previous = cache.current.get(route.key);
     const { state, ...routeWithoutState } = route;
 
@@ -36,13 +37,11 @@ export function useRouteCache<State extends NavigationState>(
       proxy = routeWithoutState;
     }
 
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== 'production' && proxy !== previous) {
       // 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];
-
+      // 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,
@@ -52,16 +51,23 @@ export function useRouteCache<State extends NavigationState>(
       }
     }
 
-    Object.defineProperty(proxy, CHILD_STATE, {
-      enumerable: false,
-      configurable: true,
-      value: state,
-    });
+    // @ts-expect-error: this isn't in type definitions coz we want this private
+    if (proxy[CHILD_STATE] !== state) {
+      Object.defineProperty(proxy, CHILD_STATE, {
+        enumerable: false,
+        configurable: true,
+        value: state,
+      });
+    }
 
     acc.set(route.key, proxy);
 
     return acc;
-  }, new Map() as RouteCache);
+  }, new Map<string, RouteProp<ParamListBase>>());
+
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
 
-  return Array.from(cache.current.values());
+  return Array.from(next.values());
 }

package/src/useScheduleUpdate.tsx

@@ -4,19 +4,18 @@ import { NavigationBuilderContext } 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 } = React.use(NavigationBuilderContext);
 
-  // FIXME: This is potentially unsafe
-  // However, since we are using sync store, it might be fine
-  scheduleUpdate(callback);
+  React.useInsertionEffect(() => {
+    scheduleUpdate(callback);
+  });
 
   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;
 }

package/src/useSyncState.tsx

@@ -24,12 +24,29 @@ const createStore = <T,>(getInitialState: () => T) => {
   let isBatching = false;
   let didUpdate = false;
 
+  const notify = () => {
+    let error: { value: unknown } | undefined;
+
+    listeners.forEach((listener) => {
+      try {
+        listener();
+      } catch (e) {
+        error = error ?? { value: e };
+      }
+    });
+
+    if (error) {
+      throw error.value;
+    }
+  };
+
   const setState = (newState: T) => {
     state = deepFreeze(newState);
-    didUpdate = true;
 
-    if (!isBatching) {
-      listeners.forEach((listener) => listener());
+    if (isBatching) {
+      didUpdate = true;
+    } else {
+      notify();
     }
   };
 
@@ -43,12 +60,16 @@ const createStore = <T,>(getInitialState: () => T) => {
 
   const batchUpdates = (callback: () => void) => {
     isBatching = true;
-    callback();
-    isBatching = false;
 
-    if (didUpdate) {
-      didUpdate = false;
-      listeners.forEach((listener) => listener());
+    try {
+      callback();
+    } finally {
+      isBatching = false;
+
+      if (didUpdate) {
+        didUpdate = false;
+        notify();
+      }
     }
   };
 
@@ -100,7 +121,11 @@ export function useSyncState<T>(getInitialState: () => T) {
 
     if (pendingUpdates.length !== 0) {
       store.batchUpdates(() => {
-        // Flush all the pending updates
+        // Updates are queued child-first as insertion effects run bottom-up.
+        // The root navigator replaces the whole state while nested navigators merge into it.
+        // So we apply them root-first to avoid the root clobbering nested updates.
+        pendingUpdates.reverse();
+
         for (const update of pendingUpdates) {
           update();
         }
@@ -114,6 +139,7 @@ export function useSyncState<T>(getInitialState: () => T) {
     state,
     getState: store.getState,
     setState: store.setState,
+    subscribe: store.subscribe,
     scheduleUpdate,
     flushUpdates,
   } as const;