@react-navigation/core 8.0.0-alpha.3 → 8.0.0-alpha.5

package/src/StaticNavigation.tsx

@@ -28,6 +28,7 @@ import type {
   InferParse,
   InferPath,
   KeysOf,
+  StandardSchemaV1,
   UnionToIntersection,
   ValidPathPattern,
 } from './utilities';
@@ -44,10 +45,10 @@ type ParamsForScreenComponent<T> = T extends (...args: any[]) => any
 
 type ParamsForScreen<T> =
   // Nested navigator in screen property
-  T extends { screen: StaticNavigation<any, any, any> }
+  T extends { screen: StaticNavigationBase }
     ? NavigatorScreenParams<StaticParamList<T['screen']>> | undefined
     : // Direct nested navigator
-      T extends StaticNavigation<any, any, any>
+      T extends StaticNavigationBase
       ? NavigatorScreenParams<StaticParamList<T>> | undefined
       : T extends {
             screen: React.ComponentType<any>;
@@ -75,7 +76,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 StaticNavigationBase
       ? FlatType<ParamsForLinking<Linking>> & ParamsForScreen<Screen>
       : // Don't combine if `undefined`, otherwise it'll result in `never`
         undefined extends ParamsForScreen<Screen>
@@ -147,7 +148,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 +158,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)`.
@@ -332,7 +337,10 @@ type StaticConfigScreens<
     | StaticScreenConfig<
         | {
             path: string;
-            parse?: Record<string, (value: string) => any>;
+            parse?: Record<
+              string,
+              ((value: string) => any) | StandardSchemaV1<any, any>
+            >;
           }
         | string
         | undefined,
@@ -503,13 +511,17 @@ 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>;
+type StaticNavigationBase = {
   config: StaticConfig<NavigatorTypeBagBase>;
 };
 
+export type StaticNavigation<NavigatorProps, GroupProps, ScreenProps> =
+  StaticNavigationBase & {
+    Navigator: React.ComponentType<NavigatorProps>;
+    Group: React.ComponentType<GroupProps>;
+    Screen: React.ComponentType<ScreenProps>;
+  };
+
 const MemoizedScreen = React.memo(
   <T extends React.ComponentType<any>>({ component }: { component: T }) => {
     const route = useRoute();
@@ -589,10 +601,12 @@ 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 createComponentForStaticNavigation<
+  T extends StaticNavigation<any, any, any>,
+>(
+  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 +651,27 @@ export function createComponentForStaticNavigation(
     }
   }
 
-  const NavigatorComponent = () => {
+  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 };
+
+    return (
+      <Navigator {...rest} {...props} screenOptions={screenOptions}>
+        {children}
+      </Navigator>
+    );
   };
 
   NavigatorComponent.displayName = displayName;
@@ -699,7 +730,7 @@ type TreeForPathConfig = {
 export function createPathConfigForStaticNavigation(
   tree: TreeForPathConfig,
   options?: {
-    initialRouteName?: string;
+    initialRouteName?: string | undefined;
   },
   auto?: boolean
 ): PathConfigMap<ParamListBase> | undefined {
@@ -708,7 +739,7 @@ export function createPathConfigForStaticNavigation(
 
   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/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;
 

package/src/getActionFromState.tsx

@@ -10,12 +10,12 @@ import type {
 import type { NavigatorScreenParams, PathConfig, PathConfigMap } from './types';
 
 type ConfigItem = {
-  initialRouteName?: string;
-  screens?: Record<string, ConfigItem>;
+  initialRouteName?: string | undefined;
+  screens?: Record<string, ConfigItem> | undefined;
 };
 
 type Options = {
-  initialRouteName?: string;
+  initialRouteName?: string | undefined;
   screens: PathConfigMap<object>;
 };
 
@@ -23,8 +23,8 @@ type NavigateAction<State extends NavigationState> = {
   type: 'NAVIGATE';
   payload: {
     name: string;
-    params?: NavigatorScreenParams<State>;
-    path?: string;
+    params?: NavigatorScreenParams<State> | undefined;
+    path?: string | undefined;
   };
 };
 
@@ -69,8 +69,8 @@ export function getActionFromState(
     | {
         name: string;
         params: NavigatorScreenParams<ParamListBase>;
-        path?: string;
-        pop?: boolean;
+        path?: string | undefined;
+        pop?: boolean | undefined;
       }
     | undefined = route
     ? { name: route.name, path: route.path, params }

package/src/getPathFromState.tsx

@@ -6,12 +6,13 @@ import type {
 import * as queryString from 'query-string';
 
 import { getPatternParts, type PatternPart } from './getPatternParts';
+import { getStateFromRouteParams } from './getStateFromRouteParams';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
-  path?: string;
-  initialRouteName?: string;
+  path?: string | undefined;
+  initialRouteName?: string | undefined;
   screens: PathConfigMap<ParamList>;
 };
 
@@ -20,12 +21,14 @@ type State = NavigationState | Omit<PartialState<NavigationState>, 'stale'>;
 type StringifyConfig = Record<string, ((value: unknown) => string) | undefined>;
 
 type ConfigItem = {
-  parts?: PatternPart[];
-  stringify?: StringifyConfig;
-  screens?: Record<string, ConfigItem>;
+  parts?: PatternPart[] | undefined;
+  stringify?: StringifyConfig | undefined;
+  screens?: Record<string, ConfigItem> | undefined;
 };
 
-const getActiveRoute = (state: State): { name: string; params?: object } => {
+const getActiveRoute = (
+  state: State
+): { name: string; params?: object | undefined } => {
   const route =
     typeof state.index === 'number'
       ? state.routes[state.index]
@@ -57,6 +60,46 @@ const getNormalizedConfigs = (options?: Options<{}>) => {
   return normalizedConfigs;
 };
 
+const getTransformedState = (
+  state: State,
+  configs: Record<string, ConfigItem> | undefined
+): Omit<PartialState<NavigationState>, 'stale'> => {
+  const routes = state.routes.map(
+    (route): Omit<PartialState<NavigationState>, 'stale'>['routes'][number] => {
+      if (
+        route.state ||
+        (configs?.[route.name]?.screens &&
+          route.params &&
+          (('screen' in route.params &&
+            typeof route.params.screen === 'string' &&
+            configs[route.name].screens?.[route.params.screen]) ||
+            'state' in route.params))
+      ) {
+        const nestedState: State | undefined =
+          route.state ?? getStateFromRouteParams(route.params);
+
+        if (nestedState) {
+          return {
+            ...route,
+            state: getTransformedState(
+              nestedState,
+              configs?.[route.name]?.screens
+            ),
+          };
+        }
+      }
+
+      // @ts-expect-error route.state is handled in previous condition
+      return route;
+    }
+  );
+
+  return {
+    ...state,
+    routes,
+  };
+};
+
 /**
  * Utility to serialize a navigation state object to a path string.
  *
@@ -101,9 +144,10 @@ export function getPathFromState<ParamList extends {}>(
   }
 
   const configs = getNormalizedConfigs(options);
+  const transformedState = getTransformedState(state, configs);
 
   let path = '/';
-  let current: State | undefined = state;
+  let current: State | undefined = transformedState;
 
   const allParams: Record<string, string> = {};
 
@@ -118,7 +162,7 @@ export function getPathFromState<ParamList extends {}>(
     let focusedParams: Record<string, string> | undefined;
     let currentOptions = configs;
 
-    const focusedRoute = getActiveRoute(state);
+    const focusedRoute = getActiveRoute(transformedState);
 
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
     const nestedRouteNames = [];