@react-navigation/core 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/useNavigationBuilder.tsx

@@ -15,10 +15,12 @@ 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 { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationMetaContext } from './NavigationMetaContext';
 import { NavigationRouteContext } from './NavigationProvider';
@@ -36,11 +38,11 @@ import {
 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';
@@ -57,9 +59,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<{
@@ -276,8 +286,10 @@ const getRouteConfigsFromChildren = <
 };
 
 const getStateFromParams = (params: NavigatorRoute['params']) => {
-  if (params?.state != null) {
-    return params.state;
+  const state = params?.state;
+
+  if (isNavigationState(state)) {
+    return state;
   } else if (typeof params?.screen === 'string' && params?.initial !== false) {
     return {
       routes: [
@@ -319,9 +331,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?.isConsumed(route.params)
+      : false;
 
   const {
     children,
@@ -365,44 +382,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(
@@ -410,6 +390,31 @@ export function useNavigationBuilder<
     );
   }
 
+  const screens: Record<
+    string,
+    ScreenConfigWithParent<State, ScreenOptions, EventMap>
+  > = {};
+
+  const routeKeyList: Record<string, React.Key | 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.map((key) => key ?? '').join(':');
+    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,
@@ -417,7 +422,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]
   );
@@ -435,16 +442,22 @@ export function useNavigationBuilder<
     setKey,
     getKey,
     getIsInitial,
-  } = React.useContext(NavigationStateContext);
+  } = React.use(NavigationStateContext);
 
-  const stateCleanedUp = React.useRef(false);
+  const stateCleanupRef = React.useRef<boolean>(false);
+  const lastStateRef = React.useRef<State | PartialState<State> | undefined>(
+    undefined
+  );
 
   const setState = useLatestCallback(
-    (state: NavigationState | PartialState<NavigationState> | undefined) => {
-      if (stateCleanedUp.current) {
+    (state: State | PartialState<State> | undefined) => {
+      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;
       }
 
@@ -456,15 +469,36 @@ export function useNavigationBuilder<
     stateBeforeInitialization,
     initializedState,
     isFirstStateInitialization,
+    paramsUsedForInitialization,
   ] = React.useMemo((): [
     PartialState<State> | undefined,
     State | undefined,
     boolean,
+    object | undefined,
   ] => {
+    // 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: State = isStateInitialized(lastStateRef.current)
+        ? lastStateRef.current
+        : router.getRehydratedState(lastStateRef.current, {
+            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 &&
@@ -493,7 +527,8 @@ export function useNavigationBuilder<
       !(
         typeof route?.params?.screen === 'string' &&
         route?.params?.initial !== false
-      )
+      ) &&
+      !isNestedParamsConsumed
     ) {
       return [
         undefined,
@@ -503,28 +538,40 @@ 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)
+        : 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 &&
         options.routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(stateBeforeInitialization)
       ) {
-        return [stateBeforeInitialization, hydratedState, true];
+        return [stateBeforeInitialization, hydratedState, true, paramsForState];
       }
 
-      return [undefined, hydratedState, false];
+      return [undefined, hydratedState, false, 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
@@ -602,38 +649,33 @@ export function useNavigationBuilder<
     });
   }
 
-  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: CommonActions.Action | undefined;
+    const stateFromParams = route.params.state;
+
+    if (isNavigationState(stateFromParams) && !isNestedParamsConsumed) {
+      didConsumeNestedParams = true;
 
-    if (
-      typeof route.params.state === 'object' &&
-      route.params.state != null &&
-      route.params !== previousParams
-    ) {
       if (
         options.routeNamesChangeBehavior === 'lastUnhandled' &&
-        doesStateHaveOnlyInvalidRoutes(route.params.state)
+        doesStateHaveOnlyInvalidRoutes(stateFromParams)
       ) {
-        if (route.params.state !== unhandledState) {
-          setUnhandledState(route.params.state);
+        if (stateFromParams !== unhandledState) {
+          setUnhandledState(stateFromParams);
         }
       } else {
         // If the route was updated with new state, we should reset to it
-        action = CommonActions.reset(route.params.state);
+        action = CommonActions.reset(stateFromParams);
       }
     } 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)
@@ -674,14 +716,24 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  const shouldUpdate =
-    state !== nextState ||
-    typeof route?.params?.state === 'object' ||
-    typeof route?.params?.screen === 'string';
+  const setConsumedParams = consumedParams?.setConsumed;
+
+  React.useEffect(() => {
+    if (
+      setConsumedParams &&
+      didConsumeNestedParams &&
+      typeof route?.params === 'object' &&
+      route.params != null
+    ) {
+      setConsumedParams(route.params);
+    }
+  }, [didConsumeNestedParams, route?.params, setConsumedParams]);
+
+  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) {
@@ -695,26 +747,41 @@ export function useNavigationBuilder<
   // 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<State | null>(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 (!getIsInitial() && lastNotifiedStateRef.current !== state) {
       // 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
       // This is necessary for proper screen tracking, URL updates etc.
-      setState(nextState);
+      // We only notify if the state is different 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
   }, []);
@@ -742,6 +809,8 @@ export function useNavigationBuilder<
     );
   });
 
+  const { onEmitEvent } = React.use(NavigationBuilderContext);
+
   const emitter = useEventEmitter<EventMapCore<State>>((e) => {
     const routeNames = [];
 
@@ -764,35 +833,54 @@ 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
+    );
+
+    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 = ([] 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));
+    }
 
-    listeners.forEach((listener) => listener?.(e));
+    onEmitEvent({
+      type: e.type,
+      data: e.data,
+      target: e.target,
+      defaultPrevented: e.defaultPrevented,
+    });
   });
 
   useFocusEvents({ state, emitter });
@@ -827,7 +915,7 @@ export function useNavigationBuilder<
     setState,
   });
 
-  const onUnhandledActionParent = React.useContext(UnhandledActionContext);
+  const onUnhandledActionParent = React.use(UnhandledActionContext);
 
   const onUnhandledAction = useLatestCallback((action: NavigationAction) => {
     if (
@@ -893,9 +981,7 @@ export function useNavigationBuilder<
     ScreenOptions,
     EventMap
   >({
-    routes: router.getRoutesFromState
-      ? router.getRoutesFromState(state)
-      : state.routes,
+    routes: state.routes,
     screens,
     navigation,
     screenOptions,
@@ -911,13 +997,13 @@ export function useNavigationBuilder<
     emitter,
   });
 
-  useCurrentRender({
-    state,
-    navigation,
-    descriptors,
-  });
-
   const NavigationContent = useComponent((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 element =
       layout != null
         ? layout({
@@ -932,7 +1018,9 @@ export function useNavigationBuilder<
       <NavigationMetaContext.Provider value={undefined}>
         <NavigationHelpersContext.Provider value={navigation}>
           <NavigationStateListenerProvider state={state}>
-            <PreventRemoveProvider>{element}</PreventRemoveProvider>
+            <FocusedRouteKeyContext.Provider value={focusedRoute.key}>
+              <PreventRemoveProvider>{element}</PreventRemoveProvider>
+            </FocusedRouteKeyContext.Provider>
           </NavigationStateListenerProvider>
         </NavigationHelpersContext.Provider>
       </NavigationMetaContext.Provider>

package/src/useNavigationCache.tsx

@@ -23,8 +23,8 @@ type Options<
     Partial<NavigationProp<ParamListBase, string, any, any, any>>;
   setOptions: (
     cb: (
-      options: Record<string, ScreenOptions>
-    ) => Record<string, ScreenOptions>
+      options: Record<string, Partial<ScreenOptions> | undefined>
+    ) => Record<string, Partial<ScreenOptions> | undefined>
   ) => void;
   router: Router<State, NavigationAction>;
   emitter: NavigationEventEmitter<EventMap>;
@@ -72,8 +72,8 @@ export function useNavigationCache<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
-  const { stackRef } = React.useContext(NavigationBuilderContext);
+  const parentNavigationHelpers = React.use(NavigationContext);
+  const { stackRef } = React.use(NavigationBuilderContext);
 
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
@@ -174,7 +174,7 @@ export function useNavigationCache<
 
           return parentNavigationHelpers;
         },
-        setOptions: (options: object) => {
+        setOptions: (options: Partial<ScreenOptions>) => {
           setOptions((o) => ({
             ...o,
             [route.key]: { ...o[route.key], ...options },
@@ -183,7 +183,7 @@ export function useNavigationCache<
         isFocused: () => {
           const state = rest.getState();
 
-          if (state.routes[state.index].key !== route.key) {
+          if (state.routes[state.index]?.key !== route.key) {
             return false;
           }
 

package/src/useNavigationHelpers.tsx

@@ -41,7 +41,7 @@ export function useNavigationHelpers<
   router,
   stateRef,
 }: Options<State, Action>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
+  const parentNavigationHelpers = React.use(NavigationContext);
 
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {

package/src/useNavigationIndependentTree.tsx

@@ -3,5 +3,5 @@ import * as React from 'react';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 
 export function useNavigationIndependentTree() {
-  return React.useContext(NavigationIndependentTreeContext);
+  return React.use(NavigationIndependentTreeContext);
 }

package/src/useNavigationState.tsx

@@ -15,6 +15,8 @@ type NavigationStateListener = {
   subscribe: (callback: () => void) => () => void;
 };
 
+type UseNavigationForName = (name: string) => NavigationProp<ParamListBase>;
+
 type NavigationStateForNested<
   Navigator,
   RouteName extends keyof NavigationListForNested<Navigator>,
@@ -35,8 +37,8 @@ type NavigationStateForNested<
 export function useNavigationState<
   const T,
   const Navigator = RootNavigator,
-  const RouteName extends
-    keyof NavigationListForNested<Navigator> = keyof NavigationListForNested<Navigator>,
+  const RouteName extends keyof NavigationListForNested<Navigator> =
+    keyof NavigationListForNested<Navigator>,
 >(
   routeName: RouteName,
   selector: (state: NavigationStateForNested<Navigator, RouteName>) => T
@@ -51,9 +53,9 @@ export function useNavigationState(...args: unknown[]): unknown {
 
   if (typeof args[0] === 'string') {
     // `useNavigation` uses `use` internally, so it's fine to call it conditionally
-    // @ts-expect-error we can't specify the type here
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    navigation = useNavigation(args[0]);
+    // Cast to a non-generic signature to skip overload resolution - otherwise TS
+    // eagerly expands `NavigationListForNested<RootNavigator>` at this call site.
+    navigation = (useNavigation as UseNavigationForName)(args[0]);
     selector = args[1];
   } else {
     selector = args[0];
@@ -117,8 +119,9 @@ export function NavigationStateListenerProvider({
   children: React.ReactNode;
 }) {
   const listeners = React.useRef<(() => void)[]>([]);
+  const stateRef = React.useRef(state);
 
-  const getState = useLatestCallback(() => state);
+  const getState = useLatestCallback(() => stateRef.current);
 
   const subscribe = useLatestCallback((callback: () => void) => {
     listeners.current.push(callback);
@@ -128,7 +131,8 @@ export function NavigationStateListenerProvider({
     };
   });
 
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
+    stateRef.current = state;
     listeners.current.forEach((callback) => callback());
   }, [state]);