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

package/lib/typescript/src/useRouteCache.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useRouteCache.d.ts","sourceRoot":"","sources":["../../../src/useRouteCache.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAiB,MAAM,2BAA2B,CAAC;AAMhF;;;;GAIG;AACH,eAAO,MAAM,WAAW,eAAwB,CAAC;AAEjD;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,SAAS,eAAe,EACzD,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC;;;;;;;;;;KAsDxB"}
+{"version":3,"file":"useRouteCache.d.ts","sourceRoot":"","sources":["../../../src/useRouteCache.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAIhF,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAS,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,WAAW,eAAwB,CAAC;AAEjD,KAAK,WAAW,GAAG,SAAS,CAAC,aAAa,CAAC,GAAG;IAC5C,CAAC,WAAW,CAAC,CAAC,EAAE,eAAe,CAAC;CACjC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,KAAK,SAAS,eAAe,EACzD,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,iBAkExB"}

package/lib/typescript/src/useScheduleUpdate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useScheduleUpdate.d.ts","sourceRoot":"","sources":["../../../src/useScheduleUpdate.tsx"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,IAAI,QAQrD"}
+{"version":3,"file":"useScheduleUpdate.d.ts","sourceRoot":"","sources":["../../../src/useScheduleUpdate.tsx"],"names":[],"mappings":"AAKA;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,IAAI,QAUrD"}

package/lib/typescript/src/useSyncState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSyncState.d.ts","sourceRoot":"","sources":["../../../src/useSyncState.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,YAAY,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC;;;;yCA/BnB,IAAI;wCA4Da,MAAM,IAAI;;EAiC/D"}
+{"version":3,"file":"useSyncState.d.ts","sourceRoot":"","sources":["../../../src/useSyncState.tsx"],"names":[],"mappings":"AAmFA,wBAAgB,YAAY,CAAC,CAAC,EAAE,eAAe,EAAE,MAAM,CAAC;;;;yCA/BnB,IAAI;wCA4Da,MAAM,IAAI;;EA+B/D"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "8.0.0-alpha.34",
+  "version": "8.0.0-alpha.35",
   "keywords": [
     "react",
     "react-native",
@@ -89,5 +89,5 @@
       ]
     ]
   },
-  "gitHead": "73f8c2982a8999f1e1dfb1cfbeae9d8dab0c1cc2"
+  "gitHead": "400f7128965fc92c335a3f6c27e3fa26113915e4"
 }

package/src/BaseNavigationContainer.tsx

@@ -403,10 +403,17 @@ export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
     }
   );
 
+  const isOptionsListenerReadyRef = React.useRef(false);
   const lastEmittedOptionsRef = React.useRef<object | undefined>(undefined);
 
-  const onOptionsChange = useLatestCallback((options: object) => {
-    if (lastEmittedOptionsRef.current === options) {
+  const onOptionsChange = useLatestCallback(() => {
+    if (!isOptionsListenerReadyRef.current) {
+      return;
+    }
+
+    const options = getCurrentOptions();
+
+    if (options == null || lastEmittedOptionsRef.current === options) {
       return;
     }
 
@@ -418,6 +425,16 @@ export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
     });
   });
 
+  React.useEffect(() => {
+    isOptionsListenerReadyRef.current = true;
+
+    onOptionsChange();
+
+    return () => {
+      isOptionsListenerReadyRef.current = false;
+    };
+  }, [onOptionsChange]);
+
   const lastEmittedStateRef = React.useRef<State>(undefined);
 
   const getIsStateEmitted = useLatestCallback(

package/src/NavigationBuilderContext.tsx

@@ -74,7 +74,7 @@ type NavigationBuilderContextValue = {
     target: string | undefined;
     data: unknown;
   }) => void;
-  onOptionsChange: (options: object) => void;
+  onOptionsChange: () => void;
   getIsStateEmitted: () => boolean;
   scheduleUpdate: (callback: () => void) => void;
   flushUpdates: () => void;

package/src/NavigationIndependentTree.tsx

@@ -15,7 +15,11 @@ import {
 import { NavigationRootContext } from './NavigationRootContext';
 import { PreventRemoveContext } from './PreventRemoveContext';
 import { StaticTreeContext } from './StaticTreeContext';
-import { FocusedRouteKeyContext, IsFocusedContext } from './useIsFocused';
+import {
+  FocusedRouteKeyContext,
+  IsFocusedContext,
+  IsFocusedGetterContext,
+} from './useIsFocused';
 import {
   NamedNavigationStateListenerListContext,
   NavigationStateListenerContext,
@@ -50,13 +54,17 @@ export function NavigationIndependentTree({
                             <NavigationRouteContext.Provider value={undefined}>
                               <NavigationContext.Provider value={undefined}>
                                 <IsFocusedContext.Provider value={undefined}>
-                                  <IsScreenContext.Provider value={false}>
-                                    <NavigationFocusedRouteStateContext.Provider
-                                      value={undefined}
-                                    >
-                                      {children}
-                                    </NavigationFocusedRouteStateContext.Provider>
-                                  </IsScreenContext.Provider>
+                                  <IsFocusedGetterContext.Provider
+                                    value={undefined}
+                                  >
+                                    <IsScreenContext.Provider value={false}>
+                                      <NavigationFocusedRouteStateContext.Provider
+                                        value={undefined}
+                                      >
+                                        {children}
+                                      </NavigationFocusedRouteStateContext.Provider>
+                                    </IsScreenContext.Provider>
+                                  </IsFocusedGetterContext.Provider>
                                 </IsFocusedContext.Provider>
                               </NavigationContext.Provider>
                             </NavigationRouteContext.Provider>

package/src/NavigationProvider.tsx

@@ -1,8 +1,13 @@
 import type { ParamListBase, Route } from '@react-navigation/routers';
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import type { NavigationProp } from './types';
-import { FocusedRouteKeyContext, IsFocusedContext } from './useIsFocused';
+import {
+  FocusedRouteKeyContext,
+  IsFocusedContext,
+  IsFocusedGetterContext,
+} from './useIsFocused';
 import { useLazyValue } from './useLazyValue';
 import { NamedNavigationStateListenerProvider } from './useNavigationState';
 
@@ -62,6 +67,8 @@ export function NavigationProvider({ route, navigation, children }: Props) {
       ? focusedRouteKey === route.key
       : false;
 
+  const getIsFocused = useLatestCallback(() => isFocused);
+
   return (
     <NamedNavigationStateListenerProvider name={route.name}>
       <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
@@ -69,9 +76,11 @@ export function NavigationProvider({ route, navigation, children }: Props) {
           <NavigationRouteContext.Provider value={route}>
             <NavigationContext.Provider value={navigation}>
               <IsFocusedContext.Provider value={isFocused}>
-                <IsScreenContext.Provider value={true}>
-                  {children}
-                </IsScreenContext.Provider>
+                <IsFocusedGetterContext.Provider value={getIsFocused}>
+                  <IsScreenContext.Provider value={true}>
+                    {children}
+                  </IsScreenContext.Provider>
+                </IsFocusedGetterContext.Provider>
               </IsFocusedContext.Provider>
             </NavigationContext.Provider>
           </NavigationRouteContext.Provider>

package/src/PreventRemoveProvider.tsx

@@ -50,15 +50,9 @@ export function PreventRemoveProvider({ children }: Props) {
 
   const setPreventRemove = useLatestCallback(
     (id: string, routeKey: string, preventRemove: boolean): void => {
-      if (
-        preventRemove &&
-        (navigation == null ||
-          navigation
-            ?.getState()
-            .routes.every((route) => route.key !== routeKey))
-      ) {
+      if (preventRemove && navigation == null) {
         throw new Error(
-          `Couldn't find a route with the key ${routeKey}. Is your component inside NavigationContent?`
+          "Couldn't find a navigation object. This is likely a bug in the navigator.\n\nIf you're using a custom navigator, make sure that the navigator content is wrapped by the 'render' function returned by 'useNavigationBuilder'."
         );
       }
 

package/src/SceneView.tsx

@@ -22,6 +22,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
   navigation: NavigationProp<ParamListBase, string, State, ScreenOptions>;
   route: Route<string>;
   routeState: NavigationState | PartialState<NavigationState> | undefined;
+  getFocusedRouteKey: () => string | undefined;
   getState: () => State;
   setState: (state: State) => void;
   subscribe: (callback: () => void) => () => void;
@@ -41,6 +42,7 @@ export function SceneView<
   route,
   navigation,
   routeState,
+  getFocusedRouteKey,
   getState,
   setState,
   subscribe,
@@ -53,7 +55,7 @@ export function SceneView<
   const { addOptionsGetter } = useOptionsGetters({
     key: route.key,
     options,
-    navigation,
+    getFocusedRouteKey,
   });
 
   const setKey = React.useCallback((key: string) => {

package/src/useDescriptors.tsx

@@ -6,6 +6,7 @@ import type {
   Router,
 } from '@react-navigation/routers';
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
 import {
   type AddKeyedListener,
@@ -68,11 +69,11 @@ type Options<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 > = {
-  routes: State['routes'];
   screens: Record<
     string,
     ScreenConfigWithParent<State, ScreenOptions, EventMap>
   >;
+  state: State;
   navigation: NavigationHelpers<ParamListBase>;
   screenOptions: ScreenOptionsOrCallback<ScreenOptions> | undefined;
   screenLayout: ScreenLayout<ScreenOptions> | undefined;
@@ -101,8 +102,8 @@ export function useDescriptors<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 >({
-  routes,
   screens,
+  state,
   navigation,
   screenOptions,
   screenLayout,
@@ -117,6 +118,7 @@ export function useDescriptors<
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
   const theme = React.use(ThemeContext);
+
   const [options, setOptions] = React.useState<
     Record<string, Partial<ScreenOptions> | undefined>
   >({});
@@ -167,7 +169,7 @@ export function useDescriptors<
     EventMap,
     ActionHelpers
   >({
-    routes,
+    routes: state.routes,
     getState,
     navigation,
     setOptions,
@@ -175,7 +177,11 @@ export function useDescriptors<
     emitter,
   });
 
-  const cachedRoutes = useRouteCache(routes);
+  const cachedRoutes = useRouteCache(state.routes);
+
+  const getFocusedRouteKey = useLatestCallback(
+    () => state.routes[state.index]?.key
+  );
 
   const getOptions = (
     route: RouteProp<ParamListBase, string>,
@@ -258,6 +264,7 @@ export function useDescriptors<
         route={route}
         screen={screen}
         routeState={routeState}
+        getFocusedRouteKey={getFocusedRouteKey}
         getState={getState}
         setState={setState}
         subscribe={subscribe}
@@ -313,7 +320,13 @@ export function useDescriptors<
     }
 
     const customOptions = getOptions(route, navigation, overrides);
-    const element = render(route, navigation, customOptions, routes[i]?.state);
+
+    const element = render(
+      route,
+      navigation,
+      customOptions,
+      state.routes[i]?.state
+    );
 
     acc[route.key] = {
       route,

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/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

@@ -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';
@@ -462,16 +461,20 @@ export function useNavigationBuilder<
 
   const { onEmitEvent, getIsStateEmitted } = useNavigationBuilderContext();
 
-  const stateCleanupRef = React.useRef<boolean>(false);
-  const lastStateRef = React.useRef<State | PartialState<State> | undefined>(
+  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: 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
@@ -483,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,
@@ -494,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,
@@ -605,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);
 
@@ -645,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);
 
@@ -770,7 +779,7 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     if (
       consumedParams &&
       didConsumeNestedParams &&
@@ -799,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
@@ -829,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)
@@ -1026,8 +1034,8 @@ export function useNavigationBuilder<
     ScreenOptions,
     EventMap
   >({
-    routes: state.routes,
     screens,
+    state,
     navigation,
     screenOptions,
     screenLayout,
@@ -1043,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) {
@@ -1080,12 +1088,12 @@ export function useNavigationBuilder<
         </NavigationHelpersContext.Provider>
       </NavigationMetaContext.Provider>
     );
-  });
+  };
 
   return {
     state,
     navigation,
     descriptors,
-    NavigationContent,
+    render,
   };
 }