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

package/src/useNavigationBuilder.tsx

@@ -15,14 +15,13 @@ import * as React from 'react';
 import { isValidElementType } from 'react-is';
 import useLatestCallback from 'use-latest-callback';
 
+import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { deepFreeze } from './deepFreeze';
 import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
-import { isRecordEqual } from './isRecordEqual';
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
-import { NavigationMetaContext } from './NavigationMetaContext';
-import { NavigationRouteContext } from './NavigationProvider';
+import { IsScreenContext, NavigationRouteContext } from './NavigationProvider';
 import { NavigationStateContext } from './NavigationStateContext';
 import { PreventRemoveProvider } from './PreventRemoveProvider';
 import { Screen } from './Screen';
@@ -36,17 +35,17 @@ import {
 } from './types';
 import { UnhandledActionContext } from './UnhandledActionContext';
 import { useChildListeners } from './useChildListeners';
-import { useComponent } from './useComponent';
-import { useCurrentRender } from './useCurrentRender';
 import { type ScreenConfigWithParent, useDescriptors } from './useDescriptors';
 import { useEventEmitter } from './useEventEmitter';
 import { useFocusedListenersChildrenAdapter } from './useFocusedListenersChildrenAdapter';
 import { useFocusEvents } from './useFocusEvents';
+import { FocusedRouteKeyContext } from './useIsFocused';
 import { useKeyedChildListeners } from './useKeyedChildListeners';
 import { useLazyValue } from './useLazyValue';
 import { useNavigationHelpers } from './useNavigationHelpers';
 import { NavigationStateListenerProvider } from './useNavigationState';
 import { useOnAction } from './useOnAction';
+import { useOnGetNavigation } from './useOnGetNavigation';
 import { useOnGetState } from './useOnGetState';
 import { useOnRouteFocus } from './useOnRouteFocus';
 import { useRegisterNavigator } from './useRegisterNavigator';
@@ -58,9 +57,17 @@ PrivateValueStore;
 
 type NavigatorRoute = {
   key: string;
-  params?: NavigatorScreenParams<ParamListBase>;
+  params?: NavigatorScreenParams<ParamListBase> | undefined;
 };
 
+const isNavigationState = (
+  state: unknown
+): state is NavigationState | PartialState<NavigationState> =>
+  state != null &&
+  typeof state === 'object' &&
+  'routes' in state &&
+  Array.isArray(state.routes);
+
 const isScreen = (
   child: React.ReactElement<unknown>
 ): child is React.ReactElement<{
@@ -95,7 +102,7 @@ const getRouteConfigsFromChildren = <
   EventMap extends EventMapBase,
 >(
   children: React.ReactNode,
-  groupKey?: string,
+  groupKeys: string[] = [],
   groupOptions?: ScreenConfigWithParent<
     State,
     ScreenOptions,
@@ -138,7 +145,7 @@ const getRouteConfigsFromChildren = <
         }
 
         acc.push({
-          keys: [groupKey, child.props.navigationKey],
+          keys: [...groupKeys, child.props.navigationKey],
           options: groupOptions,
           layout: groupLayout,
           props: child.props as RouteConfig<
@@ -168,7 +175,9 @@ const getRouteConfigsFromChildren = <
         acc.push(
           ...getRouteConfigsFromChildren<State, ScreenOptions, EventMap>(
             child.props.children as React.ReactNode,
-            child.props.navigationKey,
+            child.props.navigationKey != null
+              ? [...groupKeys, child.props.navigationKey]
+              : groupKeys,
             // FIXME
             // @ts-expect-error: add validation
             child.type !== Group
@@ -276,9 +285,24 @@ const getRouteConfigsFromChildren = <
   return configs;
 };
 
-const getStateFromParams = (params: NavigatorRoute['params']) => {
-  if (params?.state != null) {
-    return params.state;
+const getStateFromParams = (
+  params: NavigatorRoute['params'],
+  type: string
+): NavigationState | PartialState<NavigationState> | undefined => {
+  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: [
@@ -320,9 +344,14 @@ export function useNavigationBuilder<
 ) {
   const navigatorKey = useRegisterNavigator();
 
-  const route = React.useContext(NavigationRouteContext) as
-    | NavigatorRoute
-    | undefined;
+  const route = React.use(NavigationRouteContext) as NavigatorRoute | undefined;
+
+  const consumedParams = React.use(ConsumedParamsContext);
+
+  const isNestedParamsConsumed =
+    typeof route?.params === 'object' && route.params != null
+      ? consumedParams?.has(route.params)
+      : false;
 
   const {
     children,
@@ -366,44 +395,7 @@ export function useNavigationBuilder<
     return original;
   });
 
-  const screens = routeConfigs.reduce<
-    Record<string, ScreenConfigWithParent<State, ScreenOptions, EventMap>>
-  >((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<Record<string, React.Key | undefined>>(
-    (acc, curr) => {
-      acc[curr] = screens[curr].keys.map((key) => key ?? '').join(':');
-      return acc;
-    },
-    {}
-  );
-  const routeParamList = routeNames.reduce<Record<string, object | undefined>>(
-    (acc, curr) => {
-      const { initialParams } = screens[curr].props;
-      acc[curr] = initialParams;
-      return acc;
-    },
-    {}
-  );
-  const routeGetIdList = routeNames.reduce<
-    RouterConfigOptions['routeGetIdList']
-  >(
-    (acc, curr) =>
-      Object.assign(acc, {
-        [curr]: screens[curr].props.getId,
-      }),
-    {}
-  );
 
   if (!routeNames.length) {
     throw new Error(
@@ -411,6 +403,31 @@ export function useNavigationBuilder<
     );
   }
 
+  const screens: Record<
+    string,
+    ScreenConfigWithParent<State, ScreenOptions, EventMap>
+  > = {};
+
+  const routeKeyList: Record<string, (string | undefined)[]> = {};
+  const routeParamList: Record<string, object | undefined> = {};
+  const routeGetIdList: RouterConfigOptions['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: NavigationState | PartialState<NavigationState>) =>
       state.type === undefined || state.type === router.type,
@@ -418,7 +435,9 @@ export function useNavigationBuilder<
   );
 
   const isStateInitialized = React.useCallback(
-    (state: NavigationState | PartialState<NavigationState> | undefined) =>
+    <T extends NavigationState>(
+      state: T | PartialState<T> | undefined
+    ): state is T =>
       state !== undefined && state.stale === false && isStateValid(state),
     [isStateValid]
   );
@@ -433,19 +452,36 @@ export function useNavigationBuilder<
     state: currentState,
     getState: getCurrentState,
     setState: setCurrentState,
+    subscribe,
     setKey,
     getKey,
     getIsInitial,
-  } = React.useContext(NavigationStateContext);
+  } = React.use(NavigationStateContext);
+
+  const {
+    onEmitEvent,
+    getIsStateEmitted,
+    canGoBack: canGoBackParent,
+  } = useNavigationBuilderContext();
 
-  const stateCleanedUp = React.useRef(false);
+  const mountStateRef = React.useRef<'initial' | 'mounted' | 'unmounted'>(
+    'initial'
+  );
+
+  const previousStateRef = React.useRef(currentState);
+  const savedStateRef = React.useRef<State | PartialState<State> | undefined>(
+    undefined
+  );
 
   const setState = useLatestCallback(
-    (state: NavigationState | PartialState<NavigationState> | undefined) => {
-      if (stateCleanedUp.current) {
+    (state: State | PartialState<State> | undefined) => {
+      if (mountStateRef.current === 'unmounted') {
+        // Store the state locally in case the current navigator is in `Activity`
+        savedStateRef.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;
       }
 
@@ -453,19 +489,46 @@ export function useNavigationBuilder<
     }
   );
 
+  const lastState =
+    (mountStateRef.current !== 'mounted' ||
+      !isStateInitialized(currentState)) &&
+    // If the state object differs from previously committed state, we have new state
+    // e.g. because of a reset
+    // So we need to use it before checking if we should reuse the saved state.
+    (currentState === previousStateRef.current ||
+      (mountStateRef.current === 'unmounted' && currentState === undefined))
+      ? // If the navigator is hidden with `Activity`, its state gets cleaned up due to effect cleanup.
+        // So we reuse the saved state to avoid remounting screens when the navigator is shown again.
+        savedStateRef.current
+      : undefined;
+
   const [
     stateBeforeInitialization,
     initializedState,
     isFirstStateInitialization,
+    paramsUsedForInitialization,
   ] = React.useMemo((): [
     PartialState<State> | undefined,
     State | undefined,
     boolean,
+    object | undefined,
   ] => {
+    if (lastState && isStateValid(lastState)) {
+      const state: State = isStateInitialized(lastState)
+        ? lastState
+        : router.getRehydratedState(lastState, {
+            routeNames,
+            routeParamList,
+            routeGetIdList,
+          });
+
+      return [undefined, state, false, undefined];
+    }
+
     const initialRouteParamList = routeNames.reduce<
       Record<string, object | undefined>
     >((acc, curr) => {
-      const { initialParams } = screens[curr].props;
+      const { initialParams } = screens[curr]?.props ?? {};
       const initialParamsFromParams =
         route?.params?.state == null &&
         route?.params?.initial !== false &&
@@ -494,7 +557,8 @@ export function useNavigationBuilder<
       !(
         typeof route?.params?.screen === 'string' &&
         route?.params?.initial !== false
-      )
+      ) &&
+      !isNestedParamsConsumed
     ) {
       return [
         undefined,
@@ -504,28 +568,48 @@ export function useNavigationBuilder<
           routeGetIdList,
         }),
         true,
+        undefined,
       ];
     } else {
-      const stateFromParams = getStateFromParams(route?.params);
-      const stateBeforeInitialization = (stateFromParams ??
-        currentState) as PartialState<State>;
-      const hydratedState = router.getRehydratedState(
-        stateBeforeInitialization,
-        {
-          routeNames,
-          routeParamList: initialRouteParamList,
-          routeGetIdList,
-        }
-      );
+      const paramsForState = isNestedParamsConsumed ? undefined : route?.params;
+      const stateFromParams = paramsForState
+        ? getStateFromParams(paramsForState, router.type)
+        : undefined;
+
+      const stateBeforeInitialization = (stateFromParams ?? currentState) as
+        | PartialState<State>
+        | undefined;
+
+      const hydratedState =
+        stateBeforeInitialization == null
+          ? router.getInitialState({
+              routeNames,
+              routeParamList: initialRouteParamList,
+              routeGetIdList,
+            })
+          : router.getRehydratedState(stateBeforeInitialization, {
+              routeNames,
+              routeParamList: initialRouteParamList,
+              routeGetIdList,
+            });
 
       if (
+        stateBeforeInitialization != null &&
+        isStateValid(stateBeforeInitialization) &&
         options.routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(stateBeforeInitialization)
       ) {
-        return [stateBeforeInitialization, hydratedState, true];
+        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
@@ -533,16 +617,26 @@ export function useNavigationBuilder<
     // that some changes to routeConfigs are explicitly ignored, such as changes
     // to initialParams
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [currentState, router, isStateValid]);
+  }, [currentState, lastState, 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<
     NavigationState | PartialState<NavigationState> | undefined
   >(stateBeforeInitialization);
@@ -563,17 +657,21 @@ export function useNavigationBuilder<
     // If the state isn't initialized, or stale, use the state we initialized instead
     // The state won't update until there's a change needed in the state we have initialized locally
     // So it'll be `undefined` or stale until the first navigation event happens
-    isStateInitialized(currentState)
+    lastState === undefined && isStateInitialized(currentState)
       ? (currentState as State)
       : (initializedState as State);
 
   let nextState: State = state;
   let shouldClearUnhandledState = false;
 
-  // 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 (
+  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
     unhandledState?.routes.every((r) => routeNames.includes(r.name)) &&
     state?.routes.every((r) => !routeNames.includes(r.name))
   ) {
@@ -588,71 +686,68 @@ export function useNavigationBuilder<
     );
   } else if (
     !isArrayEqual(state.routeNames, routeNames) ||
-    !isRecordEqual(routeKeyList, previousRouteKeyList)
+    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);
+  let didConsumeNestedParams = route?.params === paramsUsedForInitialization;
 
-  React.useEffect(() => {
-    previousNestedParamsRef.current = route?.params;
-  }, [route?.params]);
+  if (route?.params && !didConsumeNestedParams) {
+    let action: CommonActions.Action | undefined;
 
-  if (route?.params) {
-    const previousParams = previousNestedParamsRef.current;
+    if (isNavigationState(route.params.state) && !isNestedParamsConsumed) {
+      didConsumeNestedParams = true;
 
-    let action: CommonActions.Action | undefined;
+      const stateFromParams = getStateFromParams(route.params, router.type);
 
-    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 (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)
+        !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,
+          },
+        } as const;
       }
     }
 
@@ -665,6 +760,18 @@ export function useNavigationBuilder<
         })
       : 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, {
@@ -675,14 +782,22 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  const shouldUpdate =
-    state !== nextState ||
-    typeof route?.params?.state === 'object' ||
-    typeof route?.params?.screen === 'string';
+  React.useInsertionEffect(() => {
+    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) {
@@ -696,45 +811,60 @@ export function useNavigationBuilder<
   // So we override the state object we return to use the latest state as soon as possible
   state = nextState;
 
+  React.useInsertionEffect(() => {
+    savedStateRef.current = state;
+    previousStateRef.current = currentState;
+  });
+
+  React.useInsertionEffect(() => {
+    return () => {
+      // An initially hidden Activity doesn't run passive effects or their cleanup.
+      // We mark actual unmount here so queued updates can't write state into a replacement navigator.
+      mountStateRef.current = 'unmounted';
+    };
+  }, []);
+
   React.useEffect(() => {
+    const savedState = savedStateRef.current ?? state;
+
     // In strict mode, React will double-invoke effects.
-    // So we need to reset the flag if component was not unmounted
-    stateCleanedUp.current = false;
+    // So we need to reset the status if component was not unmounted
+    mountStateRef.current = 'mounted';
 
     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()) {
+      // 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.
+      setState(savedState);
     }
 
     return () => {
       // We need to clean up state for this navigator on unmount
       if (getCurrentState() !== undefined && getKey() === navigatorKey) {
         setCurrentState(undefined);
-        stateCleanedUp.current = true;
       }
+
+      mountStateRef.current = 'unmounted';
     };
     // 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 | null>(state);
-
-  stateRef.current = state;
-
-  React.useLayoutEffect(() => {
-    stateRef.current = null;
-  });
-
   const getState = useLatestCallback((): State => {
-    const currentState = getCurrentState();
+    const currentState =
+      mountStateRef.current === 'unmounted'
+        ? savedStateRef.current
+        : getCurrentState();
 
     return deepFreeze(
       (isStateInitialized(currentState)
@@ -743,8 +873,6 @@ export function useNavigationBuilder<
     );
   });
 
-  const { onEmitEvent } = React.useContext(NavigationBuilderContext);
-
   const emitter = useEventEmitter<EventMapCore<State>>((e) => {
     const routeNames = [];
 
@@ -767,43 +895,48 @@ export function useNavigationBuilder<
       return;
     }
 
-    const navigation = descriptors[route.key].navigation;
-
-    const listeners = ([] as (((e: any) => void) | undefined)[])
-      .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 as any, 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);
+    const hasPerScreenListeners = routeNames.some(
+      (name) => screens[name]?.props.listeners != null
+    );
 
-    listeners.forEach((listener) => listener?.(e));
+    if (screenListeners != null || hasPerScreenListeners) {
+      const descriptor = descriptors[route.key];
 
-    onEmitEvent({
-      type: e.type,
-      data: e.data,
-      target: e.target,
-      defaultPrevented: e.defaultPrevented,
-    });
-  });
+      if (descriptor == null) {
+        throw new Error(`Couldn't find a descriptor for route '${route.key}'.`);
+      }
+
+      const navigation = descriptor.navigation;
+
+      const listeners = ([] as (((e: any) => void) | undefined)[])
+        .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 as any, 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 });
 
@@ -837,7 +970,7 @@ export function useNavigationBuilder<
     setState,
   });
 
-  const onUnhandledActionParent = React.useContext(UnhandledActionContext);
+  const onUnhandledActionParent = React.use(UnhandledActionContext);
 
   const onUnhandledAction = useLatestCallback((action: NavigationAction) => {
     if (
@@ -873,6 +1006,31 @@ export function useNavigationBuilder<
     onUnhandledActionParent?.(action);
   });
 
+  const canGoBack = useLatestCallback((source?: string) => {
+    const state = getState();
+
+    return (
+      router.getStateForAction(
+        state,
+        { ...CommonActions.goBack(), source },
+        {
+          routeNames: state.routeNames,
+          routeParamList: {},
+          routeGetIdList: {},
+        }
+      ) !== null ||
+      canGoBackParent?.(
+        // If the `source` belonged to the current navigator,
+        // rewrite the `source` to the parent screen's key when checking
+        // This mirrors the way actions bubble up to the parent
+        source !== undefined && state.routes.some((r) => r.key === source)
+          ? route?.key
+          : source
+      ) ||
+      false
+    );
+  });
+
   const navigation = useNavigationHelpers<
     State,
     ActionHelpers,
@@ -881,10 +1039,10 @@ export function useNavigationBuilder<
   >({
     onAction,
     onUnhandledAction,
+    canGoBack,
     getState,
     emitter,
     router,
-    stateRef,
   });
 
   useFocusedListenersChildrenAdapter({
@@ -897,22 +1055,24 @@ export function useNavigationBuilder<
     getStateListeners: keyedListeners.getState,
   });
 
+  useOnGetNavigation({ navigation });
+
   const descriptors = useDescriptors<
     State,
     ActionHelpers,
     ScreenOptions,
     EventMap
   >({
-    routes: router.getRoutesFromState
-      ? router.getRoutesFromState(state)
-      : state.routes,
     screens,
+    state,
     navigation,
     screenOptions,
     screenLayout,
     onAction,
+    canGoBack,
     getState,
     setState,
+    subscribe,
     onRouteFocus,
     addListener,
     addKeyedListener,
@@ -921,13 +1081,13 @@ export function useNavigationBuilder<
     emitter,
   });
 
-  useCurrentRender({
-    state,
-    navigation,
-    descriptors,
-  });
+  const render = (children: React.ReactNode) => {
+    const focusedRoute = state.routes[state.index];
+
+    if (focusedRoute == null) {
+      throw new Error(`Couldn't find a route at index ${state.index}.`);
+    }
 
-  const NavigationContent = useComponent((children: React.ReactNode) => {
     const element =
       layout != null
         ? layout({
@@ -939,20 +1099,29 @@ export function useNavigationBuilder<
         : children;
 
     return (
-      <NavigationMetaContext.Provider value={undefined}>
-        <NavigationHelpersContext.Provider value={navigation}>
-          <NavigationStateListenerProvider state={state}>
-            <PreventRemoveProvider>{element}</PreventRemoveProvider>
-          </NavigationStateListenerProvider>
-        </NavigationHelpersContext.Provider>
-      </NavigationMetaContext.Provider>
+      <NavigationHelpersContext.Provider value={navigation}>
+        <NavigationStateListenerProvider
+          isSynced={!shouldUpdate}
+          state={state}
+          getState={getState}
+          subscribe={subscribe}
+        >
+          <FocusedRouteKeyContext.Provider value={focusedRoute.key}>
+            <PreventRemoveProvider>
+              <IsScreenContext.Provider value={false}>
+                {element}
+              </IsScreenContext.Provider>
+            </PreventRemoveProvider>
+          </FocusedRouteKeyContext.Provider>
+        </NavigationStateListenerProvider>
+      </NavigationHelpersContext.Provider>
     );
-  });
+  };
 
   return {
     state,
     navigation,
     descriptors,
-    NavigationContent,
+    render,
   };
 }