@react-navigation/core 8.0.0-alpha.6 → 8.0.0-alpha.8

package/src/types.tsx

@@ -55,15 +55,10 @@ export interface RootNavigator {}
 export interface Theme {}
 
 export type RootParamList =
-  RootNavigator extends TypedNavigatorInternal<
-    infer ParamList,
-    any,
-    any,
-    any,
-    any,
-    any
-  >
-    ? ParamList
+  RootNavigator extends PrivateValueStore<[infer ParamList, any, any]>
+    ? ParamList extends {}
+      ? ParamList
+      : {}
     : {};
 
 export type DefaultNavigatorOptions<
@@ -1146,18 +1141,51 @@ export type NavigatorTypeBagBase = {
   Navigator: React.ComponentType<any>;
 };
 
+type TypedNavigatorComponent<Bag extends NavigatorTypeBagBase> =
+  React.ComponentType<
+    Omit<
+      React.ComponentProps<
+        TypedNavigatorInternal<
+          Bag['ParamList'],
+          Bag['State'],
+          Bag['ScreenOptions'],
+          Bag['EventMap'],
+          Bag['NavigationList'],
+          Bag['Navigator']
+        >['Navigator']
+      >,
+      'children'
+    >
+  >;
+
+type TypedNavigatorStaticDecorated<Bag extends NavigatorTypeBagBase, Config> = {
+  getComponent: () => React.ComponentType<{}>;
+  config: Config;
+} & PrivateValueStore<[Bag['ParamList'], Bag['NavigationList'], unknown]>;
+
+type TypedNavigatorStatic<Bag extends NavigatorTypeBagBase, Config> = {
+  config: Config;
+  with: (
+    Component: React.ComponentType<{
+      Navigator: TypedNavigatorComponent<Bag>;
+    }>
+  ) => TypedNavigatorStaticDecorated<Bag, Config>;
+  getComponent: () => TypedNavigatorComponent<Bag>;
+};
+
 export type TypedNavigator<
   Bag extends NavigatorTypeBagBase,
   Config = unknown,
-> = TypedNavigatorInternal<
-  Bag['ParamList'],
-  Bag['State'],
-  Bag['ScreenOptions'],
-  Bag['EventMap'],
-  Bag['NavigationList'],
-  Bag['Navigator']
-> &
-  (undefined extends Config ? {} : { config: Config }) &
+> = (undefined extends Config
+  ? TypedNavigatorInternal<
+      Bag['ParamList'],
+      Bag['State'],
+      Bag['ScreenOptions'],
+      Bag['EventMap'],
+      Bag['NavigationList'],
+      Bag['Navigator']
+    >
+  : TypedNavigatorStatic<Bag, Config>) &
   PrivateValueStore<[Bag['ParamList'], Bag['NavigationList'], unknown]>;
 
 type TypedNavigatorInternal<

package/src/useCurrentRender.tsx

@@ -23,7 +23,7 @@ type Options = {
  * Mutating values like this is not safe in async mode, but it doesn't apply to SSR
  */
 export function useCurrentRender({ state, navigation, descriptors }: Options) {
-  const current = React.useContext(CurrentRenderContext);
+  const current = React.use(CurrentRenderContext);
 
   if (current && navigation.isFocused()) {
     current.options = descriptors[state.routes[state.index].key].options;

package/src/useDescriptors.tsx

@@ -113,7 +113,7 @@ export function useDescriptors<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const theme = React.useContext(ThemeContext);
+  const theme = React.use(ThemeContext);
   const [options, setOptions] = React.useState<Record<string, ScreenOptions>>(
     {}
   );
@@ -124,7 +124,7 @@ export function useDescriptors<
     scheduleUpdate,
     flushUpdates,
     stackRef,
-  } = React.useContext(NavigationBuilderContext);
+  } = React.use(NavigationBuilderContext);
 
   const context = React.useMemo(
     () => ({

package/src/useFocusEvents.tsx

@@ -17,7 +17,7 @@ export function useFocusEvents<State extends NavigationState>({
   state,
   emitter,
 }: Options<State>) {
-  const navigation = React.useContext(NavigationContext);
+  const navigation = React.use(NavigationContext);
   const lastFocusedKeyRef = React.useRef<string | undefined>(undefined);
 
   const currentFocusedKey = state.routes[state.index].key;

package/src/useFocusedListenersChildrenAdapter.tsx

@@ -20,7 +20,7 @@ export function useFocusedListenersChildrenAdapter({
   navigation,
   focusedListeners,
 }: Options) {
-  const { addListener } = React.useContext(NavigationBuilderContext);
+  const { addListener } = React.use(NavigationBuilderContext);
 
   const listener = React.useCallback(
     (callback: FocusedNavigationCallback<any>) => {

package/src/useNavigationBuilder.tsx

@@ -15,6 +15,7 @@ import * as React from 'react';
 import { isValidElementType } from 'react-is';
 import useLatestCallback from 'use-latest-callback';
 
+import { ConsumedParamsContext } from './ConsumedParamsContext';
 import { deepFreeze } from './deepFreeze';
 import { Group } from './Group';
 import { isArrayEqual } from './isArrayEqual';
@@ -62,8 +63,6 @@ type NavigatorRoute = {
   params?: NavigatorScreenParams<ParamListBase> | undefined;
 };
 
-const CONSUMED_PARAMS = Symbol('CONSUMED_PARAMS');
-
 const isScreen = (
   child: React.ReactElement<unknown>
 ): child is React.ReactElement<{
@@ -323,14 +322,13 @@ export function useNavigationBuilder<
 ) {
   const navigatorKey = useRegisterNavigator();
 
-  const route = React.useContext(NavigationRouteContext) as
-    | NavigatorRoute
-    | undefined;
+  const route = React.use(NavigationRouteContext) as NavigatorRoute | undefined;
+
+  const consumedParams = React.use(ConsumedParamsContext);
 
   const isNestedParamsConsumed =
     typeof route?.params === 'object' && route.params != null
-      ? CONSUMED_PARAMS in route.params &&
-        route.params[CONSUMED_PARAMS] === route.params
+      ? consumedParams?.ref?.deref() === route.params
       : false;
 
   const {
@@ -447,7 +445,7 @@ export function useNavigationBuilder<
     setKey,
     getKey,
     getIsInitial,
-  } = React.useContext(NavigationStateContext);
+  } = React.use(NavigationStateContext);
 
   const stateCleanupRef = React.useRef<boolean>(false);
   const lastStateRef = React.useRef<State | PartialState<State> | undefined>(
@@ -724,20 +722,20 @@ export function useNavigationBuilder<
         : nextState;
   }
 
+  const setConsumedParamsRef = consumedParams?.setRef;
+
   React.useEffect(() => {
     if (
+      setConsumedParamsRef &&
       didConsumeNestedParams &&
       typeof route?.params === 'object' &&
       route.params != null
     ) {
       // Track whether the params have been already consumed
       // Set it to the same object, so merged params can be handled again
-      Object.defineProperty(route.params, CONSUMED_PARAMS, {
-        value: route.params,
-        enumerable: false,
-      });
+      setConsumedParamsRef(new WeakRef(route.params));
     }
-  }, [didConsumeNestedParams, route?.params]);
+  }, [didConsumeNestedParams, route?.params, setConsumedParamsRef]);
 
   const shouldUpdate = state !== nextState;
 
@@ -814,7 +812,7 @@ export function useNavigationBuilder<
     );
   });
 
-  const { onEmitEvent } = React.useContext(NavigationBuilderContext);
+  const { onEmitEvent } = React.use(NavigationBuilderContext);
 
   const emitter = useEventEmitter<EventMapCore<State>>((e) => {
     const routeNames = [];
@@ -908,7 +906,7 @@ export function useNavigationBuilder<
     setState,
   });
 
-  const onUnhandledActionParent = React.useContext(UnhandledActionContext);
+  const onUnhandledActionParent = React.use(UnhandledActionContext);
 
   const onUnhandledAction = useLatestCallback((action: NavigationAction) => {
     if (

package/src/useNavigationCache.tsx

@@ -72,8 +72,8 @@ export function useNavigationCache<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
-  const { stackRef } = React.useContext(NavigationBuilderContext);
+  const parentNavigationHelpers = React.use(NavigationContext);
+  const { stackRef } = React.use(NavigationBuilderContext);
 
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change

package/src/useNavigationHelpers.tsx

@@ -41,7 +41,7 @@ export function useNavigationHelpers<
   router,
   stateRef,
 }: Options<State, Action>) {
-  const parentNavigationHelpers = React.useContext(NavigationContext);
+  const parentNavigationHelpers = React.use(NavigationContext);
 
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {

package/src/useNavigationIndependentTree.tsx

@@ -3,5 +3,5 @@ import * as React from 'react';
 import { NavigationIndependentTreeContext } from './NavigationIndependentTreeContext';
 
 export function useNavigationIndependentTree() {
-  return React.useContext(NavigationIndependentTreeContext);
+  return React.use(NavigationIndependentTreeContext);
 }

package/src/useOnAction.tsx

@@ -51,7 +51,7 @@ export function useOnAction<State extends NavigationState>({
     onRouteFocus: onRouteFocusParent,
     addListener: addListenerParent,
     onDispatchAction,
-  } = React.useContext(NavigationBuilderContext);
+  } = React.use(NavigationBuilderContext);
 
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);

package/src/useOnGetState.tsx

@@ -14,8 +14,8 @@ type Options = {
 };
 
 export function useOnGetState({ getState, getStateListeners }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
-  const route = React.useContext(NavigationRouteContext);
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const route = React.use(NavigationRouteContext);
   const key = route ? route.key : 'root';
 
   const getRehydratedState = React.useCallback(() => {

package/src/useOnPreventRemove.tsx

@@ -78,8 +78,8 @@ export function useOnPreventRemove({
   emitter,
   beforeRemoveListeners,
 }: Options) {
-  const { addKeyedListener } = React.useContext(NavigationBuilderContext);
-  const route = React.useContext(NavigationRouteContext);
+  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const route = React.use(NavigationRouteContext);
   const routeKey = route?.key;
 
   React.useEffect(() => {

package/src/useOnRouteFocus.tsx

@@ -23,7 +23,7 @@ export function useOnRouteFocus<
   State extends NavigationState,
   Action extends NavigationAction,
 >({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
-  const { onRouteFocus: onRouteFocusParent } = React.useContext(
+  const { onRouteFocus: onRouteFocusParent } = React.use(
     NavigationBuilderContext
   );
 

package/src/useOptionsGetters.tsx

@@ -17,8 +17,8 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     Record<string, () => object | undefined | null>
   >({});
 
-  const { onOptionsChange } = React.useContext(NavigationBuilderContext);
-  const { addOptionsGetter: parentAddOptionsGetter } = React.useContext(
+  const { onOptionsChange } = React.use(NavigationBuilderContext);
+  const { addOptionsGetter: parentAddOptionsGetter } = React.use(
     NavigationStateContext
   );
 

package/src/usePreventRemoveContext.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { PreventRemoveContext } from './PreventRemoveContext';
 
 export function usePreventRemoveContext() {
-  const value = React.useContext(PreventRemoveContext);
+  const value = React.use(PreventRemoveContext);
 
   if (value == null) {
     throw new Error(

package/src/useRegisterNavigator.tsx

@@ -9,7 +9,7 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  */
 export function useRegisterNavigator() {
   const [key] = React.useState(() => nanoid());
-  const container = React.useContext(SingleNavigatorContext);
+  const container = React.use(SingleNavigatorContext);
 
   if (container === undefined) {
     throw new Error(

package/src/useScheduleUpdate.tsx

@@ -10,9 +10,7 @@ import { NavigationBuilderContext } from './NavigationBuilderContext';
  * Then we call setState during after the component updates.
  */
 export function useScheduleUpdate(callback: () => void) {
-  const { scheduleUpdate, flushUpdates } = React.useContext(
-    NavigationBuilderContext
-  );
+  const { scheduleUpdate, flushUpdates } = React.use(NavigationBuilderContext);
 
   // FIXME: This is potentially unsafe
   // However, since we are using sync store, it might be fine

package/src/useStateForPath.tsx

@@ -9,7 +9,7 @@ import { NavigationFocusedRouteStateContext } from './NavigationFocusedRouteStat
  * @returns Minimal state to build a path for the current route.
  */
 export function useStateForPath() {
-  const state = React.useContext(NavigationFocusedRouteStateContext);
+  const state = React.use(NavigationFocusedRouteStateContext);
 
   return state;
 }