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

package/lib/module/useNavigationBuilder.js

@@ -5,10 +5,10 @@ import deepEqual from 'fast-deep-equal';
 import * as React from 'react';
 import { isValidElementType } from 'react-is';
 import useLatestCallback from 'use-latest-callback';
+import { ConsumedParamsContext } from "./ConsumedParamsContext.js";
 import { deepFreeze } from "./deepFreeze.js";
 import { Group } from "./Group.js";
 import { isArrayEqual } from "./isArrayEqual.js";
-import { isRecordEqual } from "./isRecordEqual.js";
 import { NavigationBuilderContext } from "./NavigationBuilderContext.js";
 import { NavigationHelpersContext } from "./NavigationHelpersContext.js";
 import { NavigationMetaContext } from "./NavigationMetaContext.js";
@@ -20,11 +20,11 @@ import { PrivateValueStore } from "./types.js";
 import { UnhandledActionContext } from "./UnhandledActionContext.js";
 import { useChildListeners } from "./useChildListeners.js";
 import { useComponent } from "./useComponent.js";
-import { useCurrentRender } from "./useCurrentRender.js";
 import { useDescriptors } from "./useDescriptors.js";
 import { useEventEmitter } from "./useEventEmitter.js";
 import { useFocusedListenersChildrenAdapter } from "./useFocusedListenersChildrenAdapter.js";
 import { useFocusEvents } from "./useFocusEvents.js";
+import { FocusedRouteKeyContext } from "./useIsFocused.js";
 import { useKeyedChildListeners } from "./useKeyedChildListeners.js";
 import { useLazyValue } from "./useLazyValue.js";
 import { useNavigationHelpers } from "./useNavigationHelpers.js";
@@ -39,6 +39,7 @@ import { useScheduleUpdate } from "./useScheduleUpdate.js";
 // eslint-disable-next-line @typescript-eslint/no-unused-expressions
 import { jsx as _jsx } from "react/jsx-runtime";
 PrivateValueStore;
+const isNavigationState = state => state != null && typeof state === 'object' && 'routes' in state && Array.isArray(state.routes);
 const isScreen = child => {
   return child.type === Screen;
 };
@@ -52,7 +53,7 @@ const isValidKey = key => key === undefined || typeof key === 'string' && key !=
  *
  * @param children React Elements to extract the config from.
  */
-const getRouteConfigsFromChildren = (children, groupKey, groupOptions, groupLayout) => {
+const getRouteConfigsFromChildren = (children, groupKeys = [], groupOptions, groupLayout) => {
   const configs = React.Children.toArray(children).reduce((acc, child) => {
     if (/*#__PURE__*/React.isValidElement(child)) {
       if (isScreen(child)) {
@@ -69,7 +70,7 @@ const getRouteConfigsFromChildren = (children, groupKey, groupOptions, groupLayo
           throw new Error(`Got an invalid 'navigationKey' prop (${JSON.stringify(child.props.navigationKey)}) for the screen '${child.props.name}'. It must be a non-empty string or 'undefined'.`);
         }
         acc.push({
-          keys: [groupKey, child.props.navigationKey],
+          keys: [...groupKeys, child.props.navigationKey],
           options: groupOptions,
           layout: groupLayout,
           props: child.props
@@ -83,14 +84,14 @@ const getRouteConfigsFromChildren = (children, groupKey, groupOptions, groupLayo
 
         // When we encounter a fragment or group, we need to dive into its children to extract the configs
         // This is handy to conditionally define a group of screens
-        acc.push(...getRouteConfigsFromChildren(child.props.children, child.props.navigationKey,
+        acc.push(...getRouteConfigsFromChildren(child.props.children, child.props.navigationKey != null ? [...groupKeys, child.props.navigationKey] : groupKeys,
         // FIXME
         // @ts-expect-error: add validation
         child.type !== Group ? groupOptions : groupOptions != null ? [...groupOptions, child.props.screenOptions] : [child.props.screenOptions], typeof child.props.screenLayout === 'function' ? child.props.screenLayout : groupLayout));
         return acc;
       }
     }
-    throw new Error(`A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found ${/*#__PURE__*/React.isValidElement(child) ? `'${typeof child.type === 'string' ? child.type : child.type?.name}'${child.props != null && typeof child.props === 'object' && 'name' in child.props && child.props?.name ? ` for the screen '${child.props.name}'` : ''}` : typeof child === 'object' ? JSON.stringify(child) : `'${String(child)}'`}). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`);
+    throw new Error(`A navigator can only contain 'Screen', 'Group' or 'React.Fragment' as its direct children (found ${ /*#__PURE__*/React.isValidElement(child) ? `'${typeof child.type === 'string' ? child.type : child.type?.name}'${child.props != null && typeof child.props === 'object' && 'name' in child.props && child.props?.name ? ` for the screen '${child.props.name}'` : ''}` : typeof child === 'object' ? JSON.stringify(child) : `'${String(child)}'`}). To render this component in the navigator, pass it in the 'component' prop to 'Screen'.`);
   }, []);
   if (process.env.NODE_ENV !== 'production') {
     configs.forEach(config => {
@@ -136,9 +137,16 @@ const getRouteConfigsFromChildren = (children, groupKey, groupOptions, groupLayo
   }
   return configs;
 };
-const getStateFromParams = params => {
-  if (params?.state != null) {
-    return params.state;
+const getStateFromParams = (params, type) => {
+  const state = params?.state;
+  if (isNavigationState(state)) {
+    if (state.type != null && state.type !== type) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.error(`The state passed in the params is for a navigator of type '${state.type}', but it was passed to a navigator of type '${type}'. This can happen if the state was meant for a different navigator. The state will be discarded.`);
+      }
+      return undefined;
+    }
+    return state;
   } else if (typeof params?.screen === 'string' && params?.initial !== false) {
     return {
       routes: [{
@@ -160,7 +168,9 @@ const getStateFromParams = params => {
  */
 export function useNavigationBuilder(createRouter, options) {
   const navigatorKey = useRegisterNavigator();
-  const route = React.useContext(NavigationRouteContext);
+  const route = React.use(NavigationRouteContext);
+  const consumedParams = React.use(ConsumedParamsContext);
+  const isNestedParamsConsumed = typeof route?.params === 'object' && route.params != null ? consumedParams?.has(route.params) : false;
   const {
     children,
     layout,
@@ -185,31 +195,26 @@ export function useNavigationBuilder(createRouter, options) {
     }
     return original;
   });
-  const screens = routeConfigs.reduce((acc, config) => {
-    if (config.props.name in acc) {
-      throw new Error(`A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${config.props.name}')`);
-    }
-    acc[config.props.name] = config;
-    return acc;
-  }, {});
   const routeNames = routeConfigs.map(config => config.props.name);
-  const routeKeyList = routeNames.reduce((acc, curr) => {
-    acc[curr] = screens[curr].keys.map(key => key ?? '').join(':');
-    return acc;
-  }, {});
-  const routeParamList = routeNames.reduce((acc, curr) => {
-    const {
-      initialParams
-    } = screens[curr].props;
-    acc[curr] = initialParams;
-    return acc;
-  }, {});
-  const routeGetIdList = routeNames.reduce((acc, curr) => Object.assign(acc, {
-    [curr]: screens[curr].props.getId
-  }), {});
   if (!routeNames.length) {
     throw new Error("Couldn't find any screens for the navigator. Have you defined any screens as its children?");
   }
+  const screens = {};
+  const routeKeyList = {};
+  const routeParamList = {};
+  const routeGetIdList = {};
+  for (const config of routeConfigs) {
+    const name = config.props.name;
+    if (name in screens) {
+      throw new Error(`A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named '${name}')`);
+    }
+    screens[name] = config;
+    routeKeyList[name] = config.keys;
+    routeParamList[name] = config.props.initialParams;
+    Object.assign(routeGetIdList, {
+      [name]: config.props.getId
+    });
+  }
   const isStateValid = React.useCallback(state => state.type === undefined || state.type === router.type, [router.type]);
   const isStateInitialized = React.useCallback(state => state !== undefined && state.stale === false && isStateValid(state), [isStateValid]);
   const doesStateHaveOnlyInvalidRoutes = React.useCallback(state => state.routes.every(r => !routeNames.includes(r.name)), [routeNames]);
@@ -220,22 +225,41 @@ export function useNavigationBuilder(createRouter, options) {
     setKey,
     getKey,
     getIsInitial
-  } = React.useContext(NavigationStateContext);
-  const stateCleanedUp = React.useRef(false);
+  } = React.use(NavigationStateContext);
+  const {
+    onEmitEvent,
+    getIsStateEmitted
+  } = React.use(NavigationBuilderContext);
+  const stateCleanupRef = React.useRef(false);
+  const lastStateRef = React.useRef(undefined);
   const setState = useLatestCallback(state => {
-    if (stateCleanedUp.current) {
+    if (stateCleanupRef.current) {
+      // Store the state locally in case the current navigator is in `Activity`
+      lastStateRef.current = state;
+
       // State might have been already cleaned up due to unmount
-      // We do not want to expose API allowing to override this
-      // This would lead to old data preservation on main navigator unmount
+      // We don't want to update `route.state` in parent
+      // Otherwise it will be reused if a new navigator gets mounted
       return;
     }
     setCurrentState(state);
   });
-  const [stateBeforeInitialization, initializedState, isFirstStateInitialization] = React.useMemo(() => {
+  const [stateBeforeInitialization, initializedState, isFirstStateInitialization, paramsUsedForInitialization] = React.useMemo(() => {
+    // If the state was already cleaned up, but we have it stored in ref,
+    // It likely got cleaned up due to `<Activity mode="hidden">`
+    // We should reuse this state to avoid remounting screens
+    if (stateCleanupRef.current && lastStateRef.current && isStateValid(lastStateRef.current)) {
+      const state = isStateInitialized(lastStateRef.current) ? lastStateRef.current : router.getRehydratedState(lastStateRef.current, {
+        routeNames,
+        routeParamList,
+        routeGetIdList
+      });
+      return [undefined, state, false, undefined];
+    }
     const initialRouteParamList = routeNames.reduce((acc, curr) => {
       const {
         initialParams
-      } = screens[curr].props;
+      } = screens[curr]?.props ?? {};
       const initialParamsFromParams = route?.params?.state == null && route?.params?.initial !== false && route?.params?.screen === curr ? route.params.params : undefined;
       acc[curr] = initialParams !== undefined || initialParamsFromParams !== undefined ? {
         ...initialParams,
@@ -248,24 +272,32 @@ export function useNavigationBuilder(createRouter, options) {
     // We also need to re-initialize it if the state passed from parent was changed (maybe due to reset)
     // Otherwise assume that the state was provided as initial state
     // So we need to rehydrate it to make it usable
-    if ((currentState === undefined || !isStateValid(currentState)) && route?.params?.state == null && !(typeof route?.params?.screen === 'string' && route?.params?.initial !== false)) {
+    if ((currentState === undefined || !isStateValid(currentState)) && route?.params?.state == null && !(typeof route?.params?.screen === 'string' && route?.params?.initial !== false) && !isNestedParamsConsumed) {
       return [undefined, router.getInitialState({
         routeNames,
         routeParamList: initialRouteParamList,
         routeGetIdList
-      }), true];
+      }), true, undefined];
     } else {
-      const stateFromParams = getStateFromParams(route?.params);
+      const paramsForState = isNestedParamsConsumed ? undefined : route?.params;
+      const stateFromParams = paramsForState ? getStateFromParams(paramsForState, router.type) : undefined;
       const stateBeforeInitialization = stateFromParams ?? currentState;
-      const hydratedState = router.getRehydratedState(stateBeforeInitialization, {
+      const hydratedState = stateBeforeInitialization == null ? router.getInitialState({
+        routeNames,
+        routeParamList: initialRouteParamList,
+        routeGetIdList
+      }) : router.getRehydratedState(stateBeforeInitialization, {
         routeNames,
         routeParamList: initialRouteParamList,
         routeGetIdList
       });
-      if (options.routeNamesChangeBehavior === 'lastUnhandled' && doesStateHaveOnlyInvalidRoutes(stateBeforeInitialization)) {
-        return [stateBeforeInitialization, hydratedState, true];
+      if (stateBeforeInitialization != null && isStateValid(stateBeforeInitialization) && options.routeNamesChangeBehavior === 'lastUnhandled' && doesStateHaveOnlyInvalidRoutes(stateBeforeInitialization)) {
+        return [stateBeforeInitialization, hydratedState, true, paramsForState];
       }
-      return [undefined, hydratedState, false];
+      return [undefined, hydratedState, false,
+      // Current state is already initialized
+      // So params weren't used, and need to be handled later
+      isStateInitialized(currentState) ? undefined : paramsForState];
     }
     // We explicitly don't include routeNames, route.params etc. in the dep list
     // below. We want to avoid forcing a new state to be calculated in those cases
@@ -275,10 +307,17 @@ export function useNavigationBuilder(createRouter, options) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentState, router, isStateValid]);
   const previousRouteKeyListRef = React.useRef(routeKeyList);
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     previousRouteKeyListRef.current = routeKeyList;
   });
   const previousRouteKeyList = previousRouteKeyListRef.current;
+
+  // Names of the screens whose navigation key changed since the last render
+  const routeKeyChanges = Object.keys(routeKeyList).filter(name => {
+    const current = routeKeyList[name];
+    const previous = previousRouteKeyList[name];
+    return current != null && previous != null && !isArrayEqual(current, previous);
+  });
   const [unhandledState, setUnhandledState] = React.useState(stateBeforeInitialization);
 
   // An unhandled state is state that didn't have any valid routes
@@ -295,57 +334,65 @@ export function useNavigationBuilder(createRouter, options) {
   isStateInitialized(currentState) ? currentState : initializedState;
   let nextState = state;
   let shouldClearUnhandledState = false;
-
+  if (unhandledState != null && !isStateValid(unhandledState)) {
+    // The stored unhandled state is for a different type of navigator
+    // It can't be used with this navigator, so we discard it
+    setUnhandledState(undefined);
+  } else if (
   // Previously unhandled state is now valid again
   // And current state no longer has any valid routes
   // We should reuse the unhandled state instead of re-calculating the state
-  if (unhandledState?.routes.every(r => routeNames.includes(r.name)) && state?.routes.every(r => !routeNames.includes(r.name))) {
+  unhandledState?.routes.every(r => routeNames.includes(r.name)) && state?.routes.every(r => !routeNames.includes(r.name))) {
     shouldClearUnhandledState = true;
     nextState = router.getRehydratedState(unhandledState, {
       routeNames,
       routeParamList,
       routeGetIdList
     });
-  } else if (!isArrayEqual(state.routeNames, routeNames) || !isRecordEqual(routeKeyList, previousRouteKeyList)) {
+  } else if (!isArrayEqual(state.routeNames, routeNames) || routeKeyChanges.length !== 0) {
     // When the list of route names change, the router should handle it to remove invalid routes
     nextState = router.getStateForRouteNamesChange(state, {
       routeNames,
       routeParamList,
       routeGetIdList,
-      routeKeyChanges: Object.keys(routeKeyList).filter(name => name in previousRouteKeyList && routeKeyList[name] !== previousRouteKeyList[name])
+      routeKeyChanges
     });
   }
-  const previousNestedParamsRef = React.useRef(route?.params);
-  React.useEffect(() => {
-    previousNestedParamsRef.current = route?.params;
-  }, [route?.params]);
-  if (route?.params) {
-    const previousParams = previousNestedParamsRef.current;
+  let didConsumeNestedParams = route?.params === paramsUsedForInitialization;
+  if (route?.params && !didConsumeNestedParams) {
     let action;
-    if (typeof route.params.state === 'object' && route.params.state != null && route.params !== previousParams) {
-      if (options.routeNamesChangeBehavior === 'lastUnhandled' && doesStateHaveOnlyInvalidRoutes(route.params.state)) {
-        if (route.params.state !== unhandledState) {
-          setUnhandledState(route.params.state);
+    if (isNavigationState(route.params.state) && !isNestedParamsConsumed) {
+      didConsumeNestedParams = true;
+      const stateFromParams = getStateFromParams(route.params, router.type);
+      if (stateFromParams != null) {
+        if (options.routeNamesChangeBehavior === 'lastUnhandled' && doesStateHaveOnlyInvalidRoutes(stateFromParams)) {
+          if (stateFromParams !== unhandledState) {
+            setUnhandledState(stateFromParams);
+          }
+        } else {
+          // If the route was updated with new state, we should reset to it
+          action = CommonActions.reset(stateFromParams);
         }
-      } else {
-        // If the route was updated with new state, we should reset to it
-        action = CommonActions.reset(route.params.state);
       }
-    } else if (typeof route.params.screen === 'string' && (route.params.initial === false && isFirstStateInitialization || route.params !== previousParams)) {
+    } else if (typeof route.params.screen === 'string' && (route.params.initial === false && isFirstStateInitialization || !isNestedParamsConsumed)) {
+      didConsumeNestedParams = true;
       if (options.routeNamesChangeBehavior === 'lastUnhandled' && !routeNames.includes(route.params.screen)) {
-        const state = getStateFromParams(route.params);
+        const state = getStateFromParams(route.params, router.type);
         if (state != null && !deepEqual(state, unhandledState)) {
           setUnhandledState(state);
         }
       } else {
         // If the route was updated with new screen name and/or params, we should navigate there
-        action = CommonActions.navigate({
-          name: route.params.screen,
-          params: route.params.params,
-          path: route.params.path,
-          merge: route.params.merge,
-          pop: route.params.pop
-        });
+        action = {
+          type: 'NAVIGATE',
+          payload: {
+            name: route.params.screen,
+            params: route.params.params,
+            path: route.params.path,
+            merge: route.params.merge,
+            pop: route.params.pop
+          }
+        };
       }
     }
 
@@ -355,16 +402,25 @@ export function useNavigationBuilder(createRouter, options) {
       routeParamList,
       routeGetIdList
     }) : null;
+    if (process.env.NODE_ENV !== 'production' && action != null && updatedState === null) {
+      const names = routeNames.map(name => `'${name}'`).join(', ');
+      console.error(`The 'state' or 'screen' passed in the params couldn't be applied to the navigator with the screens: ${names}. This can happen if the params contain names of screens that don't exist in the navigator. The navigation specified in the params will be ignored.`);
+    }
     nextState = updatedState !== null ? router.getRehydratedState(updatedState, {
       routeNames,
       routeParamList,
       routeGetIdList
     }) : nextState;
   }
-  const shouldUpdate = state !== nextState || typeof route?.params?.state === 'object' || typeof route?.params?.screen === 'string';
+  React.useEffect(() => {
+    if (consumedParams && didConsumeNestedParams && typeof route?.params === 'object' && route.params != null) {
+      consumedParams.set(route.params, true);
+    }
+  }, [consumedParams, didConsumeNestedParams, route?.params]);
+  const shouldUpdate = state !== nextState;
   useScheduleUpdate(() => {
     if (shouldUpdate) {
-      // If the state needs to be updated, we'll schedule an update
+      // Schedule an update if the state needs to be updated
       setState(nextState);
       if (shouldClearUnhandledState) {
         setUnhandledState(undefined);
@@ -376,44 +432,54 @@ export function useNavigationBuilder(createRouter, options) {
   // We can't use the outdated state since the screens have changed, which will cause error due to mismatched config
   // So we override the state object we return to use the latest state as soon as possible
   state = nextState;
+
+  // Last state to reuse if component gets cleaned up due to `<Activity mode="hidden">`
+  React.useEffect(() => {
+    lastStateRef.current = state;
+  });
+  const lastNotifiedStateRef = React.useRef(null);
   React.useEffect(() => {
     // In strict mode, React will double-invoke effects.
     // So we need to reset the flag if component was not unmounted
-    stateCleanedUp.current = false;
+    stateCleanupRef.current = false;
     setKey(navigatorKey);
-    if (!getIsInitial()) {
-      // If it's not initial render, we need to update the state
-      // This will make sure that our container gets notifier of state changes due to new mounts
+    if ((!getIsInitial() || getIsStateEmitted()) && lastNotifiedStateRef.current !== state) {
+      // We need to notify the state update in these scenarios:
+      // 1. If it's not the initial render of the component containing the navigator
+      // 2. If the container has already emitted state before the navigator mounted
+      //
+      // This will make sure that the container gets notified of state changes due to new mounts
       // This is necessary for proper screen tracking, URL updates etc.
-      setState(nextState);
+      //
+      // During hydration, a nested navigator may mount after the container's initial state event.
+      // Or mount could be delayed due to conditional rendering, suspense etc.
+      // So only checking for the initial render is not enough.
+      // We also need to propagate the navigator's initial state when it mounts later,
+      // so the container is notified that the nested state is now available.
+      //
+      // We only notify if the state is different from what we already notified
+      // Otherwise, this goes into a loop when inside `<Activity mode="hidden">`
+      setState(state);
+      lastNotifiedStateRef.current = state;
     }
     return () => {
       // We need to clean up state for this navigator on unmount
       if (getCurrentState() !== undefined && getKey() === navigatorKey) {
         setCurrentState(undefined);
-        stateCleanedUp.current = true;
+        stateCleanupRef.current = true;
       }
+
+      // Reset so that StrictMode's second mount re-propagates state correctly.
+      // Without this, the guard above sees the same reference and skips setState,
+      // causing the initial state to be lost after cleanup wipes the container state.
+      lastNotifiedStateRef.current = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
-  // In some cases (e.g. route names change), internal state might have changed
-  // But it hasn't been committed yet, so hasn't propagated to the sync external store
-  // During this time, we need to return the internal state in `getState`
-  // Otherwise it can result in inconsistent state during render in children
-  // To avoid this, we use a ref for render phase, and immediately clear it on commit
-  const stateRef = React.useRef(state);
-  stateRef.current = state;
-  React.useLayoutEffect(() => {
-    stateRef.current = null;
-  });
   const getState = useLatestCallback(() => {
     const currentState = getCurrentState();
     return deepFreeze(isStateInitialized(currentState) ? currentState : initializedState);
   });
-  const {
-    onEmitEvent
-  } = React.useContext(NavigationBuilderContext);
   const emitter = useEventEmitter(e => {
     const routeNames = [];
     let route;
@@ -429,32 +495,33 @@ export function useNavigationBuilder(createRouter, options) {
     if (route == null) {
       return;
     }
-    const navigation = descriptors[route.key].navigation;
-    const listeners = [].concat(
-    // Get an array of listeners for all screens + common listeners on navigator
-    ...[screenListeners, ...routeNames.map(name => {
-      const {
-        listeners
-      } = screens[name].props;
-      return listeners;
-    })].map(listeners => {
-      const map = typeof listeners === 'function' ? listeners({
-        route: route,
-        navigation
-      }) : listeners;
-      return map ? Object.keys(map).filter(type => type === e.type).map(type => map?.[type]) : undefined;
-    }))
-    // We don't want same listener to be called multiple times for same event
-    // So we remove any duplicate functions from the array
-    .filter((cb, i, self) => cb && self.lastIndexOf(cb) === i);
-    listeners.forEach(listener => listener?.(e));
-    onEmitEvent({
-      type: e.type,
-      data: e.data,
-      target: e.target,
-      defaultPrevented: e.defaultPrevented
-    });
-  });
+    const hasPerScreenListeners = routeNames.some(name => screens[name]?.props.listeners != null);
+    if (screenListeners != null || hasPerScreenListeners) {
+      const descriptor = descriptors[route.key];
+      if (descriptor == null) {
+        throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+      }
+      const navigation = descriptor.navigation;
+      const listeners = [].concat(
+      // Get an array of listeners for all screens + common listeners on navigator
+      ...[screenListeners, ...routeNames.map(name => {
+        const {
+          listeners
+        } = screens[name]?.props ?? {};
+        return listeners;
+      })].map(listeners => {
+        const map = typeof listeners === 'function' ? listeners({
+          route: route,
+          navigation
+        }) : listeners;
+        return map ? Object.keys(map).filter(type => type === e.type).map(type => map?.[type]) : undefined;
+      }))
+      // We don't want same listener to be called multiple times for same event
+      // So we remove any duplicate functions from the array
+      .filter((cb, i, self) => cb && self.lastIndexOf(cb) === i);
+      listeners.forEach(listener => listener?.(e));
+    }
+  }, onEmitEvent);
   useFocusEvents({
     state,
     emitter
@@ -495,7 +562,7 @@ export function useNavigationBuilder(createRouter, options) {
     getState,
     setState
   });
-  const onUnhandledActionParent = React.useContext(UnhandledActionContext);
+  const onUnhandledActionParent = React.use(UnhandledActionContext);
   const onUnhandledAction = useLatestCallback(action => {
     if (options.routeNamesChangeBehavior === 'lastUnhandled' && action.type === 'NAVIGATE' && action.payload != null && 'name' in action.payload && typeof action.payload.name === 'string' && !routeNames.includes(action.payload.name)) {
       const state = {
@@ -513,9 +580,9 @@ export function useNavigationBuilder(createRouter, options) {
     onAction,
     onUnhandledAction,
     getState,
+    state,
     emitter,
-    router,
-    stateRef
+    router
   });
   useFocusedListenersChildrenAdapter({
     navigation,
@@ -526,7 +593,7 @@ export function useNavigationBuilder(createRouter, options) {
     getStateListeners: keyedListeners.getState
   });
   const descriptors = useDescriptors({
-    routes: router.getRoutesFromState ? router.getRoutesFromState(state) : state.routes,
+    routes: state.routes,
     screens,
     navigation,
     screenOptions,
@@ -541,12 +608,11 @@ export function useNavigationBuilder(createRouter, options) {
     // @ts-expect-error: this should have both core and custom events, but too much work right now
     emitter
   });
-  useCurrentRender({
-    state,
-    navigation,
-    descriptors
-  });
   const NavigationContent = useComponent(children => {
+    const focusedRoute = state.routes[state.index];
+    if (focusedRoute == null) {
+      throw new Error(`Couldn't find a route at index ${state.index}.`);
+    }
     const element = layout != null ? layout({
       state,
       descriptors,
@@ -559,8 +625,12 @@ export function useNavigationBuilder(createRouter, options) {
         value: navigation,
         children: /*#__PURE__*/_jsx(NavigationStateListenerProvider, {
           state: state,
-          children: /*#__PURE__*/_jsx(PreventRemoveProvider, {
-            children: element
+          getState: navigation.getState,
+          children: /*#__PURE__*/_jsx(FocusedRouteKeyContext.Provider, {
+            value: focusedRoute.key,
+            children: /*#__PURE__*/_jsx(PreventRemoveProvider, {
+              children: element
+            })
           })
         })
       })