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

package/src/checkDuplicateRouteNames.tsx

@@ -1,13 +1,13 @@
 import type { NavigationState, PartialState } from '@react-navigation/routers';
 
-export default function checkDuplicateRouteNames(state: NavigationState) {
+export function checkDuplicateRouteNames(state: NavigationState) {
   const duplicates: string[][] = [];
 
   const getRouteNames = (
     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/checkSerializable.tsx

@@ -69,6 +69,6 @@ const checkSerializableWithoutCircularReference = (
   return { serializable: true };
 };
 
-export default function checkSerializable(o: { [key: string]: any }) {
+export function checkSerializable(o: { [key: string]: any }) {
   return checkSerializableWithoutCircularReference(o, new Set<any>(), []);
 }

package/src/createNavigationContainerRef.tsx

@@ -9,8 +9,8 @@ import type {
 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 default function createNavigationContainerRef<
-  ParamList extends {} = ReactNavigation.RootParamList
+export function createNavigationContainerRef<
+  ParamList extends {} = ReactNavigation.RootParamList,
 >(): NavigationContainerRefWithCurrent<ParamList> {
   const methods = [
     ...Object.keys(CommonActions),

package/src/createNavigatorFactory.tsx

@@ -1,8 +1,8 @@
 import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import type * as React from 'react';
 
-import Group from './Group';
-import Screen from './Screen';
+import { Group } from './Group';
+import { Screen } from './Screen';
 import type { StaticConfig } from './StaticNavigation';
 import type { EventMapBase, TypedNavigator } from './types';
 
@@ -13,11 +13,11 @@ import type { EventMapBase, TypedNavigator } from './types';
  * @param Navigator The navigator component to wrap.
  * @returns Factory method to create a `Navigator` and `Screen` pair.
  */
-export default function createNavigatorFactory<
+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 default function createNavigatorFactory<
     typeof Navigator
   >;
 
-  // eslint-disable-next-line no-redeclare
   function createNavigator<
     ParamList extends ParamListBase,
     Config extends StaticConfig<
@@ -36,7 +35,7 @@ export default function createNavigatorFactory<
       ScreenOptions,
       EventMap,
       typeof Navigator
-    >
+    >,
   >(
     config: Config
   ): TypedNavigator<
@@ -47,7 +46,6 @@ export default function createNavigatorFactory<
     typeof Navigator
   > & { config: Config };
 
-  // eslint-disable-next-line no-redeclare
   function createNavigator(config?: any): any {
     if (config != null) {
       return {

package/src/findFocusedRoute.tsx

@@ -1,6 +1,6 @@
 import type { InitialState } from '@react-navigation/routers';
 
-export default function findFocusedRoute(state: InitialState) {
+export function findFocusedRoute(state: InitialState) {
   let current: InitialState | undefined = state;
 
   while (current?.routes[current.index ?? 0].state != null) {

package/src/getActionFromState.tsx

@@ -28,7 +28,7 @@ type NavigateAction<State extends NavigationState> = {
   };
 };
 
-export default function getActionFromState(
+export function getActionFromState(
   state: PartialState<NavigationState>,
   options?: Options
 ): NavigateAction<NavigationState> | CommonActions.Action | undefined {
@@ -65,7 +65,7 @@ export default 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

@@ -2,7 +2,7 @@ import type { Route } from '@react-navigation/routers';
 
 import { CHILD_STATE } from './useRouteCache';
 
-export default function getFocusedRouteNameFromRoute(
+export function getFocusedRouteNameFromRoute(
   route: Partial<Route<string>>
 ): string | undefined {
   // @ts-expect-error: this isn't in type definitions coz we want this private
@@ -20,9 +20,9 @@ export default 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';
+import { validatePathConfig } from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
+  path?: string;
   initialRouteName?: string;
   screens: PathConfigMap<ParamList>;
 };
@@ -66,7 +66,7 @@ const getActiveRoute = (state: State): { name: string; params?: object } => {
  * @param options Extra options to fine-tune how to serialize the path.
  * @returns Path representing the state, e.g. /foo/bar?count=42.
  */
-export default function getPathFromState<ParamList extends {}>(
+export function getPathFromState<ParamList extends {}>(
   state: State,
   options?: Options<ParamList>
 ): string {
@@ -99,11 +99,11 @@ export default 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 default 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 default 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 default 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

@@ -6,11 +6,12 @@ import type {
 import escape from 'escape-string-regexp';
 import * as queryString from 'query-string';
 
-import findFocusedRoute from './findFocusedRoute';
+import { findFocusedRoute } from './findFocusedRoute';
 import type { PathConfigMap } from './types';
-import validatePathConfig from './validatePathConfig';
+import { validatePathConfig } from './validatePathConfig';
 
 type Options<ParamList extends {}> = {
+  path?: string;
   initialRouteName?: string;
   screens: PathConfigMap<ParamList>;
 };
@@ -62,7 +63,7 @@ type ParsedRoute = {
  * @param path Path string to parse and convert, e.g. /foo/bar?count=42.
  * @param options Extra options to fine-tune how to parse the path.
  */
-export default function getStateFromPath<ParamList extends {}>(
+export function getStateFromPath<ParamList extends {}>(
   path: string,
   options?: Options<ParamList>
 ): ResultState | undefined {
@@ -70,7 +71,7 @@ export default function getStateFromPath<ParamList extends {}>(
     validatePathConfig(options);
   }
 
-  let initialRoutes: InitialRouteConfig[] = [];
+  const initialRoutes: InitialRouteConfig[] = [];
 
   if (options?.initialRouteName) {
     initialRoutes.push({
@@ -89,6 +90,21 @@ export default 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

@@ -1,36 +1,39 @@
-export { default as BaseNavigationContainer } from './BaseNavigationContainer';
-export { default as createNavigationContainerRef } from './createNavigationContainerRef';
-export { default as createNavigatorFactory } from './createNavigatorFactory';
-export { default as CurrentRenderContext } from './CurrentRenderContext';
-export { default as findFocusedRoute } from './findFocusedRoute';
-export { default as getActionFromState } from './getActionFromState';
-export { default as getFocusedRouteNameFromRoute } from './getFocusedRouteNameFromRoute';
-export { default as getPathFromState } from './getPathFromState';
-export { default as getStateFromPath } from './getStateFromPath';
-export { default as NavigationContainerRefContext } from './NavigationContainerRefContext';
-export { default as NavigationContext } from './NavigationContext';
-export { default as NavigationHelpersContext } from './NavigationHelpersContext';
-export { default as NavigationIndependentTree } from './NavigationIndependentTree';
-export { default as NavigationRouteContext } from './NavigationRouteContext';
-export { default as PreventRemoveContext } from './PreventRemoveContext';
-export { default as PreventRemoveProvider } from './PreventRemoveProvider';
+export { BaseNavigationContainer } from './BaseNavigationContainer';
+export { createNavigationContainerRef } from './createNavigationContainerRef';
+export { createNavigatorFactory } from './createNavigatorFactory';
+export { CurrentRenderContext } from './CurrentRenderContext';
+export { findFocusedRoute } from './findFocusedRoute';
+export { getActionFromState } from './getActionFromState';
+export { getFocusedRouteNameFromRoute } from './getFocusedRouteNameFromRoute';
+export { getPathFromState } from './getPathFromState';
+export { getStateFromPath } from './getStateFromPath';
+export { NavigationContainerRefContext } from './NavigationContainerRefContext';
+export { NavigationContext } from './NavigationContext';
+export { NavigationHelpersContext } from './NavigationHelpersContext';
+export { NavigationIndependentTree } from './NavigationIndependentTree';
+export { NavigationRouteContext } from './NavigationRouteContext';
+export { PreventRemoveContext } from './PreventRemoveContext';
+export { PreventRemoveProvider } from './PreventRemoveProvider';
 export {
   createComponentForStaticNavigation,
   createPathConfigForStaticNavigation,
-  StaticNavigation,
-  StaticParamList,
-  StaticScreenProps,
+  type StaticNavigation,
+  type StaticParamList,
+  type StaticScreenProps,
 } from './StaticNavigation';
+export { ThemeContext } from './theming/ThemeContext';
+export { ThemeProvider } from './theming/ThemeProvider';
+export { useTheme } from './theming/useTheme';
 export * from './types';
-export { default as useFocusEffect } from './useFocusEffect';
-export { default as useIsFocused } from './useIsFocused';
-export { default as useNavigation } from './useNavigation';
-export { default as useNavigationBuilder } from './useNavigationBuilder';
-export { default as useNavigationContainerRef } from './useNavigationContainerRef';
-export { default as useNavigationIndependentTree } from './useNavigationIndependentTree';
-export { default as useNavigationState } from './useNavigationState';
-export { default as UNSTABLE_usePreventRemove } from './usePreventRemove';
-export { default as usePreventRemoveContext } from './usePreventRemoveContext';
-export { default as useRoute } from './useRoute';
-export { default as validatePathConfig } from './validatePathConfig';
+export { useFocusEffect } from './useFocusEffect';
+export { useIsFocused } from './useIsFocused';
+export { useNavigation } from './useNavigation';
+export { useNavigationBuilder } from './useNavigationBuilder';
+export { useNavigationContainerRef } from './useNavigationContainerRef';
+export { useNavigationIndependentTree } from './useNavigationIndependentTree';
+export { useNavigationState } from './useNavigationState';
+export { usePreventRemove } from './usePreventRemove';
+export { usePreventRemoveContext } from './usePreventRemoveContext';
+export { useRoute } from './useRoute';
+export { validatePathConfig } from './validatePathConfig';
 export * from '@react-navigation/routers';

package/src/isArrayEqual.tsx

@@ -2,7 +2,7 @@
  * Compare two arrays with primitive values as the content.
  * We need to make sure that both values and order match.
  */
-export default function isArrayEqual(a: any[], b: any[]) {
+export function isArrayEqual(a: any[], b: any[]) {
   if (a === b) {
     return true;
   }

package/src/isRecordEqual.tsx

@@ -1,10 +1,7 @@
 /**
  * Compare two records with primitive values as the content.
  */
-export default function isRecordEqual(
-  a: Record<string, any>,
-  b: Record<string, any>
-) {
+export function isRecordEqual(a: Record<string, any>, b: Record<string, any>) {
   if (a === b) {
     return true;
   }

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;
+}