@react-navigation/core 8.0.0-alpha.4 → 8.0.0-alpha.40

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 { NavigationContext } from './NavigationProvider';
 import type { NavigationHelpers, NavigationProp } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -19,12 +19,13 @@ 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, ScreenOptions>
-    ) => Record<string, ScreenOptions>
+      options: Record<string, Partial<ScreenOptions> | undefined>
+    ) => Record<string, Partial<ScreenOptions> | undefined>
   ) => void;
   router: Router<State, NavigationAction>;
   emitter: NavigationEventEmitter<EventMap>;
@@ -68,134 +69,158 @@ export function useNavigationCache<
   routes,
   getState,
   navigation,
+  canGoBack,
   setOptions,
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
-  const { stackRef } = React.useContext(NavigationBuilderContext);
+  const { withStackTrace } = useNavigationBuilderContext();
+
+  const parentNavigation = React.use(NavigationContext);
 
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
   // In reality, these deps will rarely change, if ever
-  const cache = React.useMemo(
-    () => ({
-      current: {} as NavigationCache<
-        State,
-        ScreenOptions,
-        EventMap,
-        ActionHelpers
-      >,
-    }),
+  const cache = React.useMemo<{
+    current: NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>;
+    routeNames: Record<string, string>;
+  }>(
+    () => ({ current: {}, routeNames: {} }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getState, parentNavigationHelpers, navigation, setOptions, emitter]
+    [
+      getState,
+      parentNavigation,
+      navigation,
+      canGoBack,
+      setOptions,
+      router,
+      emitter,
+      withStackTrace,
+    ]
   );
 
-  cache.current = routes.reduce<
-    NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
-  >((acc, route) => {
-    const previous = cache.current[route.key];
-
-    type Thunk =
-      | NavigationAction
-      | ((state: State) => NavigationAction | null | undefined);
-
-    if (previous) {
-      // If a cached navigation object already exists, reuse it
-      acc[route.key] = previous;
-    } else {
-      const dispatch = (thunk: Thunk) => {
-        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;
-          }
-
-          callback();
-        } finally {
-          if (isStackSet && stackRef) {
-            stackRef.current = undefined;
-          }
-        }
-      };
-
-      const actions = {
-        ...router.actionCreators,
-        ...CommonActions,
-      };
-
-      const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
-        (acc, name) => {
-          acc[name] = (...args: any) =>
-            withStack(() =>
-              // @ts-expect-error: name is a valid key, but TypeScript is dumb
-              dispatch(actions[name](...args))
-            );
-
-          return acc;
-        },
-        {}
-      );
-
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { emit, ...rest } = navigation;
-
-      acc[route.key] = {
-        ...rest,
-        ...helpers,
-        // FIXME: too much work to fix the types for now
-        ...(emitter.create(route.key) as any),
-        dispatch: (thunk: Thunk) => withStack(() => dispatch(thunk)),
-        getParent: (routeName) => {
-          if (routeName === route.name) {
-            // If the passed route name is the same as the current route's name,
-            // we return the cached navigation object for the route
-            return acc[route.key];
-          }
-
-          if (routeName !== undefined) {
-            return parentNavigationHelpers?.getParent(routeName);
-          }
-
-          return parentNavigationHelpers;
-        },
-        setOptions: (options: object) => {
-          setOptions((o) => ({
-            ...o,
-            [route.key]: { ...o[route.key], ...options },
-          }));
-        },
-        isFocused: () => {
-          const state = rest.getState();
-
-          if (state.routes[state.index].key !== route.key) {
-            return false;
-          }
-
-          // If the current screen is focused, we also need to check if parent navigator is focused
-          // This makes sure that we return the focus state in the whole tree, not just this navigator
-          return navigation ? navigation.isFocused() : true;
-        },
-      };
-    }
-
-    return acc;
-  }, {});
-
-  return cache.current;
+  const next = React.useMemo(() => {
+    return routes.reduce<
+      NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
+    >((acc, route) => {
+      const previous =
+        cache.routeNames[route.key] === route.name
+          ? cache.current[route.key]
+          : undefined;
+
+      if (previous) {
+        // If a cached navigation object already exists, reuse it
+        acc[route.key] = previous;
+      } else {
+        const dispatch = (
+          thunk:
+            | NavigationAction
+            | ((state: State) => NavigationAction | null | undefined)
+        ) => {
+          withStackTrace(dispatch, () => {
+            React.startTransition(() => {
+              const action =
+                typeof thunk === 'function' ? thunk(getState()) : thunk;
+
+              if (action != null) {
+                navigation.dispatch({ source: route.key, ...action });
+              }
+            });
+          });
+        };
+
+        const actions = {
+          ...router.actionCreators,
+          ...CommonActions,
+        };
+
+        const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
+          (acc, name) => {
+            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;
+          },
+          {}
+        );
+
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const { emit, ...rest } = navigation;
+
+        acc[route.key] = {
+          ...rest,
+          ...helpers,
+          // 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,
+              // we return the cached navigation object for the route
+              return acc[route.key];
+            }
+
+            if (routeName !== undefined) {
+              const parent = parentNavigation?.getParent(routeName);
+
+              if (parent === undefined) {
+                throw new Error(
+                  `Couldn't find a navigation object for '${routeName}' in current or any parent screens. Is your component inside the correct screen?`
+                );
+              }
+
+              return parent;
+            }
+
+            return parentNavigation;
+          },
+          setOptions: (options: Partial<ScreenOptions>) => {
+            setOptions((o) => ({
+              ...o,
+              [route.key]: { ...o[route.key], ...options },
+            }));
+          },
+          isFocused: () => {
+            const state = rest.getState();
+
+            if (state.routes[state.index]?.key !== route.key) {
+              return false;
+            }
+
+            // If the current screen is focused, we also need to check if parent navigator is focused
+            // This makes sure that we return the focus state in the whole tree, not just this navigator
+            return navigation ? navigation.isFocused() : true;
+          },
+        };
+      }
+
+      return acc;
+    }, {});
+  }, [
+    cache,
+    routes,
+    getState,
+    navigation,
+    canGoBack,
+    router,
+    withStackTrace,
+    emitter,
+    parentNavigation,
+    setOptions,
+  ]);
+
+  React.useInsertionEffect(() => {
+    cache.current = next;
+    cache.routeNames = Object.fromEntries(
+      routes.map((route) => [route.key, route.name])
+    );
+  }, [cache, next, routes]);
+
+  return next;
 }

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 './NavigationProvider';
 import { type NavigationHelpers, PrivateValueStore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -18,10 +19,10 @@ 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>;
-  stateRef: React.RefObject<State | null>;
 };
 
 /**
@@ -36,22 +37,26 @@ export function useNavigationHelpers<
 >({
   onAction,
   onUnhandledAction,
+  canGoBack,
   getState,
   emitter,
   router,
-  stateRef,
 }: Options<State, Action>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
+  const parentNavigationHelpers = React.use(NavigationContext);
+
+  const { withStackTrace } = useNavigationBuilderContext();
 
   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 = {
@@ -60,8 +65,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);
 
@@ -73,41 +85,19 @@ 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
-        );
-      },
-      getState: (): State => {
-        // FIXME: Workaround for when the state is read during render
-        // By this time, we haven't committed the new state yet
-        // Without this `useSyncExternalStore` will keep reading the old state
-        // This may result in `useNavigationState` or `useIsFocused` returning wrong values
-        // Apart from `useSyncExternalStore`, `getState` should never be called during render
-        if (stateRef.current != null) {
-          return stateRef.current;
-        }
-
-        return getState();
-      },
-    } as NavigationHelpers<ParamListBase, EventMap> & ActionHelpers;
+      canGoBack: () => canGoBack(),
+      getState,
+    } as NavigationHelpers<ParamListBase, State, EventMap> & ActionHelpers;
 
     return navigationHelpers;
   }, [
-    router,
+    router.actionCreators,
     parentNavigationHelpers,
     emitter.emit,
+    canGoBack,
     getState,
     onAction,
     onUnhandledAction,
-    stateRef,
+    withStackTrace,
   ]);
 }

package/src/useNavigationIndependentTree.tsx

@@ -3,5 +3,5 @@ import * as React from 'react';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 
 export function useNavigationIndependentTree() {
-  return React.useContext(NavigationIndependentTreeContext);
+  return React.use(NavigationIndependentTreeContext);
 }