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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "8.0.0-alpha.30",
+  "version": "8.0.0-alpha.31",
   "keywords": [
     "react",
     "react-native",
@@ -40,16 +40,16 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^8.0.0-alpha.16",
+    "@react-navigation/routers": "^8.0.0-alpha.17",
     "escape-string-regexp": "^5.0.0",
     "fast-deep-equal": "^3.1.3",
     "nanoid": "^5.1.11",
     "query-string": "^9.4.0",
     "react-is": "^19.2.6",
-    "use-latest-callback": "^0.3.4"
+    "use-latest-callback": "^0.3.5"
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
+    "@jest/globals": "^30.4.1",
     "@testing-library/react-native": "^14.0.0",
     "@types/react": "~19.2.17",
     "@types/react-is": "^19.2.0",
@@ -84,5 +84,5 @@
       ]
     ]
   },
-  "gitHead": "3fe7f6011dbf6d4e72cecac211f2ca78ecab2260"
+  "gitHead": "f8dd4e8fa7b0c7ec159f9f58ab31660aca8f1bf6"
 }

package/src/BaseNavigationContainer.tsx

@@ -104,7 +104,7 @@ export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
     );
   }
 
-  const { state, getState, setState, scheduleUpdate, flushUpdates } =
+  const { state, getState, setState, subscribe, scheduleUpdate, flushUpdates } =
     useSyncState<State>(() =>
       getPartialState(initialState == null ? undefined : initialState)
     );
@@ -161,7 +161,7 @@ export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
 
   const resetRoot = useLatestCallback(
     (state: PartialState<NavigationState> | NavigationState) => {
-      const target = state?.key ?? keyedListeners.getState.root?.().key;
+      const target = keyedListeners.getState.root?.().key;
       const listener = listeners.focus[0];
 
       if (target == null || listener == null) {
@@ -317,12 +317,22 @@ export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
       state,
       getState,
       setState,
+      subscribe,
       getKey,
       setKey,
       getIsInitial,
       addOptionsGetter,
     }),
-    [state, getState, setState, getKey, setKey, getIsInitial, addOptionsGetter]
+    [
+      state,
+      getState,
+      setState,
+      subscribe,
+      getKey,
+      setKey,
+      getIsInitial,
+      addOptionsGetter,
+    ]
   );
 
   const onReadyRef = React.useRef(onReady);

package/src/NavigationIndependentTree.tsx

@@ -8,7 +8,10 @@ import {
   NavigationRouteContext,
 } from './NavigationProvider';
 import { IsFocusedContext } from './useIsFocused';
-import { NamedNavigationStateListenerListContext } from './useNavigationState';
+import {
+  NamedNavigationStateListenerListContext,
+  NavigationStateListenerContext,
+} from './useNavigationState';
 
 /**
  * Component to make the child navigation container independent of parent containers.
@@ -20,20 +23,22 @@ export function NavigationIndependentTree({
 }) {
   return (
     // We need to clear any existing contexts for nested independent container to work correctly
-    <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 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/NavigationStateContext.tsx

@@ -13,6 +13,7 @@ export const NavigationStateContext = React.createContext<{
   setState: (
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
+  subscribe: (callback: () => void) => () => void;
   getIsInitial: () => boolean;
   addOptionsGetter?:
     | ((key: string, getter: () => object | undefined | null) => void)
@@ -32,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/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>) {
@@ -152,6 +154,7 @@ export function SceneView<
       state: routeState,
       getState: getCurrentState,
       setState: setCurrentState,
+      subscribe,
       getKey,
       setKey,
       getIsInitial,
@@ -161,6 +164,7 @@ export function SceneView<
       routeState,
       getCurrentState,
       setCurrentState,
+      subscribe,
       getKey,
       setKey,
       getIsInitial,

package/src/findFocusedRoute.tsx

@@ -1,19 +1,14 @@
-import type { InitialState } from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
 
-type Result =
-  | {
-      key?: string | undefined;
-      name: string;
-      params?: object | undefined;
-      path?: string | undefined;
-    }
-  | undefined;
+type State = NavigationState | PartialState<NavigationState>;
 
-export function findFocusedRoute(state: InitialState): Result {
-  let current: InitialState | undefined = state;
+export function findFocusedRoute(
+  state: State
+): State['routes'][number] | undefined {
+  let current: State | undefined = state;
 
   while (current != null) {
-    const route: InitialState['routes'][number] | undefined =
+    const route: State['routes'][number] | undefined =
       current.routes[current.index ?? current.routes.length - 1];
 
     if (route?.state == null) {

package/src/getActionFromState.tsx

@@ -89,7 +89,8 @@ export function getActionFromState(
     return undefined;
   }
 
-  let current: PartialState<NavigationState> | undefined = route.state;
+  let current: NavigationState | PartialState<NavigationState> | undefined =
+    route.state;
   let config: ConfigItem | undefined = normalizedConfig?.screens?.[route.name];
   let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 

package/src/getStateFromPath.tsx

@@ -1,13 +1,8 @@
-import type {
-  InitialState,
-  NavigationState,
-  PartialState,
-} from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
 import escape from 'escape-string-regexp';
 import queryString from 'query-string';
 
 import { arrayStartsWith } from './arrayStartsWith';
-import { findFocusedRoute } from './findFocusedRoute';
 import {
   combinePatternParts,
   getPatternParts,
@@ -58,13 +53,10 @@ type InitialRouteConfig = {
   parentScreens: string[];
 };
 
-type ResultState = PartialState<NavigationState> & {
-  state?: ResultState | undefined;
-};
-
 type ParsedRoute = {
   name: string;
   params?: Record<string, unknown> | undefined;
+  path?: string | undefined;
 };
 
 type RoutePatternPart = PatternPart & { screen: string };
@@ -177,7 +169,7 @@ export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>,
   previous?: NavigationState
-): ResultState | undefined {
+): PartialState<NavigationState> | undefined {
   const {
     initialRoutes,
     configs,
@@ -1016,7 +1008,7 @@ const createStateObject = (
   initialRoute: string | undefined,
   route: ParsedRoute,
   isEmpty: boolean
-): InitialState => {
+): PartialState<NavigationState> => {
   if (isEmpty) {
     if (initialRoute) {
       return {
@@ -1047,7 +1039,32 @@ const createNestedStateObject = (
   routes: ParsedRoute[],
   initialRoutes: InitialRouteConfig[],
   routeConfig?: RouteConfig
-): InitialState | undefined => {
+): PartialState<NavigationState> | undefined => {
+  const focusedRoute = routes[routes.length - 1];
+
+  if (focusedRoute == null) {
+    return undefined;
+  }
+
+  focusedRoute.path = path.replace(/\/$/, '');
+
+  const queryParams = parseQueryParams(
+    path,
+    routeConfig?.parse,
+    routeConfig?.pathParamNames,
+    routeConfig?.explicitParamNames,
+    routeConfig?.hasNestedScreens,
+    focusedRoute.params
+  );
+
+  if (!queryParams.valid) {
+    return undefined;
+  }
+
+  if (queryParams.params) {
+    focusedRoute.params = { ...focusedRoute.params, ...queryParams.params };
+  }
+
   let route = routes.shift();
 
   if (route == null) {
@@ -1060,11 +1077,7 @@ const createNestedStateObject = (
 
   parentScreens.push(route.name);
 
-  const state: InitialState = createStateObject(
-    initialRoute,
-    route,
-    routes.length === 0
-  );
+  const state = createStateObject(initialRoute, route, routes.length === 0);
 
   if (routes.length > 0) {
     let nestedState = state;
@@ -1104,31 +1117,6 @@ const createNestedStateObject = (
     }
   }
 
-  const focusedRoute = findFocusedRoute(state);
-
-  if (focusedRoute == null) {
-    return undefined;
-  }
-
-  focusedRoute.path = path.replace(/\/$/, '');
-
-  const queryParams = parseQueryParams(
-    path,
-    routeConfig?.parse,
-    routeConfig?.pathParamNames,
-    routeConfig?.explicitParamNames,
-    routeConfig?.hasNestedScreens,
-    focusedRoute.params
-  );
-
-  if (!queryParams.valid) {
-    return undefined;
-  }
-
-  if (queryParams.params) {
-    focusedRoute.params = { ...focusedRoute.params, ...queryParams.params };
-  }
-
   return state;
 };
 

package/src/getStateFromRouteParams.tsx

@@ -44,7 +44,6 @@ export function getStateFromRouteParams(
             'path' in params && typeof params.path === 'string'
               ? params.path
               : undefined,
-          // @ts-expect-error this is fine 🔥
           state:
             'params' in params &&
             typeof params.params === 'object' &&

package/src/useDescriptors.tsx

@@ -78,6 +78,7 @@ type Options<
   onAction: (action: NavigationAction) => boolean;
   getState: () => State;
   setState: (state: State) => void;
+  subscribe: (callback: () => void) => () => void;
   addListener: AddListener;
   addKeyedListener: AddKeyedListener;
   onRouteFocus: (key: string) => void;
@@ -107,6 +108,7 @@ export function useDescriptors<
   onAction,
   getState,
   setState,
+  subscribe,
   addListener,
   addKeyedListener,
   onRouteFocus,
@@ -257,6 +259,7 @@ export function useDescriptors<
         routeState={routeState}
         getState={getState}
         setState={setState}
+        subscribe={subscribe}
         options={customOptions}
         clearOptions={clearOptions}
       />

package/src/useNavigationBuilder.tsx

@@ -453,6 +453,7 @@ export function useNavigationBuilder<
     state: currentState,
     getState: getCurrentState,
     setState: setCurrentState,
+    subscribe,
     setKey,
     getKey,
     getIsInitial,
@@ -1033,6 +1034,7 @@ export function useNavigationBuilder<
     onAction,
     getState,
     setState,
+    subscribe,
     onRouteFocus,
     addListener,
     addKeyedListener,
@@ -1064,6 +1066,7 @@ export function useNavigationBuilder<
           <NavigationStateListenerProvider
             state={state}
             getState={navigation.getState}
+            subscribe={subscribe}
           >
             <FocusedRouteKeyContext.Provider value={focusedRoute.key}>
               <PreventRemoveProvider>{element}</PreventRemoveProvider>

package/src/useNavigationState.tsx

@@ -1,12 +1,19 @@
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
-import useLatestCallback from 'use-latest-callback';
 
 import type { NavigationListForNested, RootNavigator } from './types';
 
+type NavigationStateEvent = 'update' | 'commit';
+
 type NavigationStateListener = {
   getState: () => NavigationState<ParamListBase>;
-  subscribe: (callback: () => void) => () => void;
+  getSnapshot: () => NavigationState<ParamListBase>;
+  subscribe: (callback: (event: NavigationStateEvent) => void) => () => void;
+};
+
+type NavigationStateEntry = {
+  listener: NavigationStateListener;
+  state: NavigationState<ParamListBase>;
 };
 
 type NavigationStateForNested<
@@ -74,68 +81,126 @@ export function useNavigationState(...args: unknown[]): unknown {
     }
   }
 
-  const { getState, subscribe } = listener;
+  const { getState, getSnapshot, subscribe } = listener;
+
+  // The store can contain state from a transition that hasn't committed yet.
+  // Reading it during render can show state that doesn't match the navigator in that render.
+  // The reducer lets React process state in the same render lane as the navigator.
+  const [entry, dispatch] = React.useReducer(
+    (previous: NavigationStateEntry, event: NavigationStateEvent) => {
+      // Navigation state can change between the dispatch and the reducer running.
+      // Reading here ensures the processed event uses the state for that render.
+      const state = event === 'update' ? getState() : getSnapshot();
+
+      if (
+        previous.listener === listener &&
+        (previous.state === state ||
+          (event === 'update' &&
+            Object.is(select(previous.state), select(state))))
+      ) {
+        return previous;
+      }
 
-  const [, forceUpdate] = React.useReducer((count: number) => count + 1, 0);
+      return { listener, state };
+    },
+    undefined,
+    () => ({ listener, state: getState() })
+  );
 
-  const selected = select(getState());
+  let state = entry.state;
 
-  const selectionRef = React.useRef({ select, selected });
+  const committedRef = React.useRef<{
+    entry: NavigationStateEntry | null;
+    state: NavigationState<ParamListBase>;
+    select: (state: NavigationState<ParamListBase>) => unknown;
+  }>({ entry: null, state, select });
 
-  React.useLayoutEffect(() => {
-    selectionRef.current = { select, selected };
+  React.useInsertionEffect(() => {
+    committedRef.current = { entry, state, select };
   });
 
-  React.useEffect(() => {
-    const checkForUpdates = () => {
-      const selection = selectionRef.current;
+  const snapshot = getSnapshot();
+
+  const behind =
+    state !== snapshot &&
+    // A different listener means the state belongs to another navigator.
+    // This can happen when the passed route name changes.
+    (entry.listener !== listener ||
+      // An entry that advanced past the last commit is at least as new as the snapshot.
+      // An entry that didn't advance while the committed state changed is older.
+      entry === committedRef.current.entry);
+
+  if (behind) {
+    state = snapshot;
+    dispatch('commit');
+  }
+
+  React.useLayoutEffect(() => {
+    const check = (event: NavigationStateEvent) => {
+      const { state, select } = committedRef.current;
+
+      // An 'update' event follows the latest state in the lane the update was made in.
+      // A 'commit' event syncs the reducer to the state committed by the navigator.
+      const target = event === 'update' ? getState() : getSnapshot();
 
-      if (!Object.is(selection.selected, selection.select(getState()))) {
-        forceUpdate();
+      if (state !== target && !Object.is(select(state), select(target))) {
+        dispatch(event);
       }
     };
 
-    const unsubscribe = subscribe(checkForUpdates);
+    const unsubscribe = subscribe(check);
 
-    // The state may have changed between the render and the subscription
-    checkForUpdates();
+    // The reducer may not match the committed state when the subscription starts.
+    // This happens on mount during a transition or an update before subscribing.
+    check('commit');
 
     return unsubscribe;
-  }, [getState, subscribe]);
+  }, [getState, getSnapshot, subscribe]);
 
-  return selected;
+  return select(state);
 }
 
 export function NavigationStateListenerProvider({
   state,
   getState,
+  subscribe,
   children,
 }: {
   state: NavigationState<ParamListBase>;
   getState: () => NavigationState<ParamListBase>;
+  subscribe: (callback: () => void) => () => void;
   children: React.ReactNode;
 }) {
-  const listeners = React.useRef<(() => void)[]>([]);
+  const snapshotRef = React.useRef(state);
 
-  const subscribe = useLatestCallback((callback: () => void) => {
-    listeners.current.push(callback);
+  React.useInsertionEffect(() => {
+    snapshotRef.current = state;
+  }, [state]);
 
-    return () => {
-      listeners.current = listeners.current.filter((cb) => cb !== callback);
-    };
-  });
+  const [listeners] = React.useState(
+    () => new Set<(event: NavigationStateEvent) => void>()
+  );
 
-  // Notify subscribers once the new state has committed
   React.useLayoutEffect(() => {
-    listeners.current.forEach((callback) => callback());
-  }, [state]);
+    listeners.forEach((listener) => listener('commit'));
+  }, [listeners, state]);
 
   const context = React.useMemo(
     () => ({
       getState,
-      subscribe,
+      getSnapshot: () => snapshotRef.current,
+      subscribe: (callback: (event: NavigationStateEvent) => void) => {
+        const unsubscribe = subscribe(() => callback('update'));
+
+        listeners.add(callback);
+
+        return () => {
+          listeners.delete(callback);
+          unsubscribe();
+        };
+      },
     }),
-    [getState, subscribe]
+    [getState, listeners, subscribe]
   );
 
   return (
@@ -177,7 +242,7 @@ export function NamedNavigationStateListenerProvider({
   );
 }
 
-const NavigationStateListenerContext = React.createContext<
+export const NavigationStateListenerContext = React.createContext<
   NavigationStateListener | undefined
 >(undefined);
 

package/src/useSyncState.tsx

@@ -24,13 +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);
 
     if (isBatching) {
       didUpdate = true;
     } else {
-      listeners.forEach((listener) => listener());
+      notify();
     }
   };
 
@@ -44,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();
+      }
     }
   };
 
@@ -119,6 +139,7 @@ export function useSyncState<T>(getInitialState: () => T) {
     state,
     getState: store.getState,
     setState: store.setState,
+    subscribe: store.subscribe,
     scheduleUpdate,
     flushUpdates,
   } as const;