@react-navigation/core 7.23.0 → 7.24.0

package/src/NavigationIndependentTree.tsx

@@ -1,10 +1,20 @@
 import * as React from 'react';
 
+import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { NavigationContainerRefContext } from './NavigationContainerRefContext';
 import { NavigationContext } from './NavigationContext';
 import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStateContext';
+import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
-import { NavigationRouteContext } from './NavigationProvider';
-import { IsFocusedContext } from './useIsFocused';
+// eslint-disable-next-line import-x/no-deprecated
+import { NavigationMetaContext } from './NavigationMetaContext';
+import {
+  NamedRouteContextListContext,
+  NavigationRouteContext,
+} from './NavigationProvider';
+import { PreventRemoveContext } from './PreventRemoveContext';
+import { FocusedRouteKeyContext, IsFocusedContext } from './useIsFocused';
+import { NavigationStateListenerContext } from './useNavigationState';
 
 /**
  * Component to make the child navigation container independent of parent containers.
@@ -16,16 +26,34 @@ export function NavigationIndependentTree({
 }) {
   return (
     // We need to clear any existing contexts for nested independent container to work correctly
-    <NavigationRouteContext.Provider value={undefined}>
-      <NavigationContext.Provider value={undefined}>
-        <NavigationFocusedRouteStateContext.Provider value={undefined}>
-          <IsFocusedContext.Provider value={undefined}>
-            <NavigationIndependentTreeContext.Provider value>
-              {children}
-            </NavigationIndependentTreeContext.Provider>
-          </IsFocusedContext.Provider>
-        </NavigationFocusedRouteStateContext.Provider>
-      </NavigationContext.Provider>
-    </NavigationRouteContext.Provider>
+    <NavigationIndependentTreeContext.Provider value>
+      <NavigationContainerRefContext.Provider value={undefined}>
+        <NavigationBuilderContext.Provider value={undefined}>
+          <NavigationMetaContext.Provider value={undefined}>
+            <NavigationHelpersContext.Provider value={undefined}>
+              <NavigationStateListenerContext.Provider value={undefined}>
+                <FocusedRouteKeyContext.Provider value={undefined}>
+                  <PreventRemoveContext.Provider value={undefined}>
+                    <NamedRouteContextListContext.Provider value={undefined}>
+                      <NavigationRouteContext.Provider value={undefined}>
+                        <NavigationContext.Provider value={undefined}>
+                          <IsFocusedContext.Provider value={undefined}>
+                            <NavigationFocusedRouteStateContext.Provider
+                              value={undefined}
+                            >
+                              {children}
+                            </NavigationFocusedRouteStateContext.Provider>
+                          </IsFocusedContext.Provider>
+                        </NavigationContext.Provider>
+                      </NavigationRouteContext.Provider>
+                    </NamedRouteContextListContext.Provider>
+                  </PreventRemoveContext.Provider>
+                </FocusedRouteKeyContext.Provider>
+              </NavigationStateListenerContext.Provider>
+            </NavigationHelpersContext.Provider>
+          </NavigationMetaContext.Provider>
+        </NavigationBuilderContext.Provider>
+      </NavigationContainerRefContext.Provider>
+    </NavigationIndependentTreeContext.Provider>
   );
 }

package/src/NavigationProvider.tsx

@@ -37,13 +37,16 @@ export function NavigationProvider({ route, navigation, children }: Props) {
       ? focusedRouteKey === route.key
       : false;
 
-  return (
-    <NavigationRouteContext.Provider value={route}>
-      <NavigationContext.Provider value={navigation}>
-        <IsFocusedContext.Provider value={isFocused}>
-          {children}
-        </IsFocusedContext.Provider>
-      </NavigationContext.Provider>
-    </NavigationRouteContext.Provider>
+  return React.useMemo(
+    () => (
+      <NavigationRouteContext.Provider value={route}>
+        <NavigationContext.Provider value={navigation}>
+          <IsFocusedContext.Provider value={isFocused}>
+            {children}
+          </IsFocusedContext.Provider>
+        </NavigationContext.Provider>
+      </NavigationRouteContext.Provider>
+    ),
+    [children, isFocused, navigation, route]
   );
 }

package/src/NavigationStateContext.tsx

@@ -14,10 +14,6 @@ export const NavigationStateContext = React.createContext<{
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
   getIsInitial: () => boolean;
-  addOptionsGetter?: (
-    key: string,
-    getter: () => object | undefined | null
-  ) => void;
 }>({
   isDefault: true,
 

package/src/SceneView.tsx

@@ -15,7 +15,7 @@ import {
 import { NavigationStateContext } from './NavigationStateContext';
 import { StaticContainer } from './StaticContainer';
 import type { NavigationProp, RouteConfigComponent } from './types';
-import { useOptionsGetters } from './useOptionsGetters';
+import { OptionsGetterContext, useOptionsGetters } from './useOptionsGetters';
 
 type Props<State extends NavigationState, ScreenOptions extends {}> = {
   screen: RouteConfigComponent<ParamListBase, string> & { name: string };
@@ -163,17 +163,8 @@ export function SceneView<
       getKey,
       setKey,
       getIsInitial,
-      addOptionsGetter,
     }),
-    [
-      routeState,
-      getCurrentState,
-      setCurrentState,
-      getKey,
-      setKey,
-      getIsInitial,
-      addOptionsGetter,
-    ]
+    [routeState, getCurrentState, setCurrentState, getKey, setKey, getIsInitial]
   );
 
   const ScreenComponent = screen.getComponent
@@ -183,20 +174,22 @@ export function SceneView<
   return (
     <NavigationStateContext.Provider value={context}>
       <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
-        <EnsureSingleNavigator>
-          <StaticContainer
-            name={screen.name}
-            render={ScreenComponent || screen.children}
-            navigation={navigation}
-            route={route}
-          >
-            {ScreenComponent !== undefined ? (
-              <ScreenComponent navigation={navigation} route={route} />
-            ) : screen.children !== undefined ? (
-              screen.children({ navigation, route })
-            ) : null}
-          </StaticContainer>
-        </EnsureSingleNavigator>
+        <OptionsGetterContext.Provider value={addOptionsGetter}>
+          <EnsureSingleNavigator>
+            <StaticContainer
+              name={screen.name}
+              render={ScreenComponent || screen.children}
+              navigation={navigation}
+              route={route}
+            >
+              {ScreenComponent !== undefined ? (
+                <ScreenComponent navigation={navigation} route={route} />
+              ) : screen.children !== undefined ? (
+                screen.children({ navigation, route })
+              ) : null}
+            </StaticContainer>
+          </EnsureSingleNavigator>
+        </OptionsGetterContext.Provider>
       </NavigationFocusedRouteStateContext.Provider>
     </NavigationStateContext.Provider>
   );

package/src/StaticNavigation.tsx

@@ -356,6 +356,9 @@ const MemoizedScreen = React.memo(
 
 MemoizedScreen.displayName = 'Memo(Screen)';
 
+const hasPropertyGetter = (object: object, property: PropertyKey) =>
+  Object.getOwnPropertyDescriptor(object, property)?.get != null;
+
 const getItemsFromScreens = (
   Screen: React.ComponentType<any>,
   screens: StaticConfigScreens<any, any, any, any, any>
@@ -366,18 +369,57 @@ const getItemsFromScreens = (
     let useIf: (() => boolean) | undefined;
 
     let isNavigator = false;
+    let getComponent: (() => React.ComponentType<any>) | undefined;
 
     if ('screen' in item) {
-      const { screen, if: _if, ...rest } = item;
-
-      useIf = _if;
-      props = rest;
+      if (hasPropertyGetter(item, 'screen')) {
+        const rest: Record<string, unknown> = {};
+
+        // Iterate over the keys to avoid triggering the getter for 'screen'
+        for (const key of Object.keys(item)) {
+          if (key === 'screen' || key === 'if') {
+            continue;
+          }
+
+          rest[key] = Reflect.get(item, key);
+        }
+
+        useIf = item.if;
+        props = rest;
+
+        getComponent = () => {
+          const screen = item.screen;
+
+          if (isValidElementType(screen)) {
+            return screen;
+          }
+
+          if (
+            screen != null &&
+            typeof screen === 'object' &&
+            'config' in screen
+          ) {
+            throw new Error(
+              `Got a navigator object for the screen '${name}' instead of a component. A navigator cannot be specified when using a getter.`
+            );
+          }
 
-      if (isValidElementType(screen)) {
-        component = screen;
-      } else if ('config' in screen) {
-        isNavigator = true;
-        component = screen.getComponent();
+          throw new Error(
+            `Got an invalid screen component for the screen '${name}'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.`
+          );
+        };
+      } else {
+        const { screen, if: _if, ...rest } = item;
+
+        useIf = _if;
+        props = rest;
+
+        if (isValidElementType(screen)) {
+          component = screen;
+        } else if ('config' in screen) {
+          isNavigator = true;
+          component = screen.getComponent();
+        }
       }
     } else if (isValidElementType(item)) {
       component = item;
@@ -386,18 +428,29 @@ const getItemsFromScreens = (
       component = item.getComponent();
     }
 
-    if (component == null) {
+    let children: (() => React.JSX.Element) | undefined;
+
+    if (getComponent != null) {
+      let element: React.JSX.Element | undefined;
+
+      children = () =>
+        (element ??= <MemoizedScreen component={getComponent()} />);
+    } else if (component != null) {
+      const element = isNavigator ? (
+        React.createElement(component, {})
+      ) : (
+        <MemoizedScreen component={component} />
+      );
+
+      children = () => element;
+    }
+
+    if (children == null) {
       throw new Error(
         `Couldn't find a 'screen' property for the screen '${name}'. This can happen if you passed 'undefined'. You likely forgot to export your component from the file it's defined in, or mixed up default import and named import when importing.`
       );
     }
 
-    const element = isNavigator ? (
-      React.createElement(component, {})
-    ) : (
-      <MemoizedScreen component={component} />
-    );
-
     return () => {
       const shouldRender = useIf == null || useIf();
 
@@ -407,7 +460,7 @@ const getItemsFromScreens = (
 
       return (
         <Screen key={name} name={name} {...props}>
-          {() => element}
+          {children}
         </Screen>
       );
     };
@@ -732,6 +785,7 @@ export function createPathConfigForStaticNavigation(
               !hasExplicitScreens &&
               !hasDisabledLinking &&
               'screen' in item &&
+              !hasPropertyGetter(item, 'screen') &&
               'config' in item.screen &&
               (item.screen.config.screens || item.screen.config.groups)
             ) {

package/src/useDescriptors.tsx

@@ -13,6 +13,7 @@ import {
   type AddKeyedListener,
   type AddListener,
   NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationProvider } from './NavigationProvider';
 import { SceneView } from './SceneView';
@@ -149,9 +150,9 @@ export function useDescriptors<
     onOptionsChange,
     scheduleUpdate,
     flushUpdates,
-    stackRef,
+    withStackTrace,
     getIsStateEmitted,
-  } = React.useContext(NavigationBuilderContext);
+  } = useNavigationBuilderContext();
 
   const context = React.useMemo(
     () => ({
@@ -166,7 +167,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     }),
     [
       navigation,
@@ -180,7 +181,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     ]
   );
 

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.useContext(NavigationBuilderContext);
+  const { addListener } = useNavigationBuilderContext();
 
   const listener = React.useCallback(
     (callback: FocusedNavigationCallback<any>) => {

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';
 // eslint-disable-next-line import-x/no-deprecated
 import { NavigationMetaContext } from './NavigationMetaContext';
@@ -463,9 +463,7 @@ export function useNavigationBuilder<
     getIsInitial,
   } = React.useContext(NavigationStateContext);
 
-  const { onEmitEvent, getIsStateEmitted } = React.useContext(
-    NavigationBuilderContext
-  );
+  const { onEmitEvent, getIsStateEmitted } = useNavigationBuilderContext();
 
   const stateCleanupRef = React.useRef<boolean>(false);
   const lastStateRef = React.useRef<State | PartialState<State> | undefined>(

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 type { NavigationHelpers, NavigationProp } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
@@ -66,7 +66,7 @@ export function useNavigationCache<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const { stackRef } = React.useContext(NavigationBuilderContext);
+  const { withStackTrace } = useNavigationBuilderContext();
 
   const base = React.useMemo((): NavigationItem<
     State,
@@ -148,33 +148,14 @@ export function useNavigationCache<
       acc[route.key] = previous;
     } else {
       const dispatch = (thunk: Thunk) => {
-        const action = typeof thunk === 'function' ? thunk(getState()) : thunk;
+        withStackTrace(dispatch, () => {
+          const action =
+            typeof thunk === 'function' ? thunk(getState()) : thunk;
 
-        if (action != null) {
-          navigation.dispatch({ source: route.key, ...action });
-        }
-      };
-
-      const withStack = (callback: () => void) => {
-        let isStackSet = false;
-
-        try {
-          if (
-            process.env.NODE_ENV !== 'production' &&
-            stackRef &&
-            !stackRef.current
-          ) {
-            // Capture the stack trace for devtools
-            stackRef.current = new Error().stack;
-            isStackSet = true;
+          if (action != null) {
+            navigation.dispatch({ source: route.key, ...action });
           }
-
-          callback();
-        } finally {
-          if (isStackSet && stackRef) {
-            stackRef.current = undefined;
-          }
-        }
+        });
       };
 
       const actions = {
@@ -184,12 +165,14 @@ export function useNavigationCache<
 
       const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
         (acc, name) => {
-          acc[name] = (...args: any) =>
-            withStack(() =>
+          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;
         },
         {}
@@ -200,7 +183,7 @@ export function useNavigationCache<
         ...helpers,
         // FIXME: too much work to fix the types for now
         ...(emitter.create(route.key) as any),
-        dispatch: (thunk: Thunk) => withStack(() => dispatch(thunk)),
+        dispatch,
         getParent: (id?: string) => {
           if (id !== undefined && id === base.getId()) {
             // If the passed id is the same as the current navigation id,

package/src/useNavigationHelpers.tsx

@@ -7,6 +7,7 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationContext } from './NavigationContext';
 import { type NavigationHelpers, PrivateValueStore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -44,6 +45,7 @@ export function useNavigationHelpers<
   router,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.useContext(NavigationContext);
+  const { withStackTrace } = useNavigationBuilderContext();
 
   // 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 any listeners
@@ -64,13 +66,15 @@ export function useNavigationHelpers<
 
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {
-      const action = typeof op === 'function' ? op(getState()) : op;
+      withStackTrace(dispatch, () => {
+        const action = typeof op === 'function' ? op(getState()) : op;
 
-      const handled = onAction(action);
+        const handled = onAction(action);
 
-      if (!handled) {
-        onUnhandledAction?.(action);
-      }
+        if (!handled) {
+          onUnhandledAction?.(action);
+        }
+      });
     };
 
     const actions = {
@@ -79,8 +83,15 @@ export function useNavigationHelpers<
     };
 
     const helpers = Object.keys(actions).reduce((acc, name) => {
+      const helper = (...args: any) =>
+        withStackTrace(helper, () =>
+          // @ts-expect-error: name is a valid key, but TypeScript is dumb
+          dispatch(actions[name](...args))
+        );
+
       // @ts-expect-error: name is a valid key, but TypeScript is dumb
-      acc[name] = (...args: any) => dispatch(actions[name](...args));
+      acc[name] = helper;
+
       return acc;
     }, {} as ActionHelpers);
 
@@ -143,5 +154,6 @@ export function useNavigationHelpers<
     onUnhandledAction,
     navigatorId,
     stateRef,
+    withStackTrace,
   ]);
 }

package/src/useNavigationState.tsx

@@ -108,6 +108,6 @@ export function NavigationStateListenerProvider({
   );
 }
 
-const NavigationStateListenerContext = React.createContext<
+export const NavigationStateListenerContext = React.createContext<
   NavigationStateListener | undefined
 >(undefined);

package/src/useOnAction.tsx

@@ -11,7 +11,7 @@ import { DeprecatedNavigationInChildContext } from './DeprecatedNavigationInChil
 import {
   type ChildActionListener,
   type ChildBeforeRemoveListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -53,7 +53,7 @@ export function useOnAction<State extends NavigationState>({
     addListener: addListenerParent,
     onDispatchAction,
     flushUpdates,
-  } = React.useContext(NavigationBuilderContext);
+  } = useNavigationBuilderContext();
   const navigationInChildEnabled = React.useContext(
     DeprecatedNavigationInChildContext
   );

package/src/useOnGetState.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { isArrayEqual } from './isArrayEqual';
 import {
   type GetStateListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationRouteContext } from './NavigationProvider';
 
@@ -14,7 +14,7 @@ type Options = {
 };
 
 export function useOnGetState({ getState, getStateListeners }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
+  const { addKeyedListener } = useNavigationBuilderContext();
   const route = React.useContext(NavigationRouteContext);
   const key = route ? route.key : 'root';
 

package/src/useOnPreventRemove.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 
 import {
   type ChildBeforeRemoveListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationRouteContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
@@ -107,7 +107,7 @@ export function useOnPreventRemove({
   emitter,
   beforeRemoveListeners,
 }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
+  const { addKeyedListener } = useNavigationBuilderContext();
   const route = React.useContext(NavigationRouteContext);
   const routeKey = route?.key;
 

package/src/useOnRouteFocus.tsx

@@ -5,7 +5,7 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 
 type Options<State extends NavigationState, Action extends NavigationAction> = {
   router: Router<State, Action>;
@@ -23,9 +23,7 @@ export function useOnRouteFocus<
   State extends NavigationState,
   Action extends NavigationAction,
 >({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
-  const { onRouteFocus: onRouteFocusParent } = React.useContext(
-    NavigationBuilderContext
-  );
+  const { onRouteFocus: onRouteFocusParent } = useNavigationBuilderContext();
 
   return React.useCallback(
     (key: string) => {

package/src/useOptionsGetters.tsx

@@ -2,9 +2,12 @@ import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
-import { NavigationStateContext } from './NavigationStateContext';
 import type { NavigationProp } from './types';
 
+export const OptionsGetterContext = React.createContext<
+  ((key: string, getter: () => object | undefined | null) => void) | undefined
+>(undefined);
+
 type Options = {
   key?: string;
   navigation?: NavigationProp<ParamListBase>;
@@ -17,17 +20,17 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     Record<string, () => object | undefined | null>
   >({});
 
-  const { onOptionsChange } = React.useContext(NavigationBuilderContext);
-  const { addOptionsGetter: parentAddOptionsGetter } = React.useContext(
-    NavigationStateContext
-  );
+  const onOptionsChange = React.useContext(
+    NavigationBuilderContext
+  )?.onOptionsChange;
+  const parentAddOptionsGetter = React.useContext(OptionsGetterContext);
 
   const optionsChangeListener = React.useCallback(() => {
     const isFocused = navigation?.isFocused() ?? true;
     const hasChildren = Object.keys(optionsGettersFromChildRef.current).length;
 
     if (isFocused && !hasChildren) {
-      onOptionsChange(optionsRef.current ?? {});
+      onOptionsChange?.(optionsRef.current ?? {});
     }
   }, [navigation, onOptionsChange]);
 

package/src/useScheduleUpdate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { useClientLayoutEffect } from './useClientLayoutEffect';
 
 /**
@@ -12,9 +12,7 @@ import { useClientLayoutEffect } from './useClientLayoutEffect';
  * This lets nested updates be applied from the root down without clobbering each other.
  */
 export function useScheduleUpdate(callback: () => void) {
-  const { scheduleUpdate, flushUpdates } = React.useContext(
-    NavigationBuilderContext
-  );
+  const { scheduleUpdate, flushUpdates } = useNavigationBuilderContext();
 
   React.useInsertionEffect(() => {
     scheduleUpdate(callback);