@react-navigation/core 8.0.0-alpha.33 → 8.0.0-alpha.35

package/src/useFocusEffect.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { IsFocusedGetterContext } from './useIsFocused';
 import { useNavigation } from './useNavigation';
 
 type EffectCallback = () => undefined | void | (() => void);
@@ -14,6 +15,8 @@ type EffectCallback = () => undefined | void | (() => void);
 export function useFocusEffect(effect: EffectCallback) {
   const navigation = useNavigation();
 
+  const getIsFocused = React.use(IsFocusedGetterContext);
+
   // eslint-disable-next-line prefer-rest-params
   if (arguments[1] !== undefined) {
     const message =
@@ -72,7 +75,7 @@ export function useFocusEffect(effect: EffectCallback) {
     };
 
     // We need to run the effect on initial render/dep changes if the screen is focused
-    if (navigation.isFocused()) {
+    if (getIsFocused?.() ?? true) {
       cleanup = callback();
       isFocused = true;
     }
@@ -109,5 +112,5 @@ export function useFocusEffect(effect: EffectCallback) {
       unsubscribeFocus();
       unsubscribeBlur();
     };
-  }, [effect, navigation]);
+  }, [effect, navigation, getIsFocused]);
 }

package/src/useFocusEvents.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { NavigationContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
+import { IsFocusedGetterContext } from './useIsFocused';
 
 type Options<State extends NavigationState> = {
   state: State;
@@ -18,6 +19,8 @@ export function useFocusEvents<State extends NavigationState>({
   emitter,
 }: Options<State>) {
   const navigation = React.use(NavigationContext);
+  const getIsFocused = React.use(IsFocusedGetterContext);
+
   const lastFocusedKeyRef = React.useRef<string | undefined>(undefined);
 
   const currentFocusedRoute = state.routes[state.index];
@@ -51,7 +54,7 @@ export function useFocusEvents<State extends NavigationState>({
   React.useEffect(() => {
     const lastFocusedKey = lastFocusedKeyRef.current;
 
-    const isFocused = navigation ? navigation.isFocused() : true;
+    const isFocused = getIsFocused?.() ?? true;
 
     if (isFocused) {
       // Remember the current route as focused if the navigator is focused
@@ -77,5 +80,5 @@ export function useFocusEvents<State extends NavigationState>({
 
     emitter.emit({ type: 'blur', target: lastFocusedKey });
     emitter.emit({ type: 'focus', target: currentFocusedKey });
-  }, [currentFocusedKey, emitter, navigation]);
+  }, [currentFocusedKey, emitter, navigation, getIsFocused]);
 }

package/src/useFocusedListenersChildrenAdapter.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {
   type FocusedNavigationCallback,
   type FocusedNavigationListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import type { NavigationHelpers } from './types';
 
@@ -20,7 +20,7 @@ export function useFocusedListenersChildrenAdapter({
   navigation,
   focusedListeners,
 }: Options) {
-  const { addListener } = React.use(NavigationBuilderContext);
+  const { addListener } = useNavigationBuilderContext();
 
   const listener = React.useCallback(
     (callback: FocusedNavigationCallback<any>) => {

package/src/useIsFocused.tsx

@@ -8,6 +8,10 @@ export const IsFocusedContext = React.createContext<boolean | undefined>(
   undefined
 );
 
+export const IsFocusedGetterContext = 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.

package/src/useNavigationBuilder.tsx

@@ -19,7 +19,7 @@ import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { deepFreeze } from './deepFreeze';
 import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationMetaContext } from './NavigationMetaContext';
 import { IsScreenContext, NavigationRouteContext } from './NavigationProvider';
@@ -36,7 +36,6 @@ import {
 } from './types';
 import { UnhandledActionContext } from './UnhandledActionContext';
 import { useChildListeners } from './useChildListeners';
-import { useComponent } from './useComponent';
 import { type ScreenConfigWithParent, useDescriptors } from './useDescriptors';
 import { useEventEmitter } from './useEventEmitter';
 import { useFocusedListenersChildrenAdapter } from './useFocusedListenersChildrenAdapter';
@@ -460,20 +459,22 @@ export function useNavigationBuilder<
     getIsInitial,
   } = React.use(NavigationStateContext);
 
-  const { onEmitEvent, getIsStateEmitted } = React.use(
-    NavigationBuilderContext
+  const { onEmitEvent, getIsStateEmitted } = useNavigationBuilderContext();
+
+  const mountStateRef = React.useRef<'initial' | 'mounted' | 'unmounted'>(
+    'initial'
   );
 
-  const stateCleanupRef = React.useRef<boolean>(false);
-  const lastStateRef = React.useRef<State | PartialState<State> | undefined>(
+  const previousStateRef = React.useRef(currentState);
+  const savedStateRef = React.useRef<State | PartialState<State> | undefined>(
     undefined
   );
 
   const setState = useLatestCallback(
     (state: State | PartialState<State> | undefined) => {
-      if (stateCleanupRef.current) {
+      if (mountStateRef.current === 'unmounted') {
         // Store the state locally in case the current navigator is in `Activity`
-        lastStateRef.current = state;
+        savedStateRef.current = state;
 
         // State might have been already cleaned up due to unmount
         // We don't want to update `route.state` in parent
@@ -485,6 +486,19 @@ 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,
@@ -496,17 +510,10 @@ export function useNavigationBuilder<
     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, {
+    if (lastState && isStateValid(lastState)) {
+      const state: State = isStateInitialized(lastState)
+        ? lastState
+        : router.getRehydratedState(lastState, {
             routeNames,
             routeParamList,
             routeGetIdList,
@@ -607,7 +614,7 @@ 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);
 
@@ -647,7 +654,7 @@ 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);
 
@@ -772,7 +779,7 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     if (
       consumedParams &&
       didConsumeNestedParams &&
@@ -801,24 +808,29 @@ 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;
+  React.useInsertionEffect(() => {
+    savedStateRef.current = state;
+    previousStateRef.current = currentState;
   });
 
-  const lastNotifiedStateRef = React.useRef<State | null>(null);
+  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
-    stateCleanupRef.current = false;
+    // So we need to reset the status if component was not unmounted
+    mountStateRef.current = 'mounted';
 
     setKey(navigatorKey);
 
-    if (
-      (!getIsInitial() || getIsStateEmitted()) &&
-      lastNotifiedStateRef.current !== state
-    ) {
+    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
@@ -831,31 +843,25 @@ export function useNavigationBuilder<
       // 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;
+      setState(savedState);
     }
 
     return () => {
       // We need to clean up state for this navigator on unmount
       if (getCurrentState() !== undefined && getKey() === navigatorKey) {
         setCurrentState(undefined);
-        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;
+      mountStateRef.current = 'unmounted';
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const getState = useLatestCallback((): State => {
-    const currentState = getCurrentState();
+    const currentState =
+      mountStateRef.current === 'unmounted'
+        ? savedStateRef.current
+        : getCurrentState();
 
     return deepFreeze(
       (isStateInitialized(currentState)
@@ -1028,8 +1034,8 @@ export function useNavigationBuilder<
     ScreenOptions,
     EventMap
   >({
-    routes: state.routes,
     screens,
+    state,
     navigation,
     screenOptions,
     screenLayout,
@@ -1045,7 +1051,7 @@ export function useNavigationBuilder<
     emitter,
   });
 
-  const NavigationContent = useComponent((children: React.ReactNode) => {
+  const render = (children: React.ReactNode) => {
     const focusedRoute = state.routes[state.index];
 
     if (focusedRoute == null) {
@@ -1082,12 +1088,12 @@ export function useNavigationBuilder<
         </NavigationHelpersContext.Provider>
       </NavigationMetaContext.Provider>
     );
-  });
+  };
 
   return {
     state,
     navigation,
     descriptors,
-    NavigationContent,
+    render,
   };
 }

package/src/useNavigationCache.tsx

@@ -7,7 +7,7 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationContext } from './NavigationProvider';
 import type { NavigationHelpers, NavigationProp } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -72,128 +72,150 @@ export function useNavigationCache<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const parentNavigation = React.use(NavigationContext);
+  const { withStackTrace } = useNavigationBuilderContext();
 
-  const { withStackTrace } = React.use(NavigationBuilderContext);
+  const parentNavigation = React.use(NavigationContext);
 
   // 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
   // In reality, these deps will rarely change, if ever
-  const cache = React.useMemo(
-    () => ({
-      current: {} as NavigationCache<
-        State,
-        ScreenOptions,
-        EventMap,
-        ActionHelpers
-      >,
-    }),
+  const cache = React.useMemo<{
+    current: NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>;
+    routeNames: Record<string, string>;
+  }>(
+    () => ({ current: {}, routeNames: {} }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getState, parentNavigation, navigation, setOptions, emitter]
+    [
+      getState,
+      parentNavigation,
+      navigation,
+      setOptions,
+      router,
+      emitter,
+      withStackTrace,
+    ]
   );
 
-  const next = routes.reduce<
-    NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
-  >((acc, route) => {
-    const previous = cache.current[route.key];
-
-    if (previous) {
-      // If a cached navigation object already exists, reuse it
-      acc[route.key] = previous;
-    } else {
-      const dispatch = (
-        thunk:
-          | NavigationAction
-          | ((state: State) => NavigationAction | null | undefined)
-      ) => {
-        withStackTrace(dispatch, () => {
-          React.startTransition(() => {
-            const action =
-              typeof thunk === 'function' ? thunk(getState()) : thunk;
-
-            if (action != null) {
-              navigation.dispatch({ source: route.key, ...action });
-            }
+  const next = React.useMemo(() => {
+    return routes.reduce<
+      NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
+    >((acc, route) => {
+      const previous =
+        cache.routeNames[route.key] === route.name
+          ? cache.current[route.key]
+          : undefined;
+
+      if (previous) {
+        // If a cached navigation object already exists, reuse it
+        acc[route.key] = previous;
+      } else {
+        const dispatch = (
+          thunk:
+            | NavigationAction
+            | ((state: State) => NavigationAction | null | undefined)
+        ) => {
+          withStackTrace(dispatch, () => {
+            React.startTransition(() => {
+              const action =
+                typeof thunk === 'function' ? thunk(getState()) : thunk;
+
+              if (action != null) {
+                navigation.dispatch({ source: route.key, ...action });
+              }
+            });
           });
-        });
-      };
-
-      const actions = {
-        ...router.actionCreators,
-        ...CommonActions,
-      };
-
-      const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
-        (acc, name) => {
-          const helper = (...args: any) =>
-            withStackTrace(helper, () =>
-              // @ts-expect-error: name is a valid key, but TypeScript is dumb
-              dispatch(actions[name](...args))
-            );
-
-          acc[name] = helper;
-
-          return acc;
-        },
-        {}
-      );
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { emit, ...rest } = navigation;
-
-      acc[route.key] = {
-        ...rest,
-        ...helpers,
-        // FIXME: too much work to fix the types for now
-        ...(emitter.create(route.key) as any),
-        dispatch,
-        getParent: (routeName) => {
-          if (routeName === route.name) {
-            // If the passed route name is the same as the current route's name,
-            // we return the cached navigation object for the route
-            return acc[route.key];
-          }
-
-          if (routeName !== undefined) {
-            const parent = parentNavigation?.getParent(routeName);
-
-            if (parent === undefined) {
-              throw new Error(
-                `Couldn't find a navigation object for '${routeName}' in current or any parent screens. Is your component inside the correct screen?`
+        };
+
+        const actions = {
+          ...router.actionCreators,
+          ...CommonActions,
+        };
+
+        const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
+          (acc, name) => {
+            const helper = (...args: any) =>
+              withStackTrace(helper, () =>
+                // @ts-expect-error: name is a valid key, but TypeScript is dumb
+                dispatch(actions[name](...args))
               );
+
+            acc[name] = helper;
+
+            return acc;
+          },
+          {}
+        );
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { emit, ...rest } = navigation;
+
+        acc[route.key] = {
+          ...rest,
+          ...helpers,
+          // FIXME: too much work to fix the types for now
+          ...(emitter.create(route.key) as any),
+          dispatch,
+          getParent: (routeName) => {
+            if (routeName === route.name) {
+              // If the passed route name is the same as the current route's name,
+              // we return the cached navigation object for the route
+              return acc[route.key];
+            }
+
+            if (routeName !== undefined) {
+              const parent = parentNavigation?.getParent(routeName);
+
+              if (parent === undefined) {
+                throw new Error(
+                  `Couldn't find a navigation object for '${routeName}' in current or any parent screens. Is your component inside the correct screen?`
+                );
+              }
+
+              return parent;
+            }
+
+            return parentNavigation;
+          },
+          setOptions: (options: Partial<ScreenOptions>) => {
+            setOptions((o) => ({
+              ...o,
+              [route.key]: { ...o[route.key], ...options },
+            }));
+          },
+          isFocused: () => {
+            const state = rest.getState();
+
+            if (state.routes[state.index]?.key !== route.key) {
+              return false;
             }
 
-            return parent;
-          }
-
-          return parentNavigation;
-        },
-        setOptions: (options: Partial<ScreenOptions>) => {
-          setOptions((o) => ({
-            ...o,
-            [route.key]: { ...o[route.key], ...options },
-          }));
-        },
-        isFocused: () => {
-          const state = rest.getState();
-
-          if (state.routes[state.index]?.key !== route.key) {
-            return false;
-          }
-
-          // If the current screen is focused, we also need to check if parent navigator is focused
-          // This makes sure that we return the focus state in the whole tree, not just this navigator
-          return navigation ? navigation.isFocused() : true;
-        },
-      };
-    }
-
-    return acc;
-  }, {});
+            // If the current screen is focused, we also need to check if parent navigator is focused
+            // This makes sure that we return the focus state in the whole tree, not just this navigator
+            return navigation ? navigation.isFocused() : true;
+          },
+        };
+      }
+
+      return acc;
+    }, {});
+  }, [
+    cache,
+    routes,
+    getState,
+    navigation,
+    router,
+    withStackTrace,
+    emitter,
+    parentNavigation,
+    setOptions,
+  ]);
 
   React.useInsertionEffect(() => {
     cache.current = next;
-  });
+    cache.routeNames = Object.fromEntries(
+      routes.map((route) => [route.key, route.name])
+    );
+  }, [cache, next, routes]);
 
   return next;
 }

package/src/useNavigationHelpers.tsx

@@ -7,7 +7,7 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationContext } from './NavigationProvider';
 import { type NavigationHelpers, PrivateValueStore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -41,7 +41,7 @@ export function useNavigationHelpers<
   router,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.use(NavigationContext);
-  const { withStackTrace } = React.use(NavigationBuilderContext);
+  const { withStackTrace } = useNavigationBuilderContext();
 
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {