@react-navigation/core 7.22.1 → 7.24.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/isRecordEqual.tsx

@@ -16,5 +16,7 @@ export function isRecordEqual(
     return false;
   }
 
-  return aKeys.every((key) => Object.is(a[key], b[key]));
+  return aKeys.every(
+    (key) => Object.hasOwn(b, key) && Object.is(a[key], b[key])
+  );
 }

package/src/useDescriptors.tsx

@@ -7,10 +7,13 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { isArrayEqual } from './isArrayEqual';
+import { isRecordEqual } from './isRecordEqual';
 import {
   type AddKeyedListener,
   type AddListener,
   NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationProvider } from './NavigationProvider';
 import { SceneView } from './SceneView';
@@ -84,6 +87,31 @@ type Options<
   emitter: NavigationEventEmitter<EventMap>;
 };
 
+type DescriptorCache<
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  ActionHelpers extends Record<string, () => void>,
+> = Record<
+  string,
+  {
+    descriptor: Descriptor<
+      ScreenOptions,
+      NavigationProp<
+        ParamListBase,
+        string,
+        string | undefined,
+        State,
+        ScreenOptions,
+        EventMap
+      > &
+        ActionHelpers,
+      RouteProp<ParamListBase>
+    >;
+    deps: unknown[];
+  }
+>;
+
 /**
  * Hook to create descriptor objects for the child routes.
  *
@@ -122,9 +150,9 @@ export function useDescriptors<
     onOptionsChange,
     scheduleUpdate,
     flushUpdates,
-    stackRef,
+    withStackTrace,
     getIsStateEmitted,
-  } = React.useContext(NavigationBuilderContext);
+  } = useNavigationBuilderContext();
 
   const context = React.useMemo(
     () => ({
@@ -139,7 +167,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     }),
     [
       navigation,
@@ -153,7 +181,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     ]
   );
 
@@ -173,6 +201,10 @@ export function useDescriptors<
 
   const routes = useRouteCache(state.routes);
 
+  const cache = React.useMemo<{
+    current: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers>;
+  }>(() => ({ current: {} }), []);
+
   const getOptions = (
     route: RouteProp<ParamListBase, string>,
     navigation: NavigationProp<
@@ -223,7 +255,8 @@ export function useDescriptors<
       EventMap
     >,
     customOptions: ScreenOptions,
-    routeState: NavigationState | PartialState<NavigationState> | undefined
+    routeState: NavigationState | PartialState<NavigationState> | undefined,
+    layout: ScreenLayout<ScreenOptions> | undefined
   ) => {
     const config = screens[route.name];
     const screen = config.props;
@@ -238,14 +271,6 @@ export function useDescriptors<
         return o;
       });
 
-    const layout =
-      // The `layout` prop passed to `Screen` elements,
-      screen.layout ??
-      // The `screenLayout` props passed to `Group` elements
-      config.layout ??
-      // The default `screenLayout` passed to the navigator
-      screenLayout;
-
     let element = (
       <SceneView
         navigation={navigation}
@@ -279,31 +304,67 @@ export function useDescriptors<
     );
   };
 
+  const next: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers> =
+    {};
+
   const descriptors = routes.reduce<
     Record<
       string,
-      Descriptor<
+      DescriptorCache<
+        State,
         ScreenOptions,
-        NavigationProp<
-          ParamListBase,
-          string,
-          string | undefined,
-          State,
-          ScreenOptions,
-          EventMap
-        > &
-          ActionHelpers,
-        RouteProp<ParamListBase>
-      >
+        EventMap,
+        ActionHelpers
+      >[string]['descriptor']
     >
   >((acc, route, i) => {
     const navigation = navigations[route.key];
     const customOptions = getOptions(route, navigation, options[route.key]);
+    const routeState = state.routes[i].state;
+    const config = screens[route.name];
+    const screen = config.props;
+
+    const layout =
+      // The `layout` prop passed to `Screen` elements,
+      screen.layout ??
+      // The `screenLayout` props passed to `Group` elements
+      config.layout ??
+      // The default `screenLayout` passed to the navigator
+      screenLayout;
+
+    const deps = [
+      route,
+      navigation,
+      routeState,
+      screen.component,
+      screen.getComponent,
+      screen.children,
+      layout,
+      context,
+      theme,
+      getState,
+      setState,
+    ];
+
+    const previous = cache.current[route.key];
+
+    if (
+      previous &&
+      isArrayEqual(previous.deps, deps) &&
+      isRecordEqual(previous.descriptor.options, customOptions)
+    ) {
+      next[route.key] = previous;
+      acc[route.key] = previous.descriptor;
+
+      return acc;
+    }
+
     const element = render(
       route,
       navigation,
       customOptions,
-      state.routes[i].state
+      routeState,
+      layout
     );
 
     acc[route.key] = {
@@ -316,9 +377,18 @@ export function useDescriptors<
       options: customOptions,
     };
 
+    next[route.key] = {
+      descriptor: acc[route.key],
+      deps,
+    };
+
     return acc;
   }, {});
 
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
   /**
    * Create a descriptor object for a route.
    *
@@ -337,7 +407,9 @@ export function useDescriptors<
 
     const navigation = base;
     const customOptions = getOptions(route, navigation, {});
-    const element = render(route, navigation, customOptions, undefined);
+    const config = screens[route.name];
+    const layout = config.props.layout ?? config.layout ?? screenLayout;
+    const element = render(route, navigation, customOptions, undefined, layout);
 
     return {
       route,

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,8 +19,9 @@ 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';
 import { NavigationRouteContext } from './NavigationProvider';
 import { NavigationStateContext } from './NavigationStateContext';
@@ -462,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/usePreventRemove.tsx

@@ -1,5 +1,4 @@
 import type { NavigationAction } from '@react-navigation/routers';
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
@@ -18,7 +17,7 @@ export function usePreventRemove(
   preventRemove: boolean,
   callback: (options: { data: { action: NavigationAction } }) => void
 ) {
-  const [id] = React.useState(() => nanoid());
+  const id = React.useId();
 
   const navigation = useNavigation();
   const { key: routeKey } = useRoute();