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

package/src/BaseNavigationContainer.tsx

@@ -1,38 +1,38 @@
 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';
 
-import checkDuplicateRouteNames from './checkDuplicateRouteNames';
-import checkSerializable from './checkSerializable';
+import { checkDuplicateRouteNames } from './checkDuplicateRouteNames';
+import { checkSerializable } from './checkSerializable';
 import { NOT_INITIALIZED_ERROR } from './createNavigationContainerRef';
-import DeprecatedNavigationInChildContext from './DeprecatedNavigationInChildContext';
-import EnsureSingleNavigator from './EnsureSingleNavigator';
-import findFocusedRoute from './findFocusedRoute';
-import NavigationBuilderContext from './NavigationBuilderContext';
-import NavigationContainerRefContext from './NavigationContainerRefContext';
-import NavigationIndependentTreeContext from './NavigationIndependentTreeContext';
-import NavigationStateContext from './NavigationStateContext';
+import { DeprecatedNavigationInChildContext } from './DeprecatedNavigationInChildContext';
+import { EnsureSingleNavigator } from './EnsureSingleNavigator';
+import { findFocusedRoute } from './findFocusedRoute';
+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,
   NavigationContainerRef,
 } from './types';
-import UnhandledActionContext from './UnhandledActionContext';
-import useChildListeners from './useChildListeners';
-import useEventEmitter from './useEventEmitter';
-import useKeyedChildListeners from './useKeyedChildListeners';
-import useNavigationIndependentTree from './useNavigationIndependentTree';
-import useOptionsGetters from './useOptionsGetters';
-import { ScheduleUpdateContext } from './useScheduleUpdate';
-import useSyncState from './useSyncState';
+import { UnhandledActionContext } from './UnhandledActionContext';
+import { useChildListeners } from './useChildListeners';
+import { useEventEmitter } from './useEventEmitter';
+import { useKeyedChildListeners } from './useKeyedChildListeners';
+import { useNavigationIndependentTree } from './useNavigationIndependentTree';
+import { useOptionsGetters } from './useOptionsGetters';
+import { useSyncState } from './useSyncState';
 
 type State = NavigationState | PartialState<NavigationState> | undefined;
 
@@ -77,10 +77,11 @@ 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.
  */
-const BaseNavigationContainer = React.forwardRef(
+export const BaseNavigationContainer = React.forwardRef(
   function BaseNavigationContainer(
     {
       initialState,
@@ -88,6 +89,7 @@ const BaseNavigationContainer = React.forwardRef(
       onReady,
       onUnhandledAction,
       navigationInChildEnabled = false,
+      theme,
       children,
     }: NavigationContainerProps,
     ref?: React.Ref<NavigationContainerRef<ParamListBase>>
@@ -101,10 +103,9 @@ 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 @@ 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 @@ const BaseNavigationContainer = React.forwardRef(
         getCurrentOptions,
         getCurrentRoute,
         getRootState,
+        getState,
         isReady,
         resetRoot,
       ]
@@ -260,11 +265,6 @@ 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 @@ 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,25 +432,23 @@ 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>
     );
   }
 );
-
-export default BaseNavigationContainer;

package/src/CurrentRenderContext.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
  * Context which holds the values for the current navigation tree.
  * Intended for use in SSR. This is not safe to use on the client.
  */
-const CurrentRenderContext = React.createContext<
+export const CurrentRenderContext = React.createContext<
   { options?: object } | undefined
 >(undefined);
-
-export default CurrentRenderContext;

package/src/DeprecatedNavigationInChildContext.tsx

@@ -3,6 +3,4 @@ import * as React from 'react';
 /**
  * Context which enables deprecated bubbling to child navigators.
  */
-const DeprecatedNavigationInChildContext = React.createContext(false);
-
-export default DeprecatedNavigationInChildContext;
+export const DeprecatedNavigationInChildContext = React.createContext(false);

package/src/EnsureSingleNavigator.tsx

@@ -17,7 +17,7 @@ export const SingleNavigatorContext = React.createContext<
 /**
  * Component which ensures that there's only one navigator nested under it.
  */
-export default function EnsureSingleNavigator({ children }: Props) {
+export function EnsureSingleNavigator({ children }: Props) {
   const navigatorKeyRef = React.useRef<string | undefined>();
 
   const value = React.useMemo(

package/src/Group.tsx

@@ -5,9 +5,9 @@ import type { RouteGroupConfig } from './types';
 /**
  * Empty component used for grouping screen configs.
  */
-export default function Group<
+export function Group<
   ParamList extends ParamListBase,
-  ScreenOptions extends {}
+  ScreenOptions extends {},
 >(_: RouteGroupConfig<ParamList, ScreenOptions>) {
   /* istanbul ignore next */
   return null;

package/src/NavigationBuilderContext.tsx

@@ -51,7 +51,7 @@ export type ChildBeforeRemoveListener = (action: NavigationAction) => boolean;
 /**
  * Context which holds the required helpers needed to build nested navigators.
  */
-const NavigationBuilderContext = React.createContext<{
+export const NavigationBuilderContext = React.createContext<{
   onAction?: (
     action: NavigationAction,
     visitedNavigators?: Set<string>
@@ -66,5 +66,3 @@ const NavigationBuilderContext = React.createContext<{
   onDispatchAction: () => undefined,
   onOptionsChange: () => undefined,
 });
-
-export default NavigationBuilderContext;

package/src/NavigationContainerRefContext.tsx

@@ -6,8 +6,6 @@ import type { NavigationContainerRef } from './types';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationContainerRefContext = React.createContext<
+export const NavigationContainerRefContext = React.createContext<
   NavigationContainerRef<ParamListBase> | undefined
 >(undefined);
-
-export default NavigationContainerRefContext;

package/src/NavigationContext.tsx

@@ -6,8 +6,6 @@ import type { NavigationProp } from './types';
 /**
  * Context which holds the navigation prop for a screen.
  */
-const NavigationContext = React.createContext<
+export const NavigationContext = React.createContext<
   NavigationProp<ParamListBase> | undefined
 >(undefined);
-
-export default NavigationContext;

package/src/NavigationHelpersContext.tsx

@@ -7,8 +7,6 @@ import type { NavigationHelpers } from './types';
  * Context which holds the navigation helpers of the parent navigator.
  * Navigators should use this context in their view component.
  */
-const NavigationHelpersContext = React.createContext<
+export const NavigationHelpersContext = React.createContext<
   NavigationHelpers<ParamListBase> | undefined
 >(undefined);
-
-export default NavigationHelpersContext;

package/src/NavigationIndependentTree.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 
-import NavigationContext from './NavigationContext';
-import NavigationIndependentTreeContext from './NavigationIndependentTreeContext';
-import NavigationRouteContext from './NavigationRouteContext';
+import { NavigationContext } from './NavigationContext';
+import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
+import { NavigationRouteContext } from './NavigationRouteContext';
 
 /**
  * Component to make the child navigation container independent of parent containers.
  */
-export default function NavigationIndependentTree({
+export function NavigationIndependentTree({
   children,
 }: {
   children: React.ReactNode;

package/src/NavigationIndependentTreeContext.tsx

@@ -3,6 +3,4 @@ import * as React from 'react';
 /**
  * Context which marks the navigation tree as independent.
  */
-const NavigationIndependentTreeContext = React.createContext(false);
-
-export default NavigationIndependentTreeContext;
+export const NavigationIndependentTreeContext = React.createContext(false);

package/src/NavigationRouteContext.tsx

@@ -4,8 +4,6 @@ import * as React from 'react';
 /**
  * Context which holds the route prop for a screen.
  */
-const NavigationRouteContext = React.createContext<Route<string> | undefined>(
-  undefined
-);
-
-export default NavigationRouteContext;
+export const NavigationRouteContext = React.createContext<
+  Route<string> | undefined
+>(undefined);

package/src/NavigationStateContext.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 const MISSING_CONTEXT_ERROR =
   "Couldn't find a navigation context. Have you wrapped your app with 'NavigationContainer'? See https://reactnavigation.org/docs/getting-started for setup instructions.";
 
-export default React.createContext<{
+export const NavigationStateContext = React.createContext<{
   isDefault?: true;
   state?: NavigationState | PartialState<NavigationState>;
   getKey: () => string | undefined;

package/src/PreventRemoveContext.tsx

@@ -6,7 +6,7 @@ import * as React from 'react';
  */
 export type PreventedRoutes = Record<string, { preventRemove: boolean }>;
 
-const PreventRemoveContext = React.createContext<
+export const PreventRemoveContext = React.createContext<
   | {
       preventedRoutes: PreventedRoutes;
       setPreventRemove: (
@@ -17,5 +17,3 @@ const PreventRemoveContext = React.createContext<
     }
   | undefined
 >(undefined);
-
-export default PreventRemoveContext;

package/src/PreventRemoveProvider.tsx

@@ -2,9 +2,12 @@ import { nanoid } from 'nanoid/non-secure';
 import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
-import NavigationHelpersContext from './NavigationHelpersContext';
-import NavigationRouteContext from './NavigationRouteContext';
-import PreventRemoveContext, { PreventedRoutes } from './PreventRemoveContext';
+import { NavigationHelpersContext } from './NavigationHelpersContext';
+import { NavigationRouteContext } from './NavigationRouteContext';
+import {
+  type PreventedRoutes,
+  PreventRemoveContext,
+} from './PreventRemoveContext';
 
 type Props = {
   children: React.ReactNode;
@@ -42,7 +45,7 @@ const transformPreventedRoutes = (
 /**
  * Component used for managing which routes have to be prevented from removal in native-stack.
  */
-export default function PreventRemoveProvider({ children }: Props) {
+export function PreventRemoveProvider({ children }: Props) {
   const [parentId] = React.useState(() => nanoid());
   const [preventedRoutesMap, setPreventedRoutesMap] =
     React.useState<PreventedRoutesMap>(new Map());

package/src/SceneView.tsx

@@ -6,11 +6,11 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import EnsureSingleNavigator from './EnsureSingleNavigator';
-import NavigationStateContext from './NavigationStateContext';
-import StaticContainer from './StaticContainer';
+import { EnsureSingleNavigator } from './EnsureSingleNavigator';
+import { NavigationStateContext } from './NavigationStateContext';
+import { StaticContainer } from './StaticContainer';
 import type { NavigationProp, RouteConfigComponent } from './types';
-import useOptionsGetters from './useOptionsGetters';
+import { useOptionsGetters } from './useOptionsGetters';
 
 type Props<State extends NavigationState, ScreenOptions extends {}> = {
   screen: RouteConfigComponent<ParamListBase, string> & { name: string };
@@ -33,9 +33,9 @@ type Props<State extends NavigationState, ScreenOptions extends {}> = {
  * Component which takes care of rendering the screen for a route.
  * It provides all required contexts and applies optimizations when applicable.
  */
-export default function SceneView<
+export function SceneView<
   State extends NavigationState,
-  ScreenOptions extends {}
+  ScreenOptions extends {},
 >({
   screen,
   route,

package/src/Screen.tsx

@@ -5,12 +5,12 @@ import type { EventMapBase, RouteConfig } from './types';
 /**
  * Empty component used for specifying route configuration.
  */
-export default function Screen<
+export function Screen<
   ParamList extends ParamListBase,
   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/StaticContainer.tsx

@@ -3,27 +3,28 @@ import * as React from 'react';
 /**
  * Component which prevents updates for children if no props changed
  */
-function StaticContainer(props: any) {
-  return props.children;
-}
+export const StaticContainer = React.memo(
+  function StaticContainer(props: any) {
+    return props.children;
+  },
+  (prevProps: any, nextProps: any) => {
+    const prevPropKeys = Object.keys(prevProps);
+    const nextPropKeys = Object.keys(nextProps);
 
-export default React.memo(StaticContainer, (prevProps: any, nextProps: any) => {
-  const prevPropKeys = Object.keys(prevProps);
-  const nextPropKeys = Object.keys(nextProps);
+    if (prevPropKeys.length !== nextPropKeys.length) {
+      return false;
+    }
 
-  if (prevPropKeys.length !== nextPropKeys.length) {
-    return false;
-  }
+    for (const key of prevPropKeys) {
+      if (key === 'children') {
+        continue;
+      }
 
-  for (const key of prevPropKeys) {
-    if (key === 'children') {
-      continue;
+      if (prevProps[key] !== nextProps[key]) {
+        return false;
+      }
     }
 
-    if (prevProps[key] !== nextProps[key]) {
-      return false;
-    }
+    return true;
   }
-
-  return true;
-});
+);

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,
@@ -10,7 +10,7 @@ import type {
   RouteConfig,
   RouteGroupConfig,
 } from './types';
-import useRoute from './useRoute';
+import { useRoute } from './useRoute';
 
 /**
  * Flatten a type to remove all type alias names, unions etc.
@@ -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/UnhandledActionContext.tsx

@@ -1,8 +1,6 @@
 import type { NavigationAction } from '@react-navigation/routers';
 import * as React from 'react';
 
-const UnhandledActionContext = React.createContext<
+export const UnhandledActionContext = React.createContext<
   ((action: NavigationAction) => void) | undefined
 >(undefined);
-
-export default UnhandledActionContext;