@react-navigation/core 8.0.0-alpha.0 → 8.0.0-alpha.10

package/src/ConsumedParamsContext.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+type ConsumedParamsContextValue = {
+  isConsumed: (params: object) => boolean;
+  setConsumed: (params: object) => void;
+};
+
+export const ConsumedParamsContext = React.createContext<
+  ConsumedParamsContextValue | undefined
+>(undefined);

package/src/NavigationBuilderContext.tsx

@@ -52,20 +52,26 @@ export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;
  * Context which holds the required helpers needed to build nested navigators.
  */
 export const NavigationBuilderContext = React.createContext<{
-  onAction?: (
-    action: NavigationAction,
-    visitedNavigators?: Set<string>
-  ) => boolean;
-  addListener?: AddListener;
-  addKeyedListener?: AddKeyedListener;
-  onRouteFocus?: (key: string) => void;
+  onAction?:
+    | ((action: NavigationAction, visitedNavigators?: Set<string>) => boolean)
+    | undefined;
+  addListener?: AddListener | undefined;
+  addKeyedListener?: AddKeyedListener | undefined;
+  onRouteFocus?: ((key: string) => void) | undefined;
   onDispatchAction: (action: NavigationAction, noop: boolean) => void;
+  onEmitEvent: (event: {
+    type: string;
+    defaultPrevented: boolean | undefined;
+    target: string | undefined;
+    data: unknown;
+  }) => void;
   onOptionsChange: (options: object) => void;
   scheduleUpdate: (callback: () => void) => void;
   flushUpdates: () => void;
-  stackRef?: React.MutableRefObject<string | undefined>;
+  stackRef?: React.MutableRefObject<string | undefined> | undefined;
 }>({
   onDispatchAction: () => undefined,
+  onEmitEvent: () => undefined,
   onOptionsChange: () => undefined,
   scheduleUpdate: () => {
     throw new Error("Couldn't find a context for scheduling updates.");

package/src/NavigationFocusedRouteStateContext.tsx

@@ -3,11 +3,11 @@ import * as React from 'react';
 export type FocusedRouteState = {
   routes: [
     {
-      key?: string;
+      key?: string | undefined;
       name: string;
-      params?: object;
-      path?: string;
-      state?: FocusedRouteState;
+      params?: object | undefined;
+      path?: string | undefined;
+      state?: FocusedRouteState | undefined;
     },
   ];
 };

package/src/NavigationIndependentTree.tsx

@@ -7,6 +7,7 @@ import {
   NavigationRouteContext,
   NavigationRouteNameContext,
 } from './NavigationProvider';
+import { IsFocusedContext } from './useIsFocused';
 
 /**
  * Component to make the child navigation container independent of parent containers.
@@ -21,11 +22,13 @@ export function NavigationIndependentTree({
     <NamedRouteContextListContext.Provider value={undefined}>
       <NavigationRouteContext.Provider value={undefined}>
         <NavigationContext.Provider value={undefined}>
-          <NavigationRouteNameContext.Provider value={undefined}>
-            <NavigationIndependentTreeContext.Provider value={true}>
-              {children}
-            </NavigationIndependentTreeContext.Provider>
-          </NavigationRouteNameContext.Provider>
+          <IsFocusedContext.Provider value={undefined}>
+            <NavigationRouteNameContext.Provider value={undefined}>
+              <NavigationIndependentTreeContext.Provider value={true}>
+                {children}
+              </NavigationIndependentTreeContext.Provider>
+            </NavigationRouteNameContext.Provider>
+          </IsFocusedContext.Provider>
         </NavigationContext.Provider>
       </NavigationRouteContext.Provider>
     </NamedRouteContextListContext.Provider>

package/src/NavigationMetaContext.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+/**
+ * Context with additional metadata to pass to child navigator in a screen.
+ * For example, child native stack to know it's inside native tabs.
+ * So it doesn't implement features such as `popToTop` that are handled by native tabs.
+ *
+ * Consumers should not make any assumptions about the shape of the object.
+ * It can be different depending on the navigator and may change without notice.
+ * This is not intended to be used by application code.
+ */
+export const NavigationMetaContext = React.createContext<object | undefined>(
+  undefined
+);

package/src/NavigationProvider.tsx

@@ -2,6 +2,7 @@ import type { ParamListBase, Route } from '@react-navigation/routers';
 import * as React from 'react';
 
 import type { NavigationProp } from './types';
+import { FocusedRouteKeyContext, IsFocusedContext } from './useIsFocused';
 import { useLazyValue } from './useLazyValue';
 
 /**
@@ -48,14 +49,27 @@ export function NavigationProvider({ route, navigation, children }: Props) {
     [NamedRouteContext, parents, route.name]
   );
 
+  const parentIsFocused = React.use(IsFocusedContext);
+  const focusedRouteKey = React.use(FocusedRouteKeyContext);
+
+  // Mark route as focused only if:
+  // - It doesn't have a parent navigator
+  // - Parent navigator is focused
+  const isFocused =
+    parentIsFocused == null || parentIsFocused
+      ? focusedRouteKey === route.key
+      : false;
+
   return (
     <NamedRouteContextListContext.Provider value={NamedRouteContextList}>
       <NamedRouteContext.Provider value={route}>
         <NavigationRouteContext.Provider value={route}>
           <NavigationContext.Provider value={navigation}>
-            <NavigationRouteNameContext.Provider value={route.name}>
-              {children}
-            </NavigationRouteNameContext.Provider>
+            <IsFocusedContext.Provider value={isFocused}>
+              <NavigationRouteNameContext.Provider value={route.name}>
+                {children}
+              </NavigationRouteNameContext.Provider>
+            </IsFocusedContext.Provider>
           </NavigationContext.Provider>
         </NavigationRouteContext.Provider>
       </NamedRouteContext.Provider>

package/src/NavigationStateContext.tsx

@@ -5,8 +5,8 @@ const MISSING_CONTEXT_ERROR =
   "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
 
 export const NavigationStateContext = React.createContext<{
-  isDefault?: true;
-  state?: NavigationState | PartialState<NavigationState>;
+  isDefault?: true | undefined;
+  state?: NavigationState | PartialState<NavigationState> | undefined;
   getKey: () => string | undefined;
   setKey: (key: string) => void;
   getState: () => NavigationState | PartialState<NavigationState> | undefined;
@@ -14,10 +14,9 @@ export const NavigationStateContext = React.createContext<{
     state: NavigationState | PartialState<NavigationState> | undefined
   ) => void;
   getIsInitial: () => boolean;
-  addOptionsGetter?: (
-    key: string,
-    getter: () => object | undefined | null
-  ) => void;
+  addOptionsGetter?:
+    | ((key: string, getter: () => object | undefined | null) => void)
+    | undefined;
 }>({
   isDefault: true,
 

package/src/PreventRemoveProvider.tsx

@@ -50,10 +50,10 @@ export function PreventRemoveProvider({ children }: Props) {
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(() => new Map());
 
-  const navigation = React.useContext(NavigationHelpersContext);
-  const route = React.useContext(NavigationRouteContext);
+  const navigation = React.use(NavigationHelpersContext);
+  const route = React.use(NavigationRouteContext);
 
-  const preventRemoveContextValue = React.useContext(PreventRemoveContext);
+  const preventRemoveContextValue = React.use(PreventRemoveContext);
   // take `setPreventRemove` from parent context - if exist it means we're in a nested context
   const setParentPrevented = preventRemoveContextValue?.setPreventRemove;
 

package/src/SceneView.tsx

@@ -6,6 +6,7 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
+import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { EnsureSingleNavigator } from './EnsureSingleNavigator';
 import { isArrayEqual } from './isArrayEqual';
 import {
@@ -70,46 +71,16 @@ export function SceneView<
       const state = getState();
 
       const routes = state.routes.map((r) => {
-        if (r.key !== route.key) {
-          return r;
+        if (r.key === route.key && r.state !== child) {
+          return {
+            ...r,
+            state: child,
+          };
         }
 
-        const nextRoute = r.state !== child ? { ...r, state: child } : r;
-
-        // Before updating the state, cleanup any nested screen and state
-        // This will avoid the navigator trying to handle them again
-        if (
-          nextRoute.params &&
-          (('state' in nextRoute.params &&
-            typeof nextRoute.params.state === 'object' &&
-            nextRoute.params.state !== null) ||
-            ('screen' in nextRoute.params &&
-              typeof nextRoute.params.screen === 'string'))
-        ) {
-          // @ts-expect-error: we don't have correct type for params
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
-          const { state, screen, params, initial, ...rest } = nextRoute.params;
-
-          if (Object.keys(rest).length) {
-            return { ...nextRoute, params: rest };
-          } else {
-            const {
-              // We destructure the params to omit them
-              // eslint-disable-next-line @typescript-eslint/no-unused-vars
-              params,
-              ...restRoute
-            } = nextRoute;
-
-            return restRoute;
-          }
-        }
-
-        return nextRoute;
+        return r;
       });
 
-      // Make sure not to update state if routes haven't changed
-      // Otherwise this will result in params cleanup as well
-      // We only want to cleanup params when state changes - after they are used
       if (!isArrayEqual(state.routes, routes)) {
         setState({
           ...state,
@@ -134,10 +105,39 @@ export function SceneView<
 
   const getIsInitial = React.useCallback(() => isInitialRef.current, []);
 
-  const parentFocusedRouteState = React.useContext(
-    NavigationFocusedRouteStateContext
+  const [consumedParams, setConsumedParams] = React.useState<WeakMap<
+    object,
+    true
+  > | null>(null);
+
+  const consumedParamsContext = React.useMemo(
+    () => ({
+      isConsumed: (params: object) => {
+        if (consumedParams) {
+          return consumedParams.has(params);
+        }
+
+        return false;
+      },
+      setConsumed: (params: object) => {
+        setConsumedParams((prev) => {
+          if (prev && prev.has(params)) {
+            return prev;
+          }
+
+          const map = new WeakMap<object, true>();
+
+          map.set(params, true);
+
+          return map;
+        });
+      },
+    }),
+    [consumedParams]
   );
 
+  const parentFocusedRouteState = React.use(NavigationFocusedRouteStateContext);
+
   const focusedRouteState = React.useMemo(() => {
     const state: FocusedRouteState = {
       routes: [
@@ -205,23 +205,25 @@ export function SceneView<
     : screen.component;
 
   return (
-    <NavigationStateContext.Provider value={context}>
-      <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
-        <EnsureSingleNavigator>
-          <StaticContainer
-            name={screen.name}
-            render={ScreenComponent || screen.children}
-            navigation={navigation}
-            route={route}
-          >
-            {ScreenComponent !== undefined ? (
-              <ScreenComponent navigation={navigation} route={route} />
-            ) : screen.children !== undefined ? (
-              screen.children({ navigation, route })
-            ) : null}
-          </StaticContainer>
-        </EnsureSingleNavigator>
-      </NavigationFocusedRouteStateContext.Provider>
-    </NavigationStateContext.Provider>
+    <ConsumedParamsContext.Provider value={consumedParamsContext}>
+      <NavigationStateContext.Provider value={context}>
+        <NavigationFocusedRouteStateContext.Provider value={focusedRouteState}>
+          <EnsureSingleNavigator>
+            <StaticContainer
+              name={screen.name}
+              render={ScreenComponent || screen.children}
+              navigation={navigation}
+              route={route}
+            >
+              {ScreenComponent !== undefined ? (
+                <ScreenComponent navigation={navigation} route={route} />
+              ) : screen.children !== undefined ? (
+                screen.children({ navigation, route })
+              ) : null}
+            </StaticContainer>
+          </EnsureSingleNavigator>
+        </NavigationFocusedRouteStateContext.Provider>
+      </NavigationStateContext.Provider>
+    </ConsumedParamsContext.Provider>
   );
 }

package/src/StaticNavigation.tsx

@@ -28,6 +28,7 @@ import type {
   InferParse,
   InferPath,
   KeysOf,
+  StandardSchemaV1,
   UnionToIntersection,
   ValidPathPattern,
 } from './utilities';
@@ -42,13 +43,32 @@ type ParamsForScreenComponent<T> = T extends (...args: any[]) => any
     ? Params
     : undefined;
 
+// If every nested route's params include `undefined`, the nested navigator
+// itself can be omitted. Otherwise, require `NavigatorScreenParams`.
+type ParamsForNestedNavigator<
+  T extends {
+    config: StaticConfig<NavigatorTypeBagBase>;
+  },
+  ParamList extends {} = StaticParamList<T>,
+> = {
+  // Exclude routes with optional params so the resulting union only contains route names with required params.
+  // If there are no routes with required params, the resulting union will be `never`.
+  [RouteName in keyof ParamList]-?: undefined extends ParamList[RouteName]
+    ? never
+    : RouteName;
+}[keyof ParamList] extends never
+  ? NavigatorScreenParams<ParamList> | undefined
+  : NavigatorScreenParams<ParamList>;
+
 type ParamsForScreen<T> =
   // Nested navigator in screen property
-  T extends { screen: StaticNavigation<any, any, any> }
-    ? NavigatorScreenParams<StaticParamList<T['screen']>> | undefined
+  T extends {
+    screen: { config: StaticConfig<NavigatorTypeBagBase> };
+  }
+    ? ParamsForNestedNavigator<T['screen']>
     : // Direct nested navigator
-      T extends StaticNavigation<any, any, any>
-      ? NavigatorScreenParams<StaticParamList<T>> | undefined
+      T extends { config: StaticConfig<NavigatorTypeBagBase> }
+      ? ParamsForNestedNavigator<T>
       : T extends {
             screen: React.ComponentType<any>;
           }
@@ -75,7 +95,7 @@ type ParamsForConfig<Linking, Screen> = undefined extends Linking
   : // Only infer params from linking if it's a pattern (i.e., contains ':')
     // This avoids inferring non-literals like 'string'
     Linking extends ValidPathPattern | { path: ValidPathPattern }
-    ? Screen extends StaticNavigation<any, any, any>
+    ? Screen extends { config: StaticConfig<NavigatorTypeBagBase> }
       ? FlatType<ParamsForLinking<Linking>> & ParamsForScreen<Screen>
       : // Don't combine if `undefined`, otherwise it'll result in `never`
         undefined extends ParamsForScreen<Screen>
@@ -147,7 +167,7 @@ type StaticScreenConfigLinkingAlias = {
    */
   exact?: boolean;
   /**
-   * An object mapping the param name to a function which parses the param value.
+   * An object mapping the param name to a parser function or a Standard Schema.
    *
    * @example
    * ```js
@@ -157,7 +177,11 @@ type StaticScreenConfigLinkingAlias = {
    * }
    * ```
    */
-  parse?: Record<string, (value: string) => unknown>;
+  parse?: Record<
+    string,
+    | ((value: string) => unknown)
+    | StandardSchemaV1<string | string[] | null | undefined, unknown>
+  >;
   /**
    * An object mapping the param name to a function which converts the param value to a string.
    * By default, all params are converted to strings using `String(value)`.
@@ -184,7 +208,7 @@ export type StaticScreenConfigLinking =
 
 export type StaticScreenConfigScreen =
   | React.ComponentType<any>
-  | StaticNavigation<any, any, any>;
+  | StaticNavigation<any>;
 
 export type StaticScreenConfig<
   Linking extends StaticScreenConfigLinking,
@@ -328,15 +352,18 @@ type StaticConfigScreens<
 > = {
   [RouteName in keyof ParamList]:
     | React.ComponentType<any>
-    | StaticNavigation<any, any, any>
+    | StaticNavigation<any>
     | StaticScreenConfig<
         | {
             path: string;
-            parse?: Record<string, (value: string) => any>;
+            parse?: Record<
+              string,
+              ((value: string) => any) | StandardSchemaV1<any, any>
+            >;
           }
         | string
         | undefined,
-        StaticNavigation<any, any, any> | React.ComponentType<any>,
+        StaticNavigation<any> | React.ComponentType<any>,
         State,
         ScreenOptions,
         EventMap,
@@ -503,11 +530,9 @@ export type StaticParamList<
     ParamListForGroups<T['config']['groups']>
 >;
 
-export type StaticNavigation<NavigatorProps, GroupProps, ScreenProps> = {
-  Navigator: React.ComponentType<NavigatorProps>;
-  Group: React.ComponentType<GroupProps>;
-  Screen: React.ComponentType<ScreenProps>;
-  config: StaticConfig<NavigatorTypeBagBase>;
+export type StaticNavigation<NavigatorTypeBag extends NavigatorTypeBagBase> = {
+  config: StaticConfig<NavigatorTypeBag>;
+  getComponent: () => React.ComponentType<{}>;
 };
 
 const MemoizedScreen = React.memo(
@@ -542,16 +567,13 @@ const getItemsFromScreens = (
         component = screen;
       } else if ('config' in screen) {
         isNavigator = true;
-        component = createComponentForStaticNavigation(
-          screen,
-          `${name}Navigator`
-        );
+        component = screen.getComponent();
       }
     } else if (isValidElementType(item)) {
       component = item;
     } else if ('config' in item) {
       isNavigator = true;
-      component = createComponentForStaticNavigation(item, `${name}Navigator`);
+      component = item.getComponent();
     }
 
     if (component == null) {
@@ -589,10 +611,17 @@ const getItemsFromScreens = (
  * @param displayName Name of the component to be displayed in React DevTools.
  * @returns A component which renders the navigator.
  */
-export function createComponentForStaticNavigation(
-  tree: StaticNavigation<any, any, any>,
+export function createComponentForStaticConfig<
+  T extends {
+    Navigator: React.ComponentType<any>;
+    Group: React.ComponentType<any>;
+    Screen: React.ComponentType<any>;
+    config: StaticConfig<NavigatorTypeBagBase>;
+  },
+>(
+  tree: T,
   displayName: string
-): React.ComponentType<{}> {
+): React.ComponentType<Omit<React.ComponentProps<T['Navigator']>, 'children'>> {
   const { Navigator, Group, Screen, config } = tree;
   const { screens, groups, ...rest } = config;
 
@@ -637,10 +666,51 @@ export function createComponentForStaticNavigation(
     }
   }
 
-  const NavigatorComponent = () => {
+  if (items.length === 0) {
+    throw new Error(
+      "Couldn't find any screens in the 'screens' or 'groups' property. Make sure to define at least one screen in the configuration."
+    );
+  }
+
+  const NavigatorComponent = ({ children: _, ...props }: typeof rest) => {
     const children = items.map((item) => item());
 
-    return <Navigator {...rest}>{children}</Navigator>;
+    const screenOptions =
+      typeof props.screenOptions === 'function' ||
+      typeof rest.screenOptions === 'function'
+        ? (options: unknown) => ({
+            ...(typeof rest.screenOptions === 'function'
+              ? rest.screenOptions(options)
+              : rest.screenOptions),
+            ...(typeof props.screenOptions === 'function'
+              ? props.screenOptions(options)
+              : props.screenOptions),
+          })
+        : { ...rest.screenOptions, ...props.screenOptions };
+
+    const screenListeners =
+      typeof props.screenListeners === 'function' ||
+      typeof rest.screenListeners === 'function'
+        ? (options: unknown) => ({
+            ...(typeof rest.screenListeners === 'function'
+              ? rest.screenListeners(options)
+              : rest.screenListeners),
+            ...(typeof props.screenListeners === 'function'
+              ? props.screenListeners(options)
+              : props.screenListeners),
+          })
+        : { ...rest.screenListeners, ...props.screenListeners };
+
+    return (
+      <Navigator
+        {...rest}
+        {...props}
+        screenOptions={screenOptions}
+        screenListeners={screenListeners}
+      >
+        {children}
+      </Navigator>
+    );
   };
 
   NavigatorComponent.displayName = displayName;
@@ -696,19 +766,19 @@ type TreeForPathConfig = {
  * };
  * ```
  */
-export function createPathConfigForStaticNavigation(
+export function createPathConfigForStaticNavigation<ParamList extends {}>(
   tree: TreeForPathConfig,
   options?: {
-    initialRouteName?: string;
+    initialRouteName?: string | undefined;
   },
   auto?: boolean
-): PathConfigMap<ParamListBase> | undefined {
+): PathConfigMap<ParamList> | undefined {
   let initialScreenHasPath: boolean = false;
   let initialScreenConfig: PathConfig<{}> | undefined;
 
   const createPathConfigForTree = (
     t: TreeForPathConfig,
-    o: { initialRouteName?: string } | undefined,
+    o: { initialRouteName?: string | undefined } | undefined,
     // If a screen is a leaf node, but inside a screen with path,
     // It should not be used for initial detection
     skipInitialDetection: boolean

package/src/createNavigatorFactory.tsx

@@ -1,7 +1,8 @@
-import type * as React from 'react';
+import * as React from 'react';
 
 import { Group } from './Group';
 import { Screen } from './Screen';
+import { createComponentForStaticConfig } from './StaticNavigation';
 
 /**
  * Higher order component to create a `Navigator` and `Screen` pair.
@@ -11,13 +12,43 @@ import { Screen } from './Screen';
  * @returns Factory method to create a `Navigator` and `Screen` pair.
  */
 export function createNavigatorFactory(Navigator: React.ComponentType<any>) {
+  const displayName = Navigator.displayName ?? Navigator.name ?? 'Navigator';
+
   function createNavigator(config?: any): any {
     if (config != null) {
+      const NavigatorComponent = createComponentForStaticConfig(
+        {
+          Navigator,
+          Screen,
+          Group,
+          config,
+        },
+        displayName
+      );
+
       return {
-        Navigator,
-        Screen,
-        Group,
         config,
+        with(
+          DecoratorComponent: React.ComponentType<{
+            Navigator: React.ComponentType<any>;
+          }>
+        ) {
+          const WithComponent = () => {
+            return React.createElement(DecoratorComponent, {
+              Navigator: NavigatorComponent,
+            });
+          };
+
+          WithComponent.displayName = `${displayName}With`;
+
+          return {
+            config,
+            getComponent: () => WithComponent,
+          };
+        },
+        getComponent() {
+          return NavigatorComponent;
+        },
       };
     }
 

package/src/findFocusedRoute.tsx

@@ -2,10 +2,10 @@ import type { InitialState } from '@react-navigation/routers';
 
 type Result =
   | {
-      key?: string;
+      key?: string | undefined;
       name: string;
-      params?: object;
-      path?: string;
+      params?: object | undefined;
+      path?: string | undefined;
     }
   | undefined;