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

package/src/BaseNavigationContainer.tsx

@@ -1,11 +1,11 @@
 import {
   CommonActions,
-  InitialState,
-  NavigationAction,
-  NavigationState,
-  ParamListBase,
-  PartialState,
-  Route,
+  type InitialState,
+  type NavigationAction,
+  type NavigationState,
+  type ParamListBase,
+  type PartialState,
+  type Route,
 } from '@react-navigation/routers';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
@@ -20,6 +20,7 @@ import { NavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationContainerRefContext } from './NavigationContainerRefContext';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 import { NavigationStateContext } from './NavigationStateContext';
+import { ThemeProvider } from './theming/ThemeProvider';
 import type {
   NavigationContainerEventMap,
   NavigationContainerProps,
@@ -31,7 +32,6 @@ import { useEventEmitter } from './useEventEmitter';
 import { useKeyedChildListeners } from './useKeyedChildListeners';
 import { useNavigationIndependentTree } from './useNavigationIndependentTree';
 import { useOptionsGetters } from './useOptionsGetters';
-import { ScheduleUpdateContext } from './useScheduleUpdate';
 import { useSyncState } from './useSyncState';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
@@ -77,6 +77,7 @@ const getPartialState = (
  * @param props.onReady Callback which is called after the navigation tree mounts.
  * @param props.onStateChange Callback which is called with the latest navigation state when it changes.
  * @param props.onUnhandledAction Callback which is called when an action is not handled.
+ * @param props.theme Theme object for the UI elements.
  * @param props.children Child elements to render the content.
  * @param props.ref Ref object which refers to the navigation object containing helper methods.
  */
@@ -88,6 +89,7 @@ export const BaseNavigationContainer = React.forwardRef(
       onReady,
       onUnhandledAction,
       navigationInChildEnabled = false,
+      theme,
       children,
     }: NavigationContainerProps,
     ref?: React.Ref<NavigationContainerRef<ParamListBase>>
@@ -101,10 +103,9 @@ export const BaseNavigationContainer = React.forwardRef(
       );
     }
 
-    const [state, getState, setState, scheduleUpdate, flushUpdates] =
-      useSyncState<State>(() =>
-        getPartialState(initialState == null ? undefined : initialState)
-      );
+    const [state, getState, setState] = useSyncState<State>(() =>
+      getPartialState(initialState == null ? undefined : initialState)
+    );
 
     const isFirstMountRef = React.useRef<boolean>(true);
 
@@ -203,11 +204,14 @@ export const BaseNavigationContainer = React.forwardRef(
         isFocused: () => true,
         canGoBack,
         getParent: () => undefined,
-        getState: () => stateRef.current,
+        getState,
         getRootState,
         getCurrentRoute,
         getCurrentOptions,
         isReady,
+        setOptions: () => {
+          throw new Error('Cannot call setOptions outside a screen');
+        },
       }),
       [
         canGoBack,
@@ -216,6 +220,7 @@ export const BaseNavigationContainer = React.forwardRef(
         getCurrentOptions,
         getCurrentRoute,
         getRootState,
+        getState,
         isReady,
         resetRoot,
       ]
@@ -260,11 +265,6 @@ export const BaseNavigationContainer = React.forwardRef(
       [addListener, addKeyedListener, onDispatchAction, onOptionsChange]
     );
 
-    const scheduleContext = React.useMemo(
-      () => ({ scheduleUpdate, flushUpdates }),
-      [scheduleUpdate, flushUpdates]
-    );
-
     const isInitialRef = React.useRef(true);
 
     const getIsInitial = React.useCallback(() => isInitialRef.current, []);
@@ -292,22 +292,21 @@ export const BaseNavigationContainer = React.forwardRef(
 
     const onReadyRef = React.useRef(onReady);
     const onStateChangeRef = React.useRef(onStateChange);
-    const stateRef = React.useRef(state);
 
     React.useEffect(() => {
       isInitialRef.current = false;
       onStateChangeRef.current = onStateChange;
       onReadyRef.current = onReady;
-      stateRef.current = state;
     });
 
-    const isNavigationReady = isReady();
+    const onReadyCalledRef = React.useRef(false);
 
     React.useEffect(() => {
-      if (isNavigationReady) {
+      if (!onReadyCalledRef.current && isReady()) {
+        onReadyCalledRef.current = true;
         onReadyRef.current?.();
       }
-    }, [isNavigationReady]);
+    }, [state, isReady]);
 
     React.useEffect(() => {
       const hydratedState = getRootState();
@@ -433,21 +432,21 @@ export const BaseNavigationContainer = React.forwardRef(
     return (
       <NavigationIndependentTreeContext.Provider value={false}>
         <NavigationContainerRefContext.Provider value={navigation}>
-          <ScheduleUpdateContext.Provider value={scheduleContext}>
-            <NavigationBuilderContext.Provider value={builderContext}>
-              <NavigationStateContext.Provider value={context}>
-                <UnhandledActionContext.Provider
-                  value={onUnhandledAction ?? defaultOnUnhandledAction}
+          <NavigationBuilderContext.Provider value={builderContext}>
+            <NavigationStateContext.Provider value={context}>
+              <UnhandledActionContext.Provider
+                value={onUnhandledAction ?? defaultOnUnhandledAction}
+              >
+                <DeprecatedNavigationInChildContext.Provider
+                  value={navigationInChildEnabled}
                 >
-                  <DeprecatedNavigationInChildContext.Provider
-                    value={navigationInChildEnabled}
-                  >
-                    <EnsureSingleNavigator>{children}</EnsureSingleNavigator>
-                  </DeprecatedNavigationInChildContext.Provider>
-                </UnhandledActionContext.Provider>
-              </NavigationStateContext.Provider>
-            </NavigationBuilderContext.Provider>
-          </ScheduleUpdateContext.Provider>
+                  <EnsureSingleNavigator>
+                    <ThemeProvider value={theme}>{children}</ThemeProvider>
+                  </EnsureSingleNavigator>
+                </DeprecatedNavigationInChildContext.Provider>
+              </UnhandledActionContext.Provider>
+            </NavigationStateContext.Provider>
+          </NavigationBuilderContext.Provider>
         </NavigationContainerRefContext.Provider>
       </NavigationIndependentTreeContext.Provider>
     );

package/src/Group.tsx

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

package/src/PreventRemoveProvider.tsx

@@ -4,7 +4,10 @@ import useLatestCallback from 'use-latest-callback';
 
 import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationRouteContext } from './NavigationRouteContext';
-import { PreventedRoutes, PreventRemoveContext } from './PreventRemoveContext';
+import {
+  type PreventedRoutes,
+  PreventRemoveContext,
+} from './PreventRemoveContext';
 
 type Props = {
   children: React.ReactNode;

package/src/SceneView.tsx

@@ -35,7 +35,7 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
  */
 export function SceneView<
   State extends NavigationState,
-  ScreenOptions extends {}
+  ScreenOptions extends {},
 >({
   screen,
   route,

package/src/Screen.tsx

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

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),
@@ -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);
@@ -213,7 +218,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 +239,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 +267,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 +296,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);