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

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

@@ -1,19 +1,14 @@
-import type { InitialState } from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
 
-type Result =
-  | {
-      key?: string | undefined;
-      name: string;
-      params?: object | undefined;
-      path?: string | undefined;
-    }
-  | undefined;
+type State = NavigationState | PartialState<NavigationState>;
 
-export function findFocusedRoute(state: InitialState): Result {
-  let current: InitialState | undefined = state;
+export function findFocusedRoute(
+  state: State
+): State['routes'][number] | undefined {
+  let current: State | undefined = state;
 
   while (current != null) {
-    const route: InitialState['routes'][number] | undefined =
+    const route: State['routes'][number] | undefined =
       current.routes[current.index ?? current.routes.length - 1];
 
     if (route?.state == null) {

package/src/getActionFromState.tsx

@@ -89,7 +89,8 @@ export function getActionFromState(
     return undefined;
   }
 
-  let current: PartialState<NavigationState> | undefined = route.state;
+  let current: NavigationState | PartialState<NavigationState> | undefined =
+    route.state;
   let config: ConfigItem | undefined = normalizedConfig?.screens?.[route.name];
   let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 

package/src/getStateFromPath.tsx

@@ -1,13 +1,8 @@
-import type {
-  InitialState,
-  NavigationState,
-  PartialState,
-} from '@react-navigation/routers';
+import type { NavigationState, PartialState } from '@react-navigation/routers';
 import escape from 'escape-string-regexp';
 import queryString from 'query-string';
 
 import { arrayStartsWith } from './arrayStartsWith';
-import { findFocusedRoute } from './findFocusedRoute';
 import {
   combinePatternParts,
   getPatternParts,
@@ -58,13 +53,10 @@ type InitialRouteConfig = {
   parentScreens: string[];
 };
 
-type ResultState = PartialState<NavigationState> & {
-  state?: ResultState | undefined;
-};
-
 type ParsedRoute = {
   name: string;
   params?: Record<string, unknown> | undefined;
+  path?: string | undefined;
 };
 
 type RoutePatternPart = PatternPart & { screen: string };
@@ -177,7 +169,7 @@ export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>,
   previous?: NavigationState
-): ResultState | undefined {
+): PartialState<NavigationState> | undefined {
   const {
     initialRoutes,
     configs,
@@ -1016,7 +1008,7 @@ const createStateObject = (
   initialRoute: string | undefined,
   route: ParsedRoute,
   isEmpty: boolean
-): InitialState => {
+): PartialState<NavigationState> => {
   if (isEmpty) {
     if (initialRoute) {
       return {
@@ -1047,7 +1039,32 @@ const createNestedStateObject = (
   routes: ParsedRoute[],
   initialRoutes: InitialRouteConfig[],
   routeConfig?: RouteConfig
-): InitialState | undefined => {
+): PartialState<NavigationState> | undefined => {
+  const focusedRoute = routes[routes.length - 1];
+
+  if (focusedRoute == null) {
+    return undefined;
+  }
+
+  focusedRoute.path = path.replace(/\/$/, '');
+
+  const queryParams = parseQueryParams(
+    path,
+    routeConfig?.parse,
+    routeConfig?.pathParamNames,
+    routeConfig?.explicitParamNames,
+    routeConfig?.hasNestedScreens,
+    focusedRoute.params
+  );
+
+  if (!queryParams.valid) {
+    return undefined;
+  }
+
+  if (queryParams.params) {
+    focusedRoute.params = { ...focusedRoute.params, ...queryParams.params };
+  }
+
   let route = routes.shift();
 
   if (route == null) {
@@ -1060,11 +1077,7 @@ const createNestedStateObject = (
 
   parentScreens.push(route.name);
 
-  const state: InitialState = createStateObject(
-    initialRoute,
-    route,
-    routes.length === 0
-  );
+  const state = createStateObject(initialRoute, route, routes.length === 0);
 
   if (routes.length > 0) {
     let nestedState = state;
@@ -1104,31 +1117,6 @@ const createNestedStateObject = (
     }
   }
 
-  const focusedRoute = findFocusedRoute(state);
-
-  if (focusedRoute == null) {
-    return undefined;
-  }
-
-  focusedRoute.path = path.replace(/\/$/, '');
-
-  const queryParams = parseQueryParams(
-    path,
-    routeConfig?.parse,
-    routeConfig?.pathParamNames,
-    routeConfig?.explicitParamNames,
-    routeConfig?.hasNestedScreens,
-    focusedRoute.params
-  );
-
-  if (!queryParams.valid) {
-    return undefined;
-  }
-
-  if (queryParams.params) {
-    focusedRoute.params = { ...focusedRoute.params, ...queryParams.params };
-  }
-
   return state;
 };
 

package/src/getStateFromRouteParams.tsx

@@ -44,7 +44,6 @@ export function getStateFromRouteParams(
             'path' in params && typeof params.path === 'string'
               ? params.path
               : undefined,
-          // @ts-expect-error this is fine 🔥
           state:
             'params' in params &&
             typeof params.params === 'object' &&

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

@@ -78,6 +78,7 @@ type Options<
   onAction: (action: NavigationAction) => boolean;
   getState: () => State;
   setState: (state: State) => void;
+  subscribe: (callback: () => void) => () => void;
   addListener: AddListener;
   addKeyedListener: AddKeyedListener;
   onRouteFocus: (key: string) => void;
@@ -107,6 +108,7 @@ export function useDescriptors<
   onAction,
   getState,
   setState,
+  subscribe,
   addListener,
   addKeyedListener,
   onRouteFocus,
@@ -123,8 +125,8 @@ export function useDescriptors<
     onOptionsChange,
     scheduleUpdate,
     flushUpdates,
-    stackRef,
     getIsStateEmitted,
+    withStackTrace,
   } = React.use(NavigationBuilderContext);
 
   const context = React.useMemo(
@@ -140,7 +142,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     }),
     [
       navigation,
@@ -154,7 +156,7 @@ export function useDescriptors<
       getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     ]
   );
 
@@ -257,6 +259,7 @@ export function useDescriptors<
         routeState={routeState}
         getState={getState}
         setState={setState}
+        subscribe={subscribe}
         options={customOptions}
         clearOptions={clearOptions}
       />

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';
@@ -453,6 +454,7 @@ export function useNavigationBuilder<
     state: currentState,
     getState: getCurrentState,
     setState: setCurrentState,
+    subscribe,
     setKey,
     getKey,
     getIsInitial,
@@ -1004,7 +1006,6 @@ export function useNavigationBuilder<
     onAction,
     onUnhandledAction,
     getState,
-    state,
     emitter,
     router,
   });
@@ -1019,6 +1020,8 @@ export function useNavigationBuilder<
     getStateListeners: keyedListeners.getState,
   });
 
+  useOnGetNavigation({ navigation });
+
   const descriptors = useDescriptors<
     State,
     ActionHelpers,
@@ -1033,6 +1036,7 @@ export function useNavigationBuilder<
     onAction,
     getState,
     setState,
+    subscribe,
     onRouteFocus,
     addListener,
     addKeyedListener,
@@ -1062,11 +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) => ({