@react-navigation/core 8.0.0-alpha.1 → 8.0.0-alpha.11

package/src/useCurrentRender.tsx

@@ -23,7 +23,7 @@ type Options = {
  * Mutating values like this is not safe in async mode, but it doesn't apply to SSR
  */
 export function useCurrentRender({ state, navigation, descriptors }: Options) {
-  const current = React.useContext(CurrentRenderContext);
+  const current = React.use(CurrentRenderContext);
 
   if (current && navigation.isFocused()) {
     current.options = descriptors[state.routes[state.index].key].options;

package/src/useDescriptors.tsx

@@ -67,7 +67,7 @@ type Options<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 > = {
-  state: State;
+  routes: State['routes'];
   screens: Record<
     string,
     ScreenConfigWithParent<State, ScreenOptions, EventMap>
@@ -99,7 +99,7 @@ export function useDescriptors<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 >({
-  state,
+  routes,
   screens,
   navigation,
   screenOptions,
@@ -113,17 +113,18 @@ export function useDescriptors<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const theme = React.useContext(ThemeContext);
+  const theme = React.use(ThemeContext);
   const [options, setOptions] = React.useState<Record<string, ScreenOptions>>(
     {}
   );
   const {
     onDispatchAction,
+    onEmitEvent,
     onOptionsChange,
     scheduleUpdate,
     flushUpdates,
     stackRef,
-  } = React.useContext(NavigationBuilderContext);
+  } = React.use(NavigationBuilderContext);
 
   const context = React.useMemo(
     () => ({
@@ -133,6 +134,7 @@ export function useDescriptors<
       addKeyedListener,
       onRouteFocus,
       onDispatchAction,
+      onEmitEvent,
       onOptionsChange,
       scheduleUpdate,
       flushUpdates,
@@ -145,6 +147,7 @@ export function useDescriptors<
       addKeyedListener,
       onRouteFocus,
       onDispatchAction,
+      onEmitEvent,
       onOptionsChange,
       scheduleUpdate,
       flushUpdates,
@@ -152,13 +155,13 @@ export function useDescriptors<
     ]
   );
 
-  const { base, navigations } = useNavigationCache<
+  const navigations = useNavigationCache<
     State,
     ScreenOptions,
     EventMap,
     ActionHelpers
   >({
-    state,
+    routes,
     getState,
     navigation,
     setOptions,
@@ -166,7 +169,7 @@ export function useDescriptors<
     emitter,
   });
 
-  const routes = useRouteCache(state.routes);
+  const cachedRoutes = useRouteCache(routes);
 
   const getOptions = (
     route: RouteProp<ParamListBase, string>,
@@ -273,7 +276,7 @@ export function useDescriptors<
     );
   };
 
-  const descriptors = routes.reduce<
+  const descriptors = cachedRoutes.reduce<
     Record<
       string,
       Descriptor<
@@ -292,12 +295,7 @@ export function useDescriptors<
   >((acc, route, i) => {
     const navigation = navigations[route.key];
     const customOptions = getOptions(route, navigation, options[route.key]);
-    const element = render(
-      route,
-      navigation,
-      customOptions,
-      state.routes[i].state
-    );
+    const element = render(route, navigation, customOptions, routes[i]?.state);
 
     acc[route.key] = {
       route,
@@ -311,38 +309,5 @@ export function useDescriptors<
     return acc;
   }, {});
 
-  /**
-   * Create a descriptor object for a route.
-   *
-   * @param route Route object for which the descriptor should be created
-   * @param placeholder Whether the descriptor should be a placeholder, e.g. for a route not yet in the state
-   * @returns Descriptor object
-   */
-  const describe = (route: RouteProp<ParamListBase>, placeholder: boolean) => {
-    if (!placeholder) {
-      if (!(route.key in descriptors)) {
-        throw new Error(`Couldn't find a route with the key ${route.key}.`);
-      }
-
-      return descriptors[route.key];
-    }
-
-    const navigation = base;
-    const customOptions = getOptions(route, navigation, {});
-    const element = render(route, navigation, customOptions, undefined);
-
-    return {
-      route,
-      navigation,
-      render() {
-        return element;
-      },
-      options: customOptions as ScreenOptions,
-    };
-  };
-
-  return {
-    describe,
-    descriptors,
-  };
+  return descriptors;
 }

package/src/useFocusEvents.tsx

@@ -17,7 +17,7 @@ export function useFocusEvents<State extends NavigationState>({
   state,
   emitter,
 }: Options<State>) {
-  const navigation = React.useContext(NavigationContext);
+  const navigation = React.use(NavigationContext);
   const lastFocusedKeyRef = React.useRef<string | undefined>(undefined);
 
   const currentFocusedKey = state.routes[state.index].key;

package/src/useFocusedListenersChildrenAdapter.tsx

@@ -20,7 +20,7 @@ export function useFocusedListenersChildrenAdapter({
   navigation,
   focusedListeners,
 }: Options) {
-  const { addListener } = React.useContext(NavigationBuilderContext);
+  const { addListener } = React.use(NavigationBuilderContext);
 
   const listener = React.useCallback(
     (callback: FocusedNavigationCallback<any>) => {

package/src/useIsFocused.tsx

@@ -1,32 +1,25 @@
 import * as React from 'react';
 
-import { useNavigation } from './useNavigation';
+export const FocusedRouteKeyContext = React.createContext<string | undefined>(
+  undefined
+);
+
+export const IsFocusedContext = React.createContext<boolean | undefined>(
+  undefined
+);
 
 /**
  * Hook to get the current focus state of the screen. Returns a `true` if screen is focused, otherwise `false`.
  * This can be used if a component needs to render something based on the focus state.
  */
 export function useIsFocused(): boolean {
-  const navigation = useNavigation();
-
-  const subscribe = React.useCallback(
-    (callback: () => void) => {
-      const unsubscribeFocus = navigation.addListener('focus', callback);
-      const unsubscribeBlur = navigation.addListener('blur', callback);
-
-      return () => {
-        unsubscribeFocus();
-        unsubscribeBlur();
-      };
-    },
-    [navigation]
-  );
+  const isFocused = React.use(IsFocusedContext);
 
-  const value = React.useSyncExternalStore(
-    subscribe,
-    navigation.isFocused,
-    navigation.isFocused
-  );
+  if (isFocused === undefined) {
+    throw new Error(
+      "Couldn't determine focus state. Is your component inside a screen in a navigator?"
+    );
+  }
 
-  return value;
+  return isFocused;
 }

package/src/useNavigation.tsx

@@ -27,8 +27,8 @@ export function useNavigation<
 >(): NavigationListForNavigator<Navigator>[keyof NavigationListForNavigator<Navigator>];
 export function useNavigation<
   const Navigator = RootNavigator,
-  const RouteName extends
-    keyof NavigationListForNested<Navigator> = keyof NavigationListForNested<Navigator>,
+  const RouteName extends keyof NavigationListForNested<Navigator> =
+    keyof NavigationListForNested<Navigator>,
 >(name: RouteName): NavigationListForNested<Navigator>[RouteName];
 export function useNavigation(name?: string): unknown {
   const root = React.use(NavigationContainerRefContext);

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';
@@ -41,6 +43,7 @@ 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,7 +60,7 @@ PrivateValueStore;
 
 type NavigatorRoute = {
   key: string;
-  params?: NavigatorScreenParams<ParamListBase>;
+  params?: NavigatorScreenParams<ParamListBase> | undefined;
 };
 
 const isScreen = (
@@ -319,9 +322,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,
@@ -417,7 +425,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 +445,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,11 +472,32 @@ 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) => {
@@ -493,7 +530,8 @@ export function useNavigationBuilder<
       !(
         typeof route?.params?.screen === 'string' &&
         route?.params?.initial !== false
-      )
+      ) &&
+      !isNestedParamsConsumed
     ) {
       return [
         undefined,
@@ -503,28 +541,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,22 +652,18 @@ 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;
 
     if (
       typeof route.params.state === 'object' &&
       route.params.state != null &&
-      route.params !== previousParams
+      !isNestedParamsConsumed
     ) {
+      didConsumeNestedParams = true;
+
       if (
         options.routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(route.params.state)
@@ -632,8 +678,10 @@ export function useNavigationBuilder<
     } 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 +722,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,25 +753,35 @@ 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;
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -742,6 +810,8 @@ export function useNavigationBuilder<
     );
   });
 
+  const { onEmitEvent } = React.use(NavigationBuilderContext);
+
   const emitter = useEventEmitter<EventMapCore<State>>((e) => {
     const routeNames = [];
 
@@ -793,6 +863,13 @@ export function useNavigationBuilder<
       .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,
+    });
   });
 
   useFocusEvents({ state, emitter });
@@ -827,7 +904,7 @@ export function useNavigationBuilder<
     setState,
   });
 
-  const onUnhandledActionParent = React.useContext(UnhandledActionContext);
+  const onUnhandledActionParent = React.use(UnhandledActionContext);
 
   const onUnhandledAction = useLatestCallback((action: NavigationAction) => {
     if (
@@ -887,13 +964,15 @@ export function useNavigationBuilder<
     getStateListeners: keyedListeners.getState,
   });
 
-  const { describe, descriptors } = useDescriptors<
+  const descriptors = useDescriptors<
     State,
     ActionHelpers,
     ScreenOptions,
     EventMap
   >({
-    state,
+    routes: router.getRoutesFromState
+      ? router.getRoutesFromState(state)
+      : state.routes,
     screens,
     navigation,
     screenOptions,
@@ -930,7 +1009,11 @@ export function useNavigationBuilder<
       <NavigationMetaContext.Provider value={undefined}>
         <NavigationHelpersContext.Provider value={navigation}>
           <NavigationStateListenerProvider state={state}>
-            <PreventRemoveProvider>{element}</PreventRemoveProvider>
+            <FocusedRouteKeyContext.Provider
+              value={state.routes[state.index].key}
+            >
+              <PreventRemoveProvider>{element}</PreventRemoveProvider>
+            </FocusedRouteKeyContext.Provider>
           </NavigationStateListenerProvider>
         </NavigationHelpersContext.Provider>
       </NavigationMetaContext.Provider>
@@ -940,7 +1023,6 @@ export function useNavigationBuilder<
   return {
     state,
     navigation,
-    describe,
     descriptors,
     NavigationContent,
   };