@react-navigation/core 8.0.0-alpha.36 → 8.0.0-alpha.38

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "8.0.0-alpha.36",
+  "version": "8.0.0-alpha.38",
   "keywords": [
     "react",
     "react-native",
@@ -45,9 +45,8 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "@react-navigation/routers": "^8.0.0-alpha.17",
+    "@react-navigation/routers": "^8.0.0-alpha.18",
     "fast-deep-equal": "^3.1.3",
-    "nanoid": "^5.1.11",
     "react-is": "^19.2.6",
     "use-latest-callback": "^0.3.5",
     "warn-once": "^0.1.1"
@@ -88,5 +87,5 @@
       ]
     ]
   },
-  "gitHead": "ac6baf188f7a456429a87b644053e765233f0151"
+  "gitHead": "904ba65a2938924d87658b7009a95698f93c7731"
 }

package/src/BaseNavigationContainer.tsx

@@ -513,9 +513,9 @@ export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
   }, [state, isReady, emitter]);
 
   React.useEffect(() => {
-    const hydratedState = getRootState();
-
     if (process.env.NODE_ENV !== 'production') {
+      const hydratedState = getRootState();
+
       if (hydratedState !== undefined) {
         const duplicateRouteNamesResult =
           checkDuplicateRouteNames(hydratedState);
@@ -535,6 +535,8 @@ export function BaseNavigationContainer<ParamList extends {} = RootParamList>({
     emitter.emit({ type: 'state', data: { state } });
 
     if (!isFirstMountRef.current && onStateChangeRef.current) {
+      const hydratedState = getRootState();
+
       onStateChangeRef.current(hydratedState);
     }
 

package/src/NavigationBuilderContext.tsx

@@ -61,6 +61,7 @@ export type ChildBeforeRemoveListener = (
 ) => boolean;
 
 type NavigationBuilderContextValue = {
+  canGoBack?: ((source?: string) => boolean) | undefined;
   onAction?:
     | ((action: NavigationAction, visitedNavigators?: Set<string>) => boolean)
     | undefined;

package/src/PreventRemoveProvider.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
@@ -34,7 +33,8 @@ const transformPreventedRoutes = (
  * Component used for managing which routes have to be prevented from removal in native-stack.
  */
 export function PreventRemoveProvider({ children }: Props) {
-  const [parentId] = React.useState(() => nanoid());
+  const parentId = React.useId();
+
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(() => new Map());
 

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

@@ -81,7 +81,7 @@ export type DefaultNavigatorOptions<
   layout?:
     | ((props: {
         state: State;
-        navigation: NavigationHelpers<ParamList>;
+        navigation: NavigationHelpers<ParamList, State>;
         descriptors: Record<
           string,
           Descriptor<
@@ -470,8 +470,9 @@ type NavigationHelpersRoute<
 
 export type NavigationHelpers<
   ParamList extends ParamListBase,
+  State extends NavigationState = NavigationState<ParamList>,
   EventMap extends EventMapBase = {},
-> = NavigationHelpersCommon<ParamList> &
+> = NavigationHelpersCommon<ParamList, State> &
   EventEmitter<EventMap> &
   NavigationHelpersRoute<ParamList, keyof ParamList> &
   PrivateValueStore<[ParamList, unknown, unknown, unknown]>;

package/src/useDescriptors.tsx

@@ -8,6 +8,8 @@ import type {
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
+import { isArrayEqual } from './isArrayEqual';
+import { isRecordEqual } from './isRecordEqual';
 import {
   type AddKeyedListener,
   type AddListener,
@@ -74,10 +76,11 @@ type Options<
     ScreenConfigWithParent<State, ScreenOptions, EventMap>
   >;
   state: State;
-  navigation: NavigationHelpers<ParamListBase>;
+  navigation: NavigationHelpers<ParamListBase, State>;
   screenOptions: ScreenOptionsOrCallback<ScreenOptions> | undefined;
   screenLayout: ScreenLayout<ScreenOptions> | undefined;
   onAction: (action: NavigationAction) => boolean;
+  canGoBack: (source?: string) => boolean;
   getState: () => State;
   setState: (state: State) => void;
   subscribe: (callback: () => void) => () => void;
@@ -88,6 +91,30 @@ type Options<
   emitter: NavigationEventEmitter<EventMap>;
 };
 
+type DescriptorCache<
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  ActionHelpers extends Record<string, (...args: any) => void>,
+> = Record<
+  string,
+  {
+    descriptor: Descriptor<
+      ScreenOptions,
+      NavigationProp<
+        ParamListBase,
+        string,
+        State,
+        ScreenOptions,
+        EventMap,
+        ActionHelpers
+      >,
+      RouteProp<ParamListBase>
+    >;
+    deps: unknown[];
+  }
+>;
+
 /**
  * Hook to create descriptor objects for the child routes.
  *
@@ -108,6 +135,7 @@ export function useDescriptors<
   screenOptions,
   screenLayout,
   onAction,
+  canGoBack,
   getState,
   setState,
   subscribe,
@@ -136,6 +164,7 @@ export function useDescriptors<
     () => ({
       navigation,
       onAction,
+      canGoBack,
       addListener,
       addKeyedListener,
       onRouteFocus,
@@ -150,6 +179,7 @@ export function useDescriptors<
     [
       navigation,
       onAction,
+      canGoBack,
       addListener,
       addKeyedListener,
       onRouteFocus,
@@ -170,6 +200,7 @@ export function useDescriptors<
     ActionHelpers
   >({
     routes: state.routes,
+    canGoBack,
     getState,
     navigation,
     setOptions,
@@ -183,6 +214,10 @@ export function useDescriptors<
     () => state.routes[state.index]?.key
   );
 
+  const cache = React.useMemo<{
+    current: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers>;
+  }>(() => ({ current: {} }), []);
+
   const getOptions = (
     route: RouteProp<ParamListBase, string>,
     navigation: NavigationProp<
@@ -231,7 +266,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;
@@ -250,14 +286,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}
@@ -293,21 +321,18 @@ export function useDescriptors<
     );
   };
 
+  const next: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers> =
+    {};
+
   const descriptors = cachedRoutes.reduce<
     Record<
       string,
-      Descriptor<
+      DescriptorCache<
+        State,
         ScreenOptions,
-        NavigationProp<
-          ParamListBase,
-          string,
-          State,
-          ScreenOptions,
-          EventMap,
-          ActionHelpers
-        >,
-        RouteProp<ParamListBase>
-      >
+        EventMap,
+        ActionHelpers
+      >[string]['descriptor']
     >
   >((acc, route, i) => {
     const navigation = navigations[route.key];
@@ -321,14 +346,56 @@ export function useDescriptors<
 
     const customOptions = getOptions(route, navigation, overrides);
 
+    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,
+      getFocusedRouteKey,
+      getState,
+      setState,
+      subscribe,
+    ];
+
+    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] = {
+    const descriptor = {
       route,
       navigation,
       render() {
@@ -337,8 +404,18 @@ export function useDescriptors<
       options: customOptions,
     };
 
+    acc[route.key] = descriptor;
+    next[route.key] = {
+      descriptor,
+      deps,
+    };
+
     return acc;
   }, {});
 
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
   return descriptors;
 }

package/src/useNavigationBuilder.tsx

@@ -459,7 +459,11 @@ export function useNavigationBuilder<
     getIsInitial,
   } = React.use(NavigationStateContext);
 
-  const { onEmitEvent, getIsStateEmitted } = useNavigationBuilderContext();
+  const {
+    onEmitEvent,
+    getIsStateEmitted,
+    canGoBack: canGoBackParent,
+  } = useNavigationBuilderContext();
 
   const mountStateRef = React.useRef<'initial' | 'mounted' | 'unmounted'>(
     'initial'
@@ -1003,6 +1007,31 @@ export function useNavigationBuilder<
     onUnhandledActionParent?.(action);
   });
 
+  const canGoBack = useLatestCallback((source?: string) => {
+    const state = getState();
+
+    return (
+      router.getStateForAction(
+        state,
+        { ...CommonActions.goBack(), source },
+        {
+          routeNames: state.routeNames,
+          routeParamList: {},
+          routeGetIdList: {},
+        }
+      ) !== null ||
+      canGoBackParent?.(
+        // If the `source` belonged to the current navigator,
+        // rewrite the `source` to the parent screen's key when checking
+        // This mirrors the way actions bubble up to the parent
+        source !== undefined && state.routes.some((r) => r.key === source)
+          ? route?.key
+          : source
+      ) ||
+      false
+    );
+  });
+
   const navigation = useNavigationHelpers<
     State,
     ActionHelpers,
@@ -1011,6 +1040,7 @@ export function useNavigationBuilder<
   >({
     onAction,
     onUnhandledAction,
+    canGoBack,
     getState,
     emitter,
     router,
@@ -1040,6 +1070,7 @@ export function useNavigationBuilder<
     screenOptions,
     screenLayout,
     onAction,
+    canGoBack,
     getState,
     setState,
     subscribe,

package/src/useNavigationCache.tsx

@@ -19,8 +19,9 @@ type Options<
 > = {
   routes: State['routes'];
   getState: () => State;
-  navigation: NavigationHelpers<ParamListBase> &
+  navigation: NavigationHelpers<ParamListBase, State> &
     Partial<NavigationProp<ParamListBase, string, any, any, any>>;
+  canGoBack: (source?: string) => boolean;
   setOptions: (
     cb: (
       options: Record<string, Partial<ScreenOptions> | undefined>
@@ -68,6 +69,7 @@ export function useNavigationCache<
   routes,
   getState,
   navigation,
+  canGoBack,
   setOptions,
   router,
   emitter,
@@ -89,6 +91,7 @@ export function useNavigationCache<
       getState,
       parentNavigation,
       navigation,
+      canGoBack,
       setOptions,
       router,
       emitter,
@@ -155,6 +158,7 @@ export function useNavigationCache<
           // FIXME: too much work to fix the types for now
           ...(emitter.create(route.key) as any),
           dispatch,
+          canGoBack: () => canGoBack(route.key),
           getParent: (routeName) => {
             if (routeName === route.name) {
               // If the passed route name is the same as the current route's name,
@@ -203,6 +207,7 @@ export function useNavigationCache<
     routes,
     getState,
     navigation,
+    canGoBack,
     router,
     withStackTrace,
     emitter,

package/src/useNavigationHelpers.tsx

@@ -19,6 +19,7 @@ PrivateValueStore;
 type Options<State extends NavigationState, Action extends NavigationAction> = {
   onAction: (action: NavigationAction) => boolean;
   onUnhandledAction: (action: NavigationAction) => void;
+  canGoBack: (source?: string) => boolean;
   getState: () => State;
   emitter: NavigationEventEmitter<any>;
   router: Router<State, Action>;
@@ -36,11 +37,13 @@ export function useNavigationHelpers<
 >({
   onAction,
   onUnhandledAction,
+  canGoBack,
   getState,
   emitter,
   router,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.use(NavigationContext);
+
   const { withStackTrace } = useNavigationBuilderContext();
 
   return React.useMemo(() => {
@@ -82,27 +85,16 @@ export function useNavigationHelpers<
       isFocused: parentNavigationHelpers
         ? parentNavigationHelpers.isFocused
         : () => true,
-      canGoBack: () => {
-        const state = getState();
-
-        return (
-          router.getStateForAction(state, CommonActions.goBack() as Action, {
-            routeNames: state.routeNames,
-            routeParamList: {},
-            routeGetIdList: {},
-          }) !== null ||
-          parentNavigationHelpers?.canGoBack() ||
-          false
-        );
-      },
+      canGoBack: () => canGoBack(),
       getState,
-    } as NavigationHelpers<ParamListBase, EventMap> & ActionHelpers;
+    } as NavigationHelpers<ParamListBase, State, EventMap> & ActionHelpers;
 
     return navigationHelpers;
   }, [
-    router,
+    router.actionCreators,
     parentNavigationHelpers,
     emitter.emit,
+    canGoBack,
     getState,
     onAction,
     onUnhandledAction,

package/src/useOnAction.tsx

@@ -166,19 +166,44 @@ export function useOnAction<State extends NavigationState>({
         }
       }
 
+      const isSourceInCurrentNavigator =
+        action.source !== undefined &&
+        state.routes.some((r) => r.key === action.source);
+
       if (onActionParent !== undefined) {
         // Bubble action to the parent if the current navigator didn't handle it
-        if (onActionParent(action, visitedNavigators)) {
+        const parentAction =
+          isSourceInCurrentNavigator && key !== undefined
+            ? {
+                ...action,
+                // If the `source` belonged to the current navigator,
+                // rewrite the `source` to the parent screen's key when bubbling
+                // This will let parent handle it relative to the child that dispatched the action
+                source: key,
+              }
+            : action;
+
+        if (onActionParent(parentAction, visitedNavigators)) {
           return true;
         }
       }
 
       if (typeof action.target === 'string') {
         // If the action wasn't handled by current navigator or a parent navigator, let children handle it
+        const childAction = isSourceInCurrentNavigator
+          ? {
+              ...action,
+              // If the `source` belonged to the current navigator,
+              // remove it when targeting a child navigator
+              // So child navigators can handle it based on the focused screen
+              source: undefined,
+            }
+          : action;
+
         for (let i = actionListeners.length - 1; i >= 0; i--) {
           const listener = actionListeners[i];
 
-          if (listener?.(action, visitedNavigators)) {
+          if (listener?.(childAction, visitedNavigators)) {
             return true;
           }
         }

package/src/useOptionsGetters.tsx

@@ -80,6 +80,12 @@ export function useOptionsGetters({
     (key: string, getter: () => object | undefined | null) => {
       optionsGettersFromChildRef.current[key] = getter;
 
+      // Hidden screens may register without running their passive effects.
+      // Wait until the commit finishes before reporting their options.
+      if (onOptionsChange !== undefined) {
+        void Promise.resolve().then(onOptionsChange);
+      }
+
       return () => {
         // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
         delete optionsGettersFromChildRef.current[key];
@@ -87,7 +93,7 @@ export function useOptionsGetters({
         // Other getters and the focused route may still change during cleanup.
         // Wait until the commit finishes before reporting the remaining options.
         if (onOptionsChange !== undefined) {
-          queueMicrotask(onOptionsChange);
+          void Promise.resolve().then(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();

package/src/useRegisterNavigator.tsx

@@ -1,4 +1,3 @@
-import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 
 import { SingleNavigatorContext } from './EnsureSingleNavigator';
@@ -8,7 +7,8 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  * This is used to prevent multiple navigators under a single container or screen.
  */
 export function useRegisterNavigator() {
-  const [key] = React.useState(() => nanoid());
+  const key = React.useId();
+
   const container = React.use(SingleNavigatorContext);
 
   if (container === undefined) {