@react-navigation/core 8.0.0-alpha.31 → 8.0.0-alpha.32

package/src/NavigationRootContext.tsx

@@ -0,0 +1,11 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import type { GenericNavigation } from './types';
+
+/**
+ * Context which holds the navigation object for components outside a screen.
+ */
+export const NavigationRootContext = React.createContext<
+  GenericNavigation<ParamListBase> | undefined
+>(undefined);

package/src/StaticNavigation.tsx

@@ -678,6 +678,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>
@@ -688,18 +691,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;
+      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;
 
-      useIf = _if;
-      props = rest;
+        getComponent = () => {
+          const screen = item.screen;
 
-      if (isValidElementType(screen)) {
-        component = screen;
-      } else if ('config' in screen) {
-        isNavigator = true;
-        component = screen.getComponent();
+          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.`
+            );
+          }
+
+          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;
@@ -708,18 +750,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();
 
@@ -729,7 +782,7 @@ const getItemsFromScreens = (
 
       return (
         <Screen key={name} name={name} {...props}>
-          {() => element}
+          {children}
         </Screen>
       );
     };
@@ -895,7 +948,7 @@ type PathConfigForStaticNavigation = Omit<
 // Mark screens that resolve to the same pattern and same component or navigator
 const markSharedPathConfigs = (
   screens: PathConfigMapForStaticNavigation,
-  sources: WeakMap<PathConfigForStaticNavigation, ScreenValueForPathConfig>,
+  sources: WeakMap<PathConfigForStaticNavigation, ScreenForPathConfig>,
   blocked: WeakSet<PathConfigForStaticNavigation>
 ) => {
   const candidates = new Map<string, PathConfigForStaticNavigation[]>();
@@ -992,7 +1045,7 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
   const blocked = new WeakSet<PathConfigForStaticNavigation>();
   const sources = new WeakMap<
     PathConfigForStaticNavigation,
-    ScreenValueForPathConfig
+    ScreenForPathConfig
   >();
 
   const createPathConfigForTree = (
@@ -1043,7 +1096,11 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
 
             sources.set(
               screenConfig,
-              typeof item === 'object' && 'screen' in item ? item.screen : item
+              typeof item === 'object' &&
+                'screen' in item &&
+                !hasPropertyGetter(item, 'screen')
+                ? item.screen
+                : item
             );
 
             const normalizePath = (path: string) =>
@@ -1129,6 +1186,7 @@ export function createPathConfigForStaticNavigation<ParamList extends {}>(
               !hasExplicitScreens &&
               !hasDisabledLinking &&
               'screen' in item &&
+              !hasPropertyGetter(item, 'screen') &&
               'config' in item.screen &&
               (item.screen.config.screens || item.screen.config.groups)
             ) {

package/src/createNavigationContainerRef.tsx

@@ -19,11 +19,9 @@ export function createNavigationContainerRef<
     'removeListener',
     'resetRoot',
     'dispatch',
-    'isFocused',
     'canGoBack',
     'getRootState',
     'getState',
-    'getParent',
     'getCurrentRoute',
     'getCurrentOptions',
   ] as const;

package/src/index.tsx

@@ -19,6 +19,7 @@ export { NavigationHelpersContext } from './NavigationHelpersContext';
 export { NavigationIndependentTree } from './NavigationIndependentTree';
 export { NavigationMetaContext } from './NavigationMetaContext';
 export {
+  IsScreenContext,
   NavigationContext,
   NavigationProvider,
   NavigationRouteContext,

package/src/internal.tsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface Theme {}

package/src/types.tsx

@@ -10,6 +10,7 @@ import type {
 } from '@react-navigation/routers';
 import type * as React from 'react';
 
+import type { Theme as InternalTheme } from './internal';
 import type {
   FlatType,
   KeyOf,
@@ -51,8 +52,7 @@ export interface RootNavigator {}
  * }
  * ```
  */
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface Theme {}
+export interface Theme extends InternalTheme {}
 
 export type RootParamList =
   RootNavigator extends PrivateValueStore<
@@ -1360,7 +1360,7 @@ type NavigationListForGroups<ParentList, Groups> = Groups extends {}
 
 export type NavigationContainerRef<ParamList extends {}> = Omit<
   NavigationHelpers<ParamList>,
-  keyof NavigationHelpersRoute<{}>
+  keyof NavigationHelpersRoute<{}> | 'isFocused'
 > &
   NavigationHelpersRoute<{}> &
   EventConsumer<NavigationContainerEventMap> & {
@@ -1386,10 +1386,6 @@ export type NavigationContainerRef<ParamList extends {}> = Omit<
      * Whether the navigation container is ready to handle actions.
      */
     isReady(): boolean;
-    /**
-     * Stub function for setOptions on navigation object for use with useNavigation.
-     */
-    setOptions(): never;
   };
 
 export type NavigationContainerRefWithCurrent<ParamList extends {}> =

package/src/useDescriptors.tsx

@@ -125,8 +125,8 @@ export function useDescriptors<
     onOptionsChange,
     scheduleUpdate,
     flushUpdates,
-    stackRef,
     getIsStateEmitted,
+    withStackTrace,
   } = React.use(NavigationBuilderContext);
 
   const context = React.useMemo(
@@ -142,7 +142,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     }),
     [
       navigation,
@@ -156,7 +156,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     ]
   );
 

package/src/useKeyedChildListeners.tsx

@@ -14,6 +14,7 @@ export function useKeyedChildListeners() {
   }>(
     Object.assign(Object.create(null), {
       getState: {},
+      getNavigation: {},
       beforeRemove: {},
     })
   );

package/src/useNavigation.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
-import { NavigationContainerRefContext } from './NavigationContainerRefContext';
 import { NavigationContext } from './NavigationProvider';
+import { NavigationRootContext } from './NavigationRootContext';
 import type {
   GenericNavigation,
   NavigationListForNavigator,
@@ -30,7 +30,7 @@ export function useNavigation<
     keyof NavigationListForNested<Navigator>,
 >(name: RouteName): NavigationListForNested<Navigator>[RouteName];
 export function useNavigation(name?: string): unknown {
-  const root = React.use(NavigationContainerRefContext);
+  const root = React.use(NavigationRootContext);
   const navigation = React.use(NavigationContext);
 
   if (name === undefined) {

package/src/useNavigationBuilder.tsx

@@ -22,7 +22,7 @@ import { isArrayEqual } from './isArrayEqual';
 import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationMetaContext } from './NavigationMetaContext';
-import { NavigationRouteContext } from './NavigationProvider';
+import { IsScreenContext, NavigationRouteContext } from './NavigationProvider';
 import { NavigationStateContext } from './NavigationStateContext';
 import { PreventRemoveProvider } from './PreventRemoveProvider';
 import { Screen } from './Screen';
@@ -47,6 +47,7 @@ import { useLazyValue } from './useLazyValue';
 import { useNavigationHelpers } from './useNavigationHelpers';
 import { NavigationStateListenerProvider } from './useNavigationState';
 import { useOnAction } from './useOnAction';
+import { useOnGetNavigation } from './useOnGetNavigation';
 import { useOnGetState } from './useOnGetState';
 import { useOnRouteFocus } from './useOnRouteFocus';
 import { useRegisterNavigator } from './useRegisterNavigator';
@@ -1005,7 +1006,6 @@ export function useNavigationBuilder<
     onAction,
     onUnhandledAction,
     getState,
-    state,
     emitter,
     router,
   });
@@ -1020,6 +1020,8 @@ export function useNavigationBuilder<
     getStateListeners: keyedListeners.getState,
   });
 
+  useOnGetNavigation({ navigation });
+
   const descriptors = useDescriptors<
     State,
     ActionHelpers,
@@ -1064,12 +1066,17 @@ export function useNavigationBuilder<
       <NavigationMetaContext.Provider value={undefined}>
         <NavigationHelpersContext.Provider value={navigation}>
           <NavigationStateListenerProvider
+            isSynced={!shouldUpdate}
             state={state}
-            getState={navigation.getState}
+            getState={getState}
             subscribe={subscribe}
           >
             <FocusedRouteKeyContext.Provider value={focusedRoute.key}>
-              <PreventRemoveProvider>{element}</PreventRemoveProvider>
+              <PreventRemoveProvider>
+                <IsScreenContext.Provider value={false}>
+                  {element}
+                </IsScreenContext.Provider>
+              </PreventRemoveProvider>
             </FocusedRouteKeyContext.Provider>
           </NavigationStateListenerProvider>
         </NavigationHelpersContext.Provider>

package/src/useNavigationCache.tsx

@@ -72,8 +72,9 @@ export function useNavigationCache<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const parentNavigationHelpers = React.use(NavigationContext);
-  const { stackRef } = React.use(NavigationBuilderContext);
+  const parentNavigation = React.use(NavigationContext);
+
+  const { withStackTrace } = React.use(NavigationBuilderContext);
 
   // 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
@@ -88,7 +89,7 @@ export function useNavigationCache<
       >,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [getState, parentNavigationHelpers, navigation, setOptions, emitter]
+    [getState, parentNavigation, navigation, setOptions, emitter]
   );
 
   const next = routes.reduce<
@@ -100,34 +101,12 @@ export function useNavigationCache<
       // If a cached navigation object already exists, reuse it
       acc[route.key] = previous;
     } else {
-      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 dispatch = (
         thunk:
           | NavigationAction
           | ((state: State) => NavigationAction | null | undefined)
       ) => {
-        withStack(() =>
+        withStackTrace(dispatch, () => {
           React.startTransition(() => {
             const action =
               typeof thunk === 'function' ? thunk(getState()) : thunk;
@@ -135,8 +114,8 @@ export function useNavigationCache<
             if (action != null) {
               navigation.dispatch({ source: route.key, ...action });
             }
-          })
-        );
+          });
+        });
       };
 
       const actions = {
@@ -146,9 +125,13 @@ export function useNavigationCache<
 
       const helpers = Object.keys(actions).reduce<Record<string, () => void>>(
         (acc, name) => {
-          acc[name] = (...args: any) =>
-            // @ts-expect-error: name is a valid key, but TypeScript is dumb
-            dispatch(actions[name](...args));
+          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;
         },
@@ -172,10 +155,18 @@ export function useNavigationCache<
           }
 
           if (routeName !== undefined) {
-            return parentNavigationHelpers?.getParent(routeName);
+            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 parentNavigationHelpers;
+          return parentNavigation;
         },
         setOptions: (options: Partial<ScreenOptions>) => {
           setOptions((o) => ({

package/src/useNavigationHelpers.tsx

@@ -7,6 +7,7 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationContext } from './NavigationProvider';
 import { type NavigationHelpers, PrivateValueStore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -19,7 +20,6 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
   onAction: (action: NavigationAction) => boolean;
   onUnhandledAction: (action: NavigationAction) => void;
   getState: () => State;
-  state: State;
   emitter: NavigationEventEmitter<any>;
   router: Router<State, Action>;
 };
@@ -37,38 +37,23 @@ export function useNavigationHelpers<
   onAction,
   onUnhandledAction,
   getState,
-  state,
   emitter,
   router,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.use(NavigationContext);
-
-  // 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
-  // During this time, we need to return the internal state in `getState`
-  // Otherwise it can return an inconsistent state during render in children
-  // This may affect hooks like `useNavigationState` that need to read the state during render
-  // To avoid this, we use a ref for render phase, and immediately clear it on commit
-  // The ref won't be cleared if the render is discarded, e.g. when interrupted
-  // So we also track the stored state the render was based on
-  // Then ignore the ref once the stored state changes due to another dispatch
-  const stateRef = React.useRef<{ state: State; base: State } | null>(null);
-
-  stateRef.current = { state, base: getState() };
-
-  React.useInsertionEffect(() => {
-    stateRef.current = null;
-  });
+  const { withStackTrace } = React.use(NavigationBuilderContext);
 
   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 = {
@@ -77,8 +62,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);
 
@@ -103,18 +95,7 @@ export function useNavigationHelpers<
           false
         );
       },
-      getState: (): State => {
-        const current = getState();
-        const pending = stateRef.current;
-
-        // FIXME: Workaround for when the state is read during render
-        // Apart from subscriptions, `getState` should never be called during render
-        if (pending != null && pending.base === current) {
-          return pending.state;
-        }
-
-        return current;
-      },
+      getState,
     } as NavigationHelpers<ParamListBase, EventMap> & ActionHelpers;
 
     return navigationHelpers;
@@ -125,6 +106,6 @@ export function useNavigationHelpers<
     getState,
     onAction,
     onUnhandledAction,
-    stateRef,
+    withStackTrace,
   ]);
 }

package/src/useNavigationState.tsx

@@ -161,22 +161,18 @@ export function useNavigationState(...args: unknown[]): unknown {
 }
 
 export function NavigationStateListenerProvider({
+  isSynced,
   state,
   getState,
   subscribe,
   children,
 }: {
+  isSynced: boolean;
   state: NavigationState<ParamListBase>;
   getState: () => NavigationState<ParamListBase>;
   subscribe: (callback: () => void) => () => void;
   children: React.ReactNode;
 }) {
-  const snapshotRef = React.useRef(state);
-
-  React.useInsertionEffect(() => {
-    snapshotRef.current = state;
-  }, [state]);
-
   const [listeners] = React.useState(
     () => new Set<(event: NavigationStateEvent) => void>()
   );
@@ -185,10 +181,22 @@ export function NavigationStateListenerProvider({
     listeners.forEach((listener) => listener('commit'));
   }, [listeners, state]);
 
+  const snapshotRef = React.useRef(state);
+
+  React.useInsertionEffect(() => {
+    snapshotRef.current = state;
+  }, [state]);
+
+  // Route config or nested params can produce new state during render.
+  // If the scheduled update hasn't synced that state to the store yet,
+  // We need to expose the rendered state so consumers match the navigator.
+  // We keep this `undefined` for other scenarios, so the context isn't recreated.
+  const nextState = isSynced ? undefined : state;
+
   const context = React.useMemo(
     () => ({
       getState,
-      getSnapshot: () => snapshotRef.current,
+      getSnapshot: () => nextState ?? snapshotRef.current,
       subscribe: (callback: (event: NavigationStateEvent) => void) => {
         const unsubscribe = subscribe(() => callback('update'));
 
@@ -200,7 +208,7 @@ export function NavigationStateListenerProvider({
         };
       },
     }),
-    [getState, listeners, subscribe]
+    [getState, listeners, nextState, subscribe]
   );
 
   return (

package/src/useOnGetNavigation.tsx

@@ -0,0 +1,29 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { NavigationRouteContext } from './NavigationProvider';
+import type { NavigationHelpers } from './types';
+
+type Options = {
+  navigation: NavigationHelpers<ParamListBase>;
+};
+
+/**
+ * Hook which lets the container access the navigation object of the root navigator.
+ * It's used for the navigation object returned by `useNavigation` outside a screen.
+ */
+export function useOnGetNavigation({ navigation }: Options) {
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const route = React.use(NavigationRouteContext);
+
+  React.useInsertionEffect(() => {
+    // We only register if this is the root navigator
+    // i.e. there is no parent route
+    if (route != null) {
+      return;
+    }
+
+    return addKeyedListener?.('getNavigation', 'root', () => navigation);
+  }, [addKeyedListener, navigation, route]);
+}