@react-navigation/core 8.0.0-alpha.7 → 8.0.0-alpha.9

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/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<{
@@ -325,10 +324,11 @@ export function useNavigationBuilder<
 
   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?.isConsumed(route.params)
       : false;
 
   const {
@@ -722,20 +722,18 @@ export function useNavigationBuilder<
         : nextState;
   }
 
+  const setConsumedParams = consumedParams?.setConsumed;
+
   React.useEffect(() => {
     if (
+      setConsumedParams &&
       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,
-      });
+      setConsumedParams(route.params);
     }
-  }, [didConsumeNestedParams, route?.params]);
+  }, [didConsumeNestedParams, route?.params, setConsumedParams]);
 
   const shouldUpdate = state !== nextState;