@react-navigation/core 7.0.0-alpha.13 → 7.0.0-alpha.15

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@react-navigation/core",
   "description": "Core utilities for building navigators",
-  "version": "7.0.0-alpha.13",
+  "version": "7.0.0-alpha.15",
   "keywords": [
     "react",
     "react-native",
@@ -70,5 +70,5 @@
       ]
     ]
   },
-  "gitHead": "d0b5489cb3eb8092d05b8d058ba5774d0538cec6"
+  "gitHead": "a601b72a5ae354900ab21f0e0293cb2c573ba8d0"
 }

package/src/Group.tsx

@@ -8,7 +8,8 @@ import type { RouteGroupConfig } from './types';
 export function Group<
   ParamList extends ParamListBase,
   ScreenOptions extends {},
->(_: RouteGroupConfig<ParamList, ScreenOptions>) {
+  Navigation,
+>(_: RouteGroupConfig<ParamList, ScreenOptions, Navigation>) {
   /* istanbul ignore next */
   return null;
 }

package/src/Screen.tsx

@@ -11,7 +11,17 @@ export function Screen<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
->(_: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>) {
+  NavigationProp,
+>(
+  _: RouteConfig<
+    ParamList,
+    RouteName,
+    State,
+    ScreenOptions,
+    EventMap,
+    NavigationProp
+  >
+) {
   /* istanbul ignore next */
   return null;
 }

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,26 +177,54 @@ 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'
 > &
   (
@@ -167,12 +232,24 @@ export type StaticConfig<
         /**
          * Screens to render in the navigator and their configuration.
          */
-        screens: StaticConfigScreens<ParamList, State, ScreenOptions, EventMap>;
+        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>;
+          [key: string]: GroupConfig<
+            ParamList,
+            State,
+            ScreenOptions,
+            EventMap,
+            NavigationList
+          >;
         };
       }
     | {
@@ -183,13 +260,20 @@ export type StaticConfig<
           ParamList,
           State,
           ScreenOptions,
-          EventMap
+          EventMap,
+          NavigationList
         >;
         /**
          * Groups of screens to render in the navigator and their configuration.
          */
         groups: {
-          [key: string]: GroupConfig<ParamList, State, ScreenOptions, EventMap>;
+          [key: string]: GroupConfig<
+            ParamList,
+            State,
+            ScreenOptions,
+            EventMap,
+            NavigationList
+          >;
         };
       }
   );
@@ -227,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(
@@ -247,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;
@@ -387,7 +465,8 @@ export function createPathConfigForStaticNavigation(tree: {
       ParamListBase,
       NavigationState,
       {},
-      EventMapBase
+      EventMapBase,
+      Record<string, unknown>
     >;
     groups?: {
       [key: string]: {
@@ -395,7 +474,8 @@ export function createPathConfigForStaticNavigation(tree: {
           ParamListBase,
           NavigationState,
           {},
-          EventMapBase
+          EventMapBase,
+          Record<string, unknown>
         >;
       };
     };
@@ -406,7 +486,8 @@ export function createPathConfigForStaticNavigation(tree: {
       ParamListBase,
       NavigationState,
       {},
-      EventMapBase
+      EventMapBase,
+      Record<string, unknown>
     >
   ) {
     return Object.fromEntries(

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

@@ -302,11 +302,13 @@ const matchAgainstConfigs = (remaining: string, configs: RouteConfig[]) => {
           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.replace(/\//, ''),
+              [index]: decodedParamSegment,
             }),
           });
 

package/src/index.tsx

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

package/src/types.tsx

@@ -24,15 +24,12 @@ type Keyof<T extends {}> = Extract<keyof T, string>;
 
 export type DefaultNavigatorOptions<
   ParamList extends ParamListBase,
+  NavigatorID extends string | undefined,
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
+  Navigation,
 > = DefaultRouterOptions<Keyof<ParamList>> & {
-  /**
-   * Optional ID for the navigator. Can be used with `navigation.getParent(id)` to refer to a parent.
-   */
-  id?: string;
-
   /**
    * Children React Elements to extract the route configuration from.
    * Only `Screen`, `Group` and `React.Fragment` are supported as children.
@@ -71,7 +68,7 @@ export type DefaultNavigatorOptions<
     | ScreenListeners<State, EventMap>
     | ((props: {
         route: RouteProp<ParamList>;
-        navigation: any;
+        navigation: Navigation;
       }) => ScreenListeners<State, EventMap>);
 
   /**
@@ -81,7 +78,7 @@ export type DefaultNavigatorOptions<
     | ScreenOptions
     | ((props: {
         route: RouteProp<ParamList>;
-        navigation: any;
+        navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
 
@@ -90,7 +87,7 @@ export type DefaultNavigatorOptions<
    */
   screenLayout?: (props: {
     route: RouteProp<ParamList, keyof ParamList>;
-    navigation: any;
+    navigation: Navigation;
     theme: ReactNavigation.Theme;
     children: React.ReactElement;
   }) => React.ReactElement;
@@ -98,10 +95,19 @@ export type DefaultNavigatorOptions<
   /**
    A function returning a state, which may be set after modifying the routes name.
    */
-  getStateForRouteNamesChange?: (
+  UNSTABLE_getStateForRouteNamesChange?: (
     state: NavigationState
   ) => PartialState<NavigationState> | undefined;
-};
+} & (NavigatorID extends string
+    ? {
+        /**
+         * Optional ID for the navigator. Can be used with `navigation.getParent(id)` to refer to a parent.
+         */
+        id: NavigatorID;
+      }
+    : {
+        id?: undefined;
+      });
 
 export type EventMapBase = Record<
   string,
@@ -602,12 +608,13 @@ export type RouteConfigComponent<
       getComponent?: never;
     };
 
-export type RouteConfig<
+export type RouteConfigProps<
   ParamList extends ParamListBase,
   RouteName extends keyof ParamList,
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
+  Navigation,
 > = {
   /**
    * Optional key for this screen. This doesn't need to be unique.
@@ -628,7 +635,7 @@ export type RouteConfig<
     | ScreenOptions
     | ((props: {
         route: RouteProp<ParamList, RouteName>;
-        navigation: any;
+        navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
 
@@ -639,7 +646,7 @@ export type RouteConfig<
     | ScreenListeners<State, EventMap>
     | ((props: {
         route: RouteProp<ParamList, RouteName>;
-        navigation: any;
+        navigation: Navigation;
       }) => ScreenListeners<State, EventMap>);
 
   /**
@@ -648,8 +655,8 @@ export type RouteConfig<
    * e.g. for styling, error boundaries, suspense, etc.
    */
   layout?: (props: {
-    route: RouteProp<ParamList, keyof ParamList>;
-    navigation: any;
+    route: RouteProp<ParamList, RouteName>;
+    navigation: Navigation;
     theme: ReactNavigation.Theme;
     children: React.ReactElement;
   }) => React.ReactElement;
@@ -670,11 +677,29 @@ export type RouteConfig<
    * Initial params object for the route.
    */
   initialParams?: Partial<ParamList[RouteName]>;
-} & RouteConfigComponent<ParamList, RouteName>;
+};
+
+export type RouteConfig<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  Navigation,
+> = RouteConfigProps<
+  ParamList,
+  RouteName,
+  State,
+  ScreenOptions,
+  EventMap,
+  Navigation
+> &
+  RouteConfigComponent<ParamList, RouteName>;
 
 export type RouteGroupConfig<
   ParamList extends ParamListBase,
   ScreenOptions extends {},
+  Navigation,
 > = {
   /**
    * Optional key for the screens in this group.
@@ -689,7 +714,7 @@ export type RouteGroupConfig<
     | ScreenOptions
     | ((props: {
         route: RouteProp<ParamList, keyof ParamList>;
-        navigation: any;
+        navigation: Navigation;
         theme: ReactNavigation.Theme;
       }) => ScreenOptions);
 
@@ -699,7 +724,7 @@ export type RouteGroupConfig<
    */
   screenLayout?: (props: {
     route: RouteProp<ParamList, keyof ParamList>;
-    navigation: any;
+    navigation: Navigation;
     theme: ReactNavigation.Theme;
     children: React.ReactElement;
   }) => React.ReactElement;
@@ -790,11 +815,77 @@ export type NavigationContainerRefWithCurrent<ParamList extends {}> =
     current: NavigationContainerRef<ParamList> | null;
   };
 
+export type NavigationListBase<ParamList extends ParamListBase> = {
+  [RouteName in keyof ParamList]: unknown;
+};
+
+export type TypeBag<
+  ParamList extends ParamListBase,
+  NavigatorID extends string | undefined,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  NavigationList extends NavigationListBase<ParamList>,
+  Navigator extends React.ComponentType<any>,
+> = {
+  ParamList: ParamList;
+  NavigatorID: NavigatorID;
+  State: State;
+  ScreenOptions: ScreenOptions;
+  EventMap: EventMap;
+  NavigationList: NavigationList;
+  Navigator: Navigator;
+};
+
+export type NavigatorTypeBagBase = {
+  ParamList: ParamListBase;
+  NavigatorID: string | undefined;
+  State: NavigationState;
+  ScreenOptions: {};
+  EventMap: EventMapBase;
+  NavigationList: NavigationListBase<ParamListBase>;
+  Navigator: React.ComponentType<any>;
+};
+
+export type NavigatorTypeBag<
+  ParamList extends ParamListBase,
+  NavigatorID extends string | undefined,
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  NavigationList extends NavigationListBase<ParamList>,
+  Navigator extends React.ComponentType<any>,
+> = {
+  ParamList: ParamList;
+  NavigatorID: NavigatorID;
+  State: State;
+  ScreenOptions: ScreenOptions;
+  EventMap: EventMap;
+  NavigationList: NavigationList;
+  Navigator: Navigator;
+};
+
 export type TypedNavigator<
+  Bag extends NavigatorTypeBagBase,
+  Config = unknown,
+> = TypedNavigatorInternal<
+  Bag['ParamList'],
+  Bag['NavigatorID'],
+  Bag['State'],
+  Bag['ScreenOptions'],
+  Bag['EventMap'],
+  Bag['NavigationList'],
+  Bag['Navigator']
+> &
+  (undefined extends Config ? {} : { config: Config });
+
+type TypedNavigatorInternal<
   ParamList extends ParamListBase,
+  NavigatorID extends string | undefined,
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
+  NavigationList extends NavigationListBase<ParamList>,
   Navigator extends React.ComponentType<any>,
 > = {
   /**
@@ -803,19 +894,35 @@ export type TypedNavigator<
   Navigator: React.ComponentType<
     Omit<
       React.ComponentProps<Navigator>,
-      keyof DefaultNavigatorOptions<any, any, any, any>
+      keyof DefaultNavigatorOptions<any, any, any, any, any, any>
     > &
-      DefaultNavigatorOptions<ParamList, State, ScreenOptions, EventMap>
+      DefaultNavigatorOptions<
+        ParamList,
+        NavigatorID,
+        State,
+        ScreenOptions,
+        EventMap,
+        NavigationList[keyof ParamList]
+      >
   >;
   /**
    * Component used for grouping multiple route configuration.
    */
-  Group: React.ComponentType<RouteGroupConfig<ParamList, ScreenOptions>>;
+  Group: React.ComponentType<
+    RouteGroupConfig<ParamList, ScreenOptions, NavigationList[keyof ParamList]>
+  >;
   /**
    * Component used for specifying route configuration.
    */
   Screen: <RouteName extends keyof ParamList>(
-    _: RouteConfig<ParamList, RouteName, State, ScreenOptions, EventMap>
+    _: RouteConfig<
+      ParamList,
+      RouteName,
+      State,
+      ScreenOptions,
+      EventMap,
+      NavigationList[RouteName]
+    >
   ) => null;
 };
 

package/src/useDescriptors.tsx

@@ -36,7 +36,14 @@ export type ScreenConfigWithParent<
   keys: (string | undefined)[];
   options: (ScreenOptionsOrCallback<ScreenOptions> | undefined)[] | undefined;
   layout: ScreenLayout | undefined;
-  props: RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>;
+  props: RouteConfig<
+    ParamListBase,
+    string,
+    State,
+    ScreenOptions,
+    EventMap,
+    unknown
+  >;
 };
 
 type ScreenLayout = (props: {

package/src/useNavigationBuilder.tsx

@@ -103,7 +103,8 @@ const getRouteConfigsFromChildren = <
             string,
             State,
             ScreenOptions,
-            EventMap
+            EventMap,
+            unknown
           >,
         });
 
@@ -252,9 +253,11 @@ export function useNavigationBuilder<
   createRouter: RouterFactory<State, any, RouterOptions>,
   options: DefaultNavigatorOptions<
     ParamListBase,
+    string | undefined,
     State,
     ScreenOptions,
-    EventMap
+    EventMap,
+    any
   > &
     RouterOptions
 ) {
@@ -471,7 +474,7 @@ export function useNavigationBuilder<
     !isRecordEqual(routeKeyList, previousRouteKeyList)
   ) {
     const navigatorStateForNextRouteNamesChange =
-      options.getStateForRouteNamesChange?.(state);
+      options.UNSTABLE_getStateForRouteNamesChange?.(state);
     // When the list of route names change, the router should handle it to remove invalid routes
     nextState = navigatorStateForNextRouteNamesChange
       ? // @ts-expect-error this is ok