@react-navigation/core 7.0.0-alpha.8 → 7.0.0-rc.0

package/src/StaticNavigation.tsx

@@ -5,9 +5,12 @@ import { isValidElementType } from 'react-is';
 import type {
   DefaultNavigatorOptions,
   EventMapBase,
+  NavigationListBase,
   NavigatorScreenParams,
+  NavigatorTypeBagBase,
   PathConfig,
-  RouteConfig,
+  RouteConfigComponent,
+  RouteConfigProps,
   RouteGroupConfig,
 } from './types';
 import { useRoute } from './useRoute';
@@ -62,7 +65,8 @@ type ParamListForGroups<
             ParamListBase,
             NavigationState,
             {},
-            EventMapBase
+            EventMapBase,
+            any
           >;
         };
       }>
@@ -73,24 +77,53 @@ type ParamListForGroups<
       ParamListBase,
       NavigationState,
       {},
-      EventMapBase
+      EventMapBase,
+      any
     >;
   };
 }
   ? ParamListForScreens<UnionToIntersection<Groups[keyof Groups]['screens']>>
   : {};
 
+type StaticRouteConfig<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  Navigation,
+> = RouteConfigProps<
+  // FIXME: the param list is inferred from the screen component
+  // So we can't use the type here
+  // Fallback to ParamListBase for now
+  ParamListBase,
+  string,
+  State,
+  ScreenOptions,
+  EventMap,
+  Navigation
+> &
+  RouteConfigComponent<ParamList, RouteName>;
+
 type StaticConfigScreens<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
+  NavigationList extends NavigationListBase<ParamList>,
 > = {
-  [key in keyof ParamList]:
+  [RouteName in keyof ParamList]:
     | React.ComponentType<any>
     | StaticNavigation<any, any, any>
     | (Omit<
-        RouteConfig<ParamList, keyof ParamList, State, ScreenOptions, EventMap>,
+        StaticRouteConfig<
+          ParamList,
+          RouteName,
+          State,
+          ScreenOptions,
+          EventMap,
+          NavigationList[RouteName]
+        >,
         'name' | 'component' | 'getComponent' | 'children'
       > & {
         /**
@@ -131,7 +164,11 @@ type GroupConfig<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-> = Omit<RouteGroupConfig<ParamList, ScreenOptions>, 'screens' | 'children'> & {
+  NavigationList extends NavigationListBase<ParamList>,
+> = Omit<
+  RouteGroupConfig<ParamList, ScreenOptions, NavigationList[keyof ParamList]>,
+  'screens' | 'children'
+> & {
   /**
    * Callback to determine whether the screens in the group should be rendered or not.
    * This can be useful for conditional rendering of group of screens.
@@ -140,39 +177,106 @@ type GroupConfig<
   /**
    * Static navigation config or Component to render for the screen.
    */
-  screens: StaticConfigScreens<ParamList, State, ScreenOptions, EventMap>;
+  screens: StaticConfigScreens<
+    ParamList,
+    State,
+    ScreenOptions,
+    EventMap,
+    NavigationList
+  >;
 };
 
-export type StaticConfig<
+export type StaticConfig<Bag extends NavigatorTypeBagBase> =
+  StaticConfigInternal<
+    Bag['ParamList'],
+    Bag['NavigatorID'],
+    Bag['State'],
+    Bag['ScreenOptions'],
+    Bag['EventMap'],
+    Bag['NavigationList'],
+    Bag['Navigator']
+  >;
+
+type StaticConfigInternal<
   ParamList extends ParamListBase,
+  NavigatorID extends string | undefined,
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-  Navigator extends React.ComponentType<{}>,
+  NavigationList extends NavigationListBase<ParamList>,
+  Navigator extends React.ComponentType<any>,
 > = Omit<
   Omit<
     React.ComponentProps<Navigator>,
     keyof DefaultNavigatorOptions<
       ParamListBase,
+      string | undefined,
       NavigationState,
       {},
-      EventMapBase
+      EventMapBase,
+      NavigationList[keyof ParamList]
     >
   > &
-    DefaultNavigatorOptions<ParamList, State, ScreenOptions, EventMap>,
+    DefaultNavigatorOptions<
+      ParamList,
+      NavigatorID,
+      State,
+      ScreenOptions,
+      EventMap,
+      NavigationList[keyof ParamList]
+    >,
   'screens' | 'children'
-> & {
-  /**
-   * Screens to render in the navigator and their configuration.
-   */
-  screens: StaticConfigScreens<ParamList, State, ScreenOptions, EventMap>;
-  /**
-   * Groups of screens to render in the navigator and their configuration.
-   */
-  groups?: {
-    [key: string]: GroupConfig<ParamList, State, ScreenOptions, EventMap>;
-  };
-};
+> &
+  (
+    | {
+        /**
+         * Screens to render in the navigator and their configuration.
+         */
+        screens: StaticConfigScreens<
+          ParamList,
+          State,
+          ScreenOptions,
+          EventMap,
+          NavigationList
+        >;
+        /**
+         * Groups of screens to render in the navigator and their configuration.
+         */
+        groups?: {
+          [key: string]: GroupConfig<
+            ParamList,
+            State,
+            ScreenOptions,
+            EventMap,
+            NavigationList
+          >;
+        };
+      }
+    | {
+        /**
+         * Screens to render in the navigator and their configuration.
+         */
+        screens?: StaticConfigScreens<
+          ParamList,
+          State,
+          ScreenOptions,
+          EventMap,
+          NavigationList
+        >;
+        /**
+         * Groups of screens to render in the navigator and their configuration.
+         */
+        groups: {
+          [key: string]: GroupConfig<
+            ParamList,
+            State,
+            ScreenOptions,
+            EventMap,
+            NavigationList
+          >;
+        };
+      }
+  );
 
 /**
  * Props for a screen component which is rendered by a static navigator.
@@ -190,7 +294,7 @@ export type StaticScreenProps<T extends Record<string, unknown> | undefined> = {
 export type StaticParamList<
   T extends {
     readonly config: {
-      readonly screens: Record<string, any>;
+      readonly screens?: Record<string, any>;
       readonly groups?: {
         [key: string]: {
           screens: Record<string, any>;
@@ -207,13 +311,7 @@ export type StaticNavigation<NavigatorProps, GroupProps, ScreenProps> = {
   Navigator: React.ComponentType<NavigatorProps>;
   Group: React.ComponentType<GroupProps>;
   Screen: React.ComponentType<ScreenProps>;
-  config: StaticConfig<
-    ParamListBase,
-    NavigationState,
-    {},
-    EventMapBase,
-    React.ComponentType<any>
-  >;
+  config: StaticConfig<NavigatorTypeBagBase>;
 };
 
 const MemoizedScreen = React.memo(
@@ -227,7 +325,7 @@ const MemoizedScreen = React.memo(
 
 const getItemsFromScreens = (
   Screen: React.ComponentType<any>,
-  screens: StaticConfigScreens<any, any, any, any>
+  screens: StaticConfigScreens<any, any, any, any, any>
 ) => {
   return Object.entries(screens).map(([name, item]) => {
     let component: React.ComponentType<any> | undefined;
@@ -300,13 +398,13 @@ export function createComponentForStaticNavigation(
   const { Navigator, Group, Screen, config } = tree;
   const { screens, groups, ...rest } = config;
 
-  if (screens == null) {
+  if (screens == null && groups == null) {
     throw new Error(
-      "Couldn't find a 'screens' property. Make sure to define your screens under a 'screens' property in the configuration."
+      "Couldn't find a 'screens' or 'groups' property. Make sure to define your screens under a 'screens' property in the configuration."
     );
   }
 
-  const items = getItemsFromScreens(Screen, screens);
+  const items = screens ? getItemsFromScreens(Screen, screens) : [];
 
   if (groups) {
     items.push(
@@ -344,10 +442,36 @@ export function createComponentForStaticNavigation(
   return NavigatorComponent;
 }
 
+type TreeForPathConfig = {
+  config: {
+    initialRouteName?: string;
+    screens?: StaticConfigScreens<
+      ParamListBase,
+      NavigationState,
+      {},
+      EventMapBase,
+      Record<string, unknown>
+    >;
+    groups?: {
+      [key: string]: {
+        screens: StaticConfigScreens<
+          ParamListBase,
+          NavigationState,
+          {},
+          EventMapBase,
+          Record<string, unknown>
+        >;
+      };
+    };
+  };
+};
+
 /**
  * Create a path config object from a static navigation config for deep linking.
  *
  * @param tree Static navigation config.
+ * @param options Additional options from `linking.config`.
+ * @param auto Whether to automatically generate paths for leaf screens.
  * @returns Path config object to use in linking config.
  *
  * @example
@@ -361,43 +485,146 @@ export function createComponentForStaticNavigation(
  * };
  * ```
  */
-export function createPathConfigForStaticNavigation(tree: {
-  config: {
-    screens: StaticConfigScreens<
-      ParamListBase,
-      NavigationState,
-      {},
-      EventMapBase
-    >;
+export function createPathConfigForStaticNavigation(
+  tree: TreeForPathConfig,
+  options?: {
+    initialRouteName?: string;
+  },
+  auto?: boolean
+) {
+  let initialScreenConfig: PathConfig<ParamListBase> | undefined;
+
+  const createPathConfigForTree = (
+    t: TreeForPathConfig,
+    o: { initialRouteName?: string } | undefined,
+    // If a screen is a leaf node, but inside a screen with path,
+    // It should not be used for initial detection
+    skipInitialDetection: boolean
+  ) => {
+    const createPathConfigForScreens = (
+      screens: StaticConfigScreens<
+        ParamListBase,
+        NavigationState,
+        {},
+        EventMapBase,
+        Record<string, unknown>
+      >,
+      initialRouteName: string | undefined
+    ) => {
+      return Object.fromEntries(
+        Object.entries(screens)
+          // Re-order to move the initial route to the front
+          // This way we can detect the initial route correctly
+          .sort(([a], [b]) => {
+            if (a === initialRouteName) {
+              return -1;
+            }
+
+            if (b === initialRouteName) {
+              return 1;
+            }
+
+            return 0;
+          })
+          .map(([key, item]) => {
+            const screenConfig: PathConfig<ParamListBase> = {};
+
+            if ('linking' in item) {
+              if (typeof item.linking === 'string') {
+                screenConfig.path = item.linking;
+              } else {
+                Object.assign(screenConfig, item.linking);
+              }
+            }
+
+            let screens;
+
+            if ('config' in item) {
+              screens = createPathConfigForTree(
+                item,
+                undefined,
+                skipInitialDetection || screenConfig.path != null
+              );
+            } else if (
+              'screen' in item &&
+              'config' in item.screen &&
+              (item.screen.config.screens || item.screen.config.groups)
+            ) {
+              screens = createPathConfigForTree(
+                item.screen,
+                undefined,
+                skipInitialDetection || screenConfig.path != null
+              );
+            }
+
+            if (screens) {
+              screenConfig.screens = screens;
+            }
+
+            if (auto && !screenConfig.screens && !('linking' in item)) {
+              if (screenConfig.path) {
+                if (!skipInitialDetection) {
+                  // Normalize the path to remove leading and trailing slashes
+                  const path = screenConfig.path
+                    ?.split('/')
+                    .filter(Boolean)
+                    .join('/');
+
+                  // We encounter a leaf screen with empty path,
+                  // Clear the initial screen config as it's not needed anymore
+                  if (!skipInitialDetection && path === '') {
+                    initialScreenConfig = undefined;
+                  }
+                }
+              } else {
+                if (!skipInitialDetection && initialScreenConfig == null) {
+                  initialScreenConfig = screenConfig;
+                }
+
+                screenConfig.path = key
+                  .replace(/([A-Z]+)/g, '-$1')
+                  .replace(/^-/, '')
+                  .toLowerCase();
+              }
+            }
+
+            return [key, screenConfig] as const;
+          })
+          .filter(([, screen]) => Object.keys(screen).length > 0)
+      );
+    };
+
+    const screens = t.config.screens
+      ? createPathConfigForScreens(
+          t.config.screens,
+          o?.initialRouteName ?? t.config.initialRouteName
+        )
+      : {};
+
+    if (t.config.groups) {
+      Object.entries(t.config.groups).forEach(([, group]) => {
+        Object.assign(
+          screens,
+          createPathConfigForScreens(
+            group.screens,
+            o?.initialRouteName ?? t.config.initialRouteName
+          )
+        );
+      });
+    }
+
+    if (Object.keys(screens).length === 0) {
+      return undefined;
+    }
+
+    return screens;
   };
-}) {
-  return Object.fromEntries(
-    Object.entries(tree.config.screens)
-      .map(([key, item]) => {
-        const screenConfig: PathConfig<ParamListBase> = {};
-
-        if ('linking' in item) {
-          if (typeof item.linking === 'string') {
-            screenConfig.path = item.linking;
-          } else {
-            Object.assign(screenConfig, item.linking);
-          }
-        }
-
-        if ('config' in item) {
-          screenConfig.screens = createPathConfigForStaticNavigation(item);
-        } else if (
-          'screen' in item &&
-          'config' in item.screen &&
-          item.screen.config.screens
-        ) {
-          screenConfig.screens = createPathConfigForStaticNavigation(
-            item.screen
-          );
-        }
 
-        return [key, screenConfig] as const;
-      })
-      .filter(([, screen]) => Object.keys(screen).length > 0)
-  );
+  const screens = createPathConfigForTree(tree, options, false);
+
+  if (auto && initialScreenConfig) {
+    initialScreenConfig.path = '';
+  }
+
+  return screens;
 }

package/src/createNavigatorFactory.tsx

@@ -1,10 +1,7 @@
-import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import type * as React from 'react';
 
 import { Group } from './Group';
 import { Screen } from './Screen';
-import type { StaticConfig } from './StaticNavigation';
-import type { EventMapBase, TypedNavigator } from './types';
 
 /**
  * Higher order component to create a `Navigator` and `Screen` pair.
@@ -13,39 +10,7 @@ import type { EventMapBase, TypedNavigator } from './types';
  * @param Navigator The navigator component to wrap.
  * @returns Factory method to create a `Navigator` and `Screen` pair.
  */
-export function createNavigatorFactory<
-  State extends NavigationState,
-  ScreenOptions extends {},
-  EventMap extends EventMapBase,
-  NavigatorComponent extends React.ComponentType<any>,
->(Navigator: NavigatorComponent) {
-  function createNavigator<ParamList extends ParamListBase>(): TypedNavigator<
-    ParamList,
-    State,
-    ScreenOptions,
-    EventMap,
-    typeof Navigator
-  >;
-
-  function createNavigator<
-    ParamList extends ParamListBase,
-    Config extends StaticConfig<
-      ParamList,
-      State,
-      ScreenOptions,
-      EventMap,
-      typeof Navigator
-    >,
-  >(
-    config: Config
-  ): TypedNavigator<
-    ParamList,
-    State,
-    ScreenOptions,
-    EventMap,
-    typeof Navigator
-  > & { config: Config };
-
+export function createNavigatorFactory(Navigator: React.ComponentType<any>) {
   function createNavigator(config?: any): any {
     if (config != null) {
       return {

package/src/deepFreeze.tsx

@@ -0,0 +1,34 @@
+export const isPlainObject = (value: unknown): value is object => {
+  if (typeof value === 'object' && value !== null) {
+    return Object.getPrototypeOf(value) === Object.prototype;
+  }
+
+  return false;
+};
+
+export const deepFreeze = <T,>(object: T): Readonly<T> => {
+  // We only freeze in development to catch issues early
+  // Don't freeze in production to avoid unnecessary performance overhead
+  if (process.env.NODE_ENV === 'production') {
+    return object;
+  }
+
+  if (Object.isFrozen(object)) {
+    return object;
+  }
+
+  if (!isPlainObject(object) && !Array.isArray(object)) {
+    return object;
+  }
+
+  // Freeze properties before freezing self
+  for (const key in object) {
+    if (Object.getOwnPropertyDescriptor(object, key)?.configurable) {
+      const value = object[key];
+
+      deepFreeze(value);
+    }
+  }
+
+  return Object.freeze(object);
+};

package/src/getPathFromState.tsx

@@ -196,7 +196,12 @@ export function getPathFromState<ParamList extends {}>(
               return '';
             }
 
-            return encodeURIComponent(value);
+            // Valid characters according to
+            // https://datatracker.ietf.org/doc/html/rfc3986#section-3.3 (see pchar definition)
+            return String(value).replace(
+              /[^A-Za-z0-9\-._~!$&'()*+,;=:@]/g,
+              (char) => encodeURIComponent(char)
+            );
           }
 
           return encodeURIComponent(p);

package/src/getStateFromPath.tsx

@@ -287,29 +287,73 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
 
     // If our regex matches, we need to extract params from the path
     if (match) {
-      const matchedParams = config.pattern
-        ?.split('/')
-        .filter((p) => p.startsWith(':'))
-        .reduce<Record<string, any>>(
-          (acc, p, i) =>
-            Object.assign(acc, {
-              // The param segments appear every second item starting from 2 in the regex match result
-              [p]: match![(i + 1) * 2].replace(/\//, ''),
+      const matchResult = config.pattern?.split('/').reduce<{
+        pos: number; // Position of the current path param segment in the path (e.g in pattern `a/:b/:c`, `:a` is 0 and `:b` is 1)
+        matchedParams: Record<string, Record<string, string>>; // The extracted params
+      }>(
+        (acc, p, index) => {
+          if (!p.startsWith(':')) {
+            return acc;
+          }
+
+          // Path parameter so increment position for the segment
+          acc.pos += 1;
+
+          const decodedParamSegment = decodeURIComponent(
+            // The param segments appear every second item starting from 2 in the regex match result
+            match![(acc.pos + 1) * 2]
+              // Remove trailing slash
+              .replace(/\/$/, '')
+          );
+
+          Object.assign(acc.matchedParams, {
+            [p]: Object.assign(acc.matchedParams[p] || {}, {
+              [index]: decodedParamSegment,
             }),
-          {}
-        );
+          });
+
+          return acc;
+        },
+        { pos: -1, matchedParams: {} }
+      );
+
+      const matchedParams = matchResult.matchedParams || {};
 
       routes = config.routeNames.map((name) => {
-        const config = configs.find((c) => c.screen === name);
-        const params = config?.path
+        const routeConfig = configs.find((c) => {
+          // Check matching name AND pattern in case same screen is used at different levels in config
+          return c.screen === name && config.pattern.startsWith(c.pattern);
+        });
+
+        // Normalize pattern to remove any leading, trailing slashes, duplicate slashes etc.
+        const normalizedPath = routeConfig?.path
+          .split('/')
+          .filter(Boolean)
+          .join('/');
+
+        // Get the number of segments in the initial pattern
+        const numInitialSegments = routeConfig?.pattern
+          // Extract the prefix from the pattern by removing the ending path pattern (e.g pattern=`a/b/c/d` and normalizedPath=`c/d` becomes `a/b`)
+          .replace(new RegExp(`${escape(normalizedPath!)}$`), '')
+          ?.split('/').length;
+
+        const params = normalizedPath
           ?.split('/')
-          .filter((p) => p.startsWith(':'))
-          .reduce<Record<string, any>>((acc, p) => {
-            const value = matchedParams[p];
+          .reduce<Record<string, unknown>>((acc, p, index) => {
+            if (!p.startsWith(':')) {
+              return acc;
+            }
+
+            // Get the real index of the path parameter in the matched path
+            // by offsetting by the number of segments in the initial pattern
+            const offset = numInitialSegments ? numInitialSegments - 1 : 0;
+            const value = matchedParams[p]?.[index + offset];
 
             if (value) {
               const key = p.replace(/^:/, '').replace(/\?$/, '');
-              acc[key] = config.parse?.[key] ? config.parse[key](value) : value;
+              acc[key] = routeConfig?.parse?.[key]
+                ? routeConfig.parse[key](value)
+                : value;
             }
 
             return acc;

package/src/index.tsx

@@ -17,6 +17,7 @@ export { PreventRemoveProvider } from './PreventRemoveProvider';
 export {
   createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
+  type StaticConfig,
   type StaticNavigation,
   type StaticParamList,
   type StaticScreenProps,