@react-navigation/core 7.0.0-alpha.1 → 7.0.0-alpha.10

package/src/StaticNavigation.tsx

@@ -1,7 +1,7 @@
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
+import { isValidElementType } from 'react-is';
 
-import { fromEntries } from './fromEntries';
 import type {
   DefaultNavigatorOptions,
   EventMapBase,
@@ -22,7 +22,17 @@ type FlatType<T> = { [K in keyof T]: T[K] } & {};
  * keyof T doesn't work for union types. We can use distributive conditional types instead.
  * https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#distributive-conditional-types
  */
-type KeysOf<T> = T extends any ? keyof T : never;
+type KeysOf<T> = T extends {} ? keyof T : never;
+
+/**
+ * We get a union type when using keyof, but we want an intersection instead.
+ * https://stackoverflow.com/a/50375286/1665026
+ */
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
+  k: infer I
+) => void
+  ? I
+  : never;
 
 type UnknownToUndefined<T> = unknown extends T ? undefined : T;
 
@@ -31,23 +41,16 @@ type ParamsForScreenComponent<T> = T extends {
 }
   ? P
   : T extends React.ComponentType<{ route: { params: infer P } }>
-  ? P
-  : undefined;
+    ? P
+    : undefined;
 
 type ParamsForScreen<T> = T extends { screen: StaticNavigation<any, any, any> }
   ? NavigatorScreenParams<StaticParamList<T['screen']>> | undefined
   : T extends StaticNavigation<any, any, any>
-  ? NavigatorScreenParams<StaticParamList<T>> | undefined
-  : UnknownToUndefined<ParamsForScreenComponent<T>>;
+    ? NavigatorScreenParams<StaticParamList<T>> | undefined
+    : UnknownToUndefined<ParamsForScreenComponent<T>>;
 
-type ParamListForScreens<
-  Screens extends StaticConfigScreens<
-    ParamListBase,
-    NavigationState,
-    {},
-    EventMapBase
-  >
-> = {
+type ParamListForScreens<Screens> = {
   [Key in KeysOf<Screens>]: ParamsForScreen<Screens[Key]>;
 };
 
@@ -63,7 +66,7 @@ type ParamListForGroups<
           >;
         };
       }>
-    | undefined
+    | undefined,
 > = Groups extends {
   [key: string]: {
     screens: StaticConfigScreens<
@@ -74,14 +77,14 @@ type ParamListForGroups<
     >;
   };
 }
-  ? ParamListForScreens<Groups[keyof Groups]['screens']>
+  ? ParamListForScreens<UnionToIntersection<Groups[keyof Groups]['screens']>>
   : {};
 
 type StaticConfigScreens<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = {
   [key in keyof ParamList]:
     | React.ComponentType<any>
@@ -115,14 +118,7 @@ type StaticConfigScreens<
          * },
          * ```
          */
-        linking?:
-          | FlatType<
-              Pick<
-                PathConfig<ParamList>,
-                'path' | 'exact' | 'parse' | 'stringify'
-              >
-            >
-          | string;
+        linking?: PathConfig<ParamList> | string;
         /**
          * Static navigation config or Component to render for the screen.
          */
@@ -134,7 +130,7 @@ type GroupConfig<
   ParamList extends ParamListBase,
   State extends NavigationState,
   ScreenOptions extends {},
-  EventMap extends EventMapBase
+  EventMap extends EventMapBase,
 > = Omit<RouteGroupConfig<ParamList, ScreenOptions>, 'screens' | 'children'> & {
   /**
    * Callback to determine whether the screens in the group should be rendered or not.
@@ -152,7 +148,7 @@ export type StaticConfig<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-  Navigator extends React.ComponentType<{}>
+  Navigator extends React.ComponentType<{}>,
 > = Omit<
   Omit<
     React.ComponentProps<Navigator>,
@@ -201,7 +197,7 @@ export type StaticParamList<
         };
       };
     };
-  }
+  },
 > = FlatType<
   ParamListForScreens<T['config']['screens']> &
     ParamListForGroups<T['config']['groups']>
@@ -246,7 +242,7 @@ const getItemsFromScreens = (
       useIf = _if;
       props = rest;
 
-      if (typeof screen === 'function') {
+      if (isValidElementType(screen)) {
         component = screen;
       } else if ('config' in screen) {
         isNavigator = true;
@@ -255,7 +251,7 @@ const getItemsFromScreens = (
           `${name}Navigator`
         );
       }
-    } else if (typeof item === 'function') {
+    } else if (isValidElementType(item)) {
       component = item;
     } else if ('config' in item) {
       isNavigator = true;
@@ -268,7 +264,7 @@ const getItemsFromScreens = (
       );
     }
 
-    let element = isNavigator ? (
+    const element = isNavigator ? (
       React.createElement(component, {})
     ) : (
       <MemoizedScreen component={component} />
@@ -304,6 +300,12 @@ export function createComponentForStaticNavigation(
   const { Navigator, Group, Screen, config } = tree;
   const { screens, groups, ...rest } = config;
 
+  if (screens == null) {
+    throw new Error(
+      "Couldn't find a 'screens' property. Make sure to define your screens under a 'screens' property in the configuration."
+    );
+  }
+
   const items = getItemsFromScreens(Screen, screens);
 
   if (groups) {
@@ -369,7 +371,7 @@ export function createPathConfigForStaticNavigation(tree: {
     >;
   };
 }) {
-  return fromEntries(
+  return Object.fromEntries(
     Object.entries(tree.config.screens)
       .map(([key, item]) => {
         const screenConfig: PathConfig<ParamListBase> = {};

package/src/checkDuplicateRouteNames.tsx

@@ -7,7 +7,7 @@ export function checkDuplicateRouteNames(state: NavigationState) {
     location: string,
     state: NavigationState | PartialState<NavigationState>
   ) => {
-    state.routes.forEach((route: typeof state.routes[0]) => {
+    state.routes.forEach((route: (typeof state.routes)[0]) => {
       const currentLocation = location
         ? `${location} > ${route.name}`
         : route.name;

package/src/createNavigationContainerRef.tsx

@@ -10,7 +10,7 @@ export const NOT_INITIALIZED_ERROR =
   "The 'navigation' object hasn't been initialized yet. This might happen if you don't have a navigator mounted, or if the navigator hasn't finished mounting. See https://reactnavigation.org/docs/navigating-without-navigation-prop#handling-initialization for more details.";
 
 export function createNavigationContainerRef<
-  ParamList extends {} = ReactNavigation.RootParamList
+  ParamList extends {} = ReactNavigation.RootParamList,
 >(): NavigationContainerRefWithCurrent<ParamList> {
   const methods = [
     ...Object.keys(CommonActions),

package/src/createNavigatorFactory.tsx

@@ -17,7 +17,7 @@ export function createNavigatorFactory<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
-  NavigatorComponent extends React.ComponentType<any>
+  NavigatorComponent extends React.ComponentType<any>,
 >(Navigator: NavigatorComponent) {
   function createNavigator<ParamList extends ParamListBase>(): TypedNavigator<
     ParamList,
@@ -27,7 +27,6 @@ export function createNavigatorFactory<
     typeof Navigator
   >;
 
-  // eslint-disable-next-line no-redeclare
   function createNavigator<
     ParamList extends ParamListBase,
     Config extends StaticConfig<
@@ -36,7 +35,7 @@ export function createNavigatorFactory<
       ScreenOptions,
       EventMap,
       typeof Navigator
-    >
+    >,
   >(
     config: Config
   ): TypedNavigator<
@@ -47,7 +46,6 @@ export function createNavigatorFactory<
     typeof Navigator
   > & { config: Config };
 
-  // eslint-disable-next-line no-redeclare
   function createNavigator(config?: any): any {
     if (config != null) {
       return {

package/src/getActionFromState.tsx

@@ -65,7 +65,7 @@ export function getActionFromState(
   let config: ConfigItem | undefined = normalizedConfig?.screens?.[route?.name];
   let params = { ...route.params } as NavigatorScreenParams<ParamListBase>;
 
-  let payload = route
+  const payload = route
     ? { name: route.name, path: route.path, params }
     : undefined;
 

package/src/getFocusedRouteNameFromRoute.tsx

@@ -20,9 +20,9 @@ export function getFocusedRouteNameFromRoute(
             : state.routes.length - 1)
       ].name
     : // If state doesn't exist, we need to default to `screen` param if available
-    typeof params?.screen === 'string'
-    ? params.screen
-    : undefined;
+      typeof params?.screen === 'string'
+      ? params.screen
+      : undefined;
 
   return routeName;
 }

package/src/getPathFromState.tsx

@@ -5,11 +5,11 @@ import type {
 } from '@react-navigation/routers';
 import * as queryString from 'query-string';
 
-import { fromEntries } from './fromEntries';
 import type { PathConfig, PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
+  path?: string;
   initialRouteName?: string;
   screens: PathConfigMap<ParamList>;
 };
@@ -99,11 +99,11 @@ export function getPathFromState<ParamList extends {}>(
     let pattern: string | undefined;
 
     let focusedParams: Record<string, any> | undefined;
-    let focusedRoute = getActiveRoute(state);
+    const focusedRoute = getActiveRoute(state);
     let currentOptions = configs;
 
     // Keep all the route names that appeared during going deeper in config in case the pattern is resolved to undefined
-    let nestedRouteNames = [];
+    const nestedRouteNames = [];
 
     let hasNext = true;
 
@@ -115,7 +115,7 @@ export function getPathFromState<ParamList extends {}>(
       if (route.params) {
         const stringify = currentOptions[route.name]?.stringify;
 
-        const currentParams = fromEntries(
+        const currentParams = Object.fromEntries(
           Object.entries(route.params).map(([key, value]) => [
             key,
             stringify?.[key] ? stringify[key](value) : String(value),
@@ -213,7 +213,7 @@ export function getPathFromState<ParamList extends {}>(
     if (route.state) {
       path += '/';
     } else if (focusedParams) {
-      for (let param in focusedParams) {
+      for (const param in focusedParams) {
         if (focusedParams[param] === 'undefined') {
           // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
           delete focusedParams[param];
@@ -234,6 +234,11 @@ export function getPathFromState<ParamList extends {}>(
   path = path.replace(/\/+/g, '/');
   path = path.length > 1 ? path.replace(/\/$/, '') : path;
 
+  // Include the root path if specified
+  if (options?.path) {
+    path = joinPaths(options.path, path);
+  }
+
   return path;
 }
 
@@ -257,17 +262,15 @@ const createConfigItem = (
     return { pattern };
   }
 
-  // If an object is specified as the value (e.g. Foo: { ... }),
-  // It can have `path` property and `screens` prop which has nested configs
-  let pattern: string | undefined;
-
   if (config.exact && config.path === undefined) {
     throw new Error(
       "A 'path' needs to be specified when specifying 'exact: true'. If you don't want this screen in the URL, specify it as empty string, e.g. `path: ''`."
     );
   }
 
-  pattern =
+  // If an object is specified as the value (e.g. Foo: { ... }),
+  // It can have `path` property and `screens` prop which has nested configs
+  const pattern =
     config.exact !== true
       ? joinPaths(parentPattern || '', config.path || '')
       : config.path || '';
@@ -288,7 +291,7 @@ const createNormalizedConfigs = (
   options: PathConfigMap<object>,
   pattern?: string
 ): Record<string, ConfigItem> =>
-  fromEntries(
+  Object.fromEntries(
     Object.entries(options).map(([name, c]) => {
       const result = createConfigItem(c, pattern);
 

package/src/getStateFromPath.tsx

@@ -11,6 +11,7 @@ import type { PathConfigMap } from './types';
 import { validatePathConfig } from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
+  path?: string;
   initialRouteName?: string;
   screens: PathConfigMap<ParamList>;
 };
@@ -70,7 +71,7 @@ export function getStateFromPath<ParamList extends {}>(
     validatePathConfig(options);
   }
 
-  let initialRoutes: InitialRouteConfig[] = [];
+  const initialRoutes: InitialRouteConfig[] = [];
 
   if (options?.initialRouteName) {
     initialRoutes.push({
@@ -89,6 +90,21 @@ export function getStateFromPath<ParamList extends {}>(
   // Make sure there is a trailing slash
   remaining = remaining.endsWith('/') ? remaining : `${remaining}/`;
 
+  const prefix = options?.path?.replace(/^\//, ''); // Remove extra leading slash
+
+  if (prefix) {
+    // Make sure there is a trailing slash
+    const normalizedPrefix = prefix.endsWith('/') ? prefix : `${prefix}/`;
+
+    // If the path doesn't start with the prefix, it's not a match
+    if (!remaining.startsWith(normalizedPrefix)) {
+      return undefined;
+    }
+
+    // Remove the prefix from the path
+    remaining = remaining.replace(normalizedPrefix, '');
+  }
+
   if (screens === undefined) {
     // When no config is specified, use the path segments as route names
     const routes = remaining
@@ -507,7 +523,6 @@ const createNestedStateObject = (
   initialRoutes: InitialRouteConfig[],
   flatConfig?: RouteConfig[]
 ) => {
-  let state: InitialState;
   let route = routes.shift() as ParsedRoute;
   const parentScreens: string[] = [];
 
@@ -515,7 +530,11 @@ const createNestedStateObject = (
 
   parentScreens.push(route.name);
 
-  state = createStateObject(initialRoute, route, routes.length === 0);
+  const state: InitialState = createStateObject(
+    initialRoute,
+    route,
+    routes.length === 0
+  );
 
   if (routes.length > 0) {
     let nestedState = state;

package/src/index.tsx

@@ -15,12 +15,15 @@ export { NavigationRouteContext } from './NavigationRouteContext';
 export { PreventRemoveContext } from './PreventRemoveContext';
 export { PreventRemoveProvider } from './PreventRemoveProvider';
 export {
+  createComponentForStaticNavigation,
+  createPathConfigForStaticNavigation,
   type StaticNavigation,
   type StaticParamList,
   type StaticScreenProps,
-  createComponentForStaticNavigation,
-  createPathConfigForStaticNavigation,
 } from './StaticNavigation';
+export { ThemeContext } from './theming/ThemeContext';
+export { ThemeProvider } from './theming/ThemeProvider';
+export { useTheme } from './theming/useTheme';
 export * from './types';
 export { useFocusEffect } from './useFocusEffect';
 export { useIsFocused } from './useIsFocused';
@@ -29,7 +32,7 @@ export { useNavigationBuilder } from './useNavigationBuilder';
 export { useNavigationContainerRef } from './useNavigationContainerRef';
 export { useNavigationIndependentTree } from './useNavigationIndependentTree';
 export { useNavigationState } from './useNavigationState';
-export { UNSTABLE_usePreventRemove } from './usePreventRemove';
+export { usePreventRemove } from './usePreventRemove';
 export { usePreventRemoveContext } from './usePreventRemoveContext';
 export { useRoute } from './useRoute';
 export { validatePathConfig } from './validatePathConfig';

package/src/theming/ThemeContext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+
+export const ThemeContext = React.createContext<
+  ReactNavigation.Theme | undefined
+>(undefined);
+
+ThemeContext.displayName = 'ThemeContext';

package/src/theming/ThemeProvider.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { ThemeContext } from './ThemeContext';
+
+type Props = {
+  value: ReactNavigation.Theme | undefined;
+  children: React.ReactNode;
+};
+
+export function ThemeProvider({ value, children }: Props) {
+  return (
+    <ThemeContext.Provider value={value}>{children}</ThemeContext.Provider>
+  );
+}

package/src/theming/useTheme.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+
+import { ThemeContext } from './ThemeContext';
+
+export function useTheme() {
+  const theme = React.useContext(ThemeContext);
+
+  if (theme == null) {
+    throw new Error(
+      "Couldn't find a theme. Is your component inside NavigationContainer or does it have a theme?"
+    );
+  }
+
+  return theme;
+}