@react-navigation/core 7.23.0 → 7.25.0

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/types.tsx

@@ -312,9 +312,8 @@ export type EventArg<
 export type EventListenerCallback<
   EventMap extends EventMapBase,
   EventName extends keyof EventMap,
-  EventCanPreventDefault extends
-    | boolean
-    | undefined = EventMap[EventName]['canPreventDefault'],
+  EventCanPreventDefault extends boolean | undefined =
+    EventMap[EventName]['canPreventDefault'],
 > = (
   e: EventArg<
     EventName,
@@ -642,6 +641,57 @@ export type NavigationProp<
   EventConsumer<EventMap & EventMapCore<State>> &
   PrivateValueStore<[ParamList, RouteName, EventMap]>;
 
+/**
+ * A stripped down NavigationProp if the navigator is not known.
+ *
+ * The hook can be used in `NavigationContainer` directly, not inside of a navigator.
+ * So navigator specific methods won't be available.
+ */
+export type GenericNavigation<ParamList extends {}> = Omit<
+  NavigationProp<ParamList>,
+  'getState' | 'setParams' | 'replaceParams' | 'setOptions'
+> & {
+  /**
+   * Returns the navigator's state.
+   *
+   * This may return `undefined` if used outside of a navigator,
+   * as the navigator may not have rendered yet
+   */
+  getState(): NavigationState | undefined;
+
+  /**
+   * Update the param object for the route.
+   * The new params will be shallow merged with the old one.
+   *
+   * @param params Partial params object for the current route.
+   */
+  setParams(
+    // We don't know which route to set params for
+    params: unknown
+  ): void;
+
+  /**
+   * Replace the param object for the route
+   *
+   * @param params Params object for the current route.
+   */
+  replaceParams(
+    // We don't know which route to replace params for
+    params: unknown
+  ): void;
+
+  /**
+   * Update the options for the route.
+   * The options object will be shallow merged with default options object.
+   *
+   * @param options Partial options object for the current screen.
+   */
+  setOptions(
+    // We don't know which navigator to set options for
+    options: unknown
+  ): void;
+};
+
 export type RouteProp<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList = Keyof<ParamList>,
@@ -1327,9 +1377,27 @@ export type PathConfig<ParamList extends {}> = Partial<PathConfigAlias> & {
 };
 
 export type PathConfigMap<ParamList extends {}> = {
-  [RouteName in keyof ParamList]?: NonNullable<
-    ParamList[RouteName]
-  > extends NavigatorScreenParams<infer T extends {}>
-    ? string | PathConfig<T>
-    : string | Omit<PathConfig<{}>, 'screens' | 'initialRouteName'>;
+  [RouteName in keyof ParamList]?: PathConfigForParams<ParamList[RouteName]>;
 };
+
+type NavigatorRoutes<Params> = Extract<Params, { screen: PropertyKey }>;
+
+type PathConfigForParams<Params> =
+  | string
+  | (Omit<PathConfig<{}>, 'screens' | 'initialRouteName'> &
+      ([NonNullable<Params>] extends [never]
+        ? unknown
+        : [NonNullable<Params>] extends [
+              NavigatorScreenParams<Record<PropertyKey, unknown>>,
+            ]
+          ? {
+              initialRouteName?: NavigatorRoutes<Params>['screen'];
+              screens?: {
+                [Route in NavigatorRoutes<Params> as Route['screen']]?: PathConfigForParams<
+                  Route extends { params?: infer ChildParams }
+                    ? ChildParams
+                    : never
+                >;
+              };
+            }
+          : unknown));

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/useKeyedChildListeners.tsx

@@ -12,6 +12,7 @@ export function useKeyedChildListeners() {
       KeyedListenerMap[K] | undefined
     >;
   }>(
+    // eslint-disable-next-line @eslint-react/purity
     Object.assign(Object.create(null), {
       getState: {},
       beforeRemove: {},

package/src/useNavigation.tsx

@@ -1,9 +1,8 @@
-import { type NavigationState } from '@react-navigation/routers';
 import * as React from 'react';
 
 import { NavigationContainerRefContext } from './NavigationContainerRefContext';
 import { NavigationContext } from './NavigationContext';
-import type { NavigationProp } from './types';
+import type { GenericNavigation } from './types';
 
 /**
  * Hook to access the navigation prop of the parent screen anywhere.
@@ -11,9 +10,7 @@ import type { NavigationProp } from './types';
  * @returns Navigation prop of the parent screen.
  */
 export function useNavigation<
-  T = Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
-    getState(): NavigationState | undefined;
-  },
+  T = GenericNavigation<ReactNavigation.RootParamList>,
 >(): T {
   const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationContext);

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';
@@ -431,6 +431,7 @@ export function useNavigationBuilder<
     routeKeyList[name] = config.keys;
     routeParamList[name] = config.props.initialParams;
 
+    // eslint-disable-next-line @eslint-react/purity
     Object.assign(routeGetIdList, { [name]: config.props.getId });
   }
 
@@ -463,9 +464,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>(
@@ -609,7 +608,7 @@ export function useNavigationBuilder<
     // Instead, we handle changes to these in the nextState code below. Note
     // that some changes to routeConfigs are explicitly ignored, such as changes
     // to initialParams
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [currentState, router, isStateValid]);
 
   const previousRouteKeyListRef = React.useRef(routeKeyList);
@@ -854,7 +853,7 @@ export function useNavigationBuilder<
       // causing the initial state to be lost after cleanup wipes the container state.
       lastNotifiedStateRef.current = null;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, []);
 
   const getState = useLatestCallback((): State => {

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,
@@ -130,7 +130,7 @@ export function useNavigationCache<
   // In reality, these deps will rarely change, if ever
   const cache = React.useMemo(
     () => ({ current: {} as NavigationCache<State, ScreenOptions, EventMap> }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
     [base, getState, navigation, setOptions, emitter]
   );
 
@@ -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);