@react-navigation/core 8.0.0-alpha.4 → 8.0.0-alpha.5

package/src/useNavigationBuilder.tsx

@@ -42,6 +42,7 @@ import { type ScreenConfigWithParent, useDescriptors } from './useDescriptors';
 import { useEventEmitter } from './useEventEmitter';
 import { useFocusedListenersChildrenAdapter } from './useFocusedListenersChildrenAdapter';
 import { useFocusEvents } from './useFocusEvents';
+import { FocusedRouteKeyContext } from './useIsFocused';
 import { useKeyedChildListeners } from './useKeyedChildListeners';
 import { useLazyValue } from './useLazyValue';
 import { useNavigationHelpers } from './useNavigationHelpers';
@@ -58,9 +59,11 @@ PrivateValueStore;
 
 type NavigatorRoute = {
   key: string;
-  params?: NavigatorScreenParams<ParamListBase>;
+  params?: NavigatorScreenParams<ParamListBase> | undefined;
 };
 
+const CONSUMED_PARAMS = Symbol('CONSUMED_PARAMS');
+
 const isScreen = (
   child: React.ReactElement<unknown>
 ): child is React.ReactElement<{
@@ -324,6 +327,12 @@ export function useNavigationBuilder<
     | NavigatorRoute
     | undefined;
 
+  const isNestedParamsConsumed =
+    typeof route?.params === 'object' && route.params != null
+      ? CONSUMED_PARAMS in route.params &&
+        route.params[CONSUMED_PARAMS] === route.params
+      : false;
+
   const {
     children,
     layout,
@@ -418,7 +427,9 @@ export function useNavigationBuilder<
   );
 
   const isStateInitialized = React.useCallback(
-    (state: NavigationState | PartialState<NavigationState> | undefined) =>
+    <T extends NavigationState>(
+      state: T | PartialState<T> | undefined
+    ): state is T =>
       state !== undefined && state.stale === false && isStateValid(state),
     [isStateValid]
   );
@@ -438,14 +449,20 @@ export function useNavigationBuilder<
     getIsInitial,
   } = React.useContext(NavigationStateContext);
 
-  const stateCleanedUp = React.useRef(false);
+  const stateCleanupRef = React.useRef<boolean>(false);
+  const lastStateRef = React.useRef<State | PartialState<State> | undefined>(
+    undefined
+  );
 
   const setState = useLatestCallback(
-    (state: NavigationState | PartialState<NavigationState> | undefined) => {
-      if (stateCleanedUp.current) {
+    (state: State | PartialState<State> | undefined) => {
+      if (stateCleanupRef.current) {
+        // Store the state locally in case the current navigator is in `Activity`
+        lastStateRef.current = state;
+
         // State might have been already cleaned up due to unmount
-        // We do not want to expose API allowing to override this
-        // This would lead to old data preservation on main navigator unmount
+        // We don't want to update `route.state` in parent
+        // Otherwise it will be reused if a new navigator gets mounted
         return;
       }
 
@@ -457,11 +474,32 @@ export function useNavigationBuilder<
     stateBeforeInitialization,
     initializedState,
     isFirstStateInitialization,
+    paramsUsedForInitialization,
   ] = React.useMemo((): [
     PartialState<State> | undefined,
     State | undefined,
     boolean,
+    object | undefined,
   ] => {
+    // If the state was already cleaned up, but we have it stored in ref,
+    // It likely got cleaned up due to `<Activity mode="hidden">`
+    // We should reuse this state to avoid remounting screens
+    if (
+      stateCleanupRef.current &&
+      lastStateRef.current &&
+      isStateValid(lastStateRef.current)
+    ) {
+      const state: State = isStateInitialized(lastStateRef.current)
+        ? lastStateRef.current
+        : router.getRehydratedState(lastStateRef.current, {
+            routeNames,
+            routeParamList,
+            routeGetIdList,
+          });
+
+      return [undefined, state, false, undefined];
+    }
+
     const initialRouteParamList = routeNames.reduce<
       Record<string, object | undefined>
     >((acc, curr) => {
@@ -494,7 +532,8 @@ export function useNavigationBuilder<
       !(
         typeof route?.params?.screen === 'string' &&
         route?.params?.initial !== false
-      )
+      ) &&
+      !isNestedParamsConsumed
     ) {
       return [
         undefined,
@@ -504,28 +543,40 @@ export function useNavigationBuilder<
           routeGetIdList,
         }),
         true,
+        undefined,
       ];
     } else {
-      const stateFromParams = getStateFromParams(route?.params);
-      const stateBeforeInitialization = (stateFromParams ??
-        currentState) as PartialState<State>;
-      const hydratedState = router.getRehydratedState(
-        stateBeforeInitialization,
-        {
-          routeNames,
-          routeParamList: initialRouteParamList,
-          routeGetIdList,
-        }
-      );
+      const paramsForState = isNestedParamsConsumed ? undefined : route?.params;
+      const stateFromParams = paramsForState
+        ? getStateFromParams(paramsForState)
+        : undefined;
+
+      const stateBeforeInitialization = (stateFromParams ?? currentState) as
+        | PartialState<State>
+        | undefined;
+
+      const hydratedState =
+        stateBeforeInitialization == null
+          ? router.getInitialState({
+              routeNames,
+              routeParamList: initialRouteParamList,
+              routeGetIdList,
+            })
+          : router.getRehydratedState(stateBeforeInitialization, {
+              routeNames,
+              routeParamList: initialRouteParamList,
+              routeGetIdList,
+            });
 
       if (
+        stateBeforeInitialization != null &&
         options.routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(stateBeforeInitialization)
       ) {
-        return [stateBeforeInitialization, hydratedState, true];
+        return [stateBeforeInitialization, hydratedState, true, paramsForState];
       }
 
-      return [undefined, hydratedState, false];
+      return [undefined, hydratedState, false, paramsForState];
     }
     // We explicitly don't include routeNames, route.params etc. in the dep list
     // below. We want to avoid forcing a new state to be calculated in those cases
@@ -603,22 +654,18 @@ export function useNavigationBuilder<
     });
   }
 
-  const previousNestedParamsRef = React.useRef(route?.params);
-
-  React.useEffect(() => {
-    previousNestedParamsRef.current = route?.params;
-  }, [route?.params]);
-
-  if (route?.params) {
-    const previousParams = previousNestedParamsRef.current;
+  let didConsumeNestedParams = route?.params === paramsUsedForInitialization;
 
+  if (route?.params && !didConsumeNestedParams) {
     let action: CommonActions.Action | undefined;
 
     if (
       typeof route.params.state === 'object' &&
       route.params.state != null &&
-      route.params !== previousParams
+      !isNestedParamsConsumed
     ) {
+      didConsumeNestedParams = true;
+
       if (
         options.routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(route.params.state)
@@ -633,8 +680,10 @@ export function useNavigationBuilder<
     } else if (
       typeof route.params.screen === 'string' &&
       ((route.params.initial === false && isFirstStateInitialization) ||
-        route.params !== previousParams)
+        !isNestedParamsConsumed)
     ) {
+      didConsumeNestedParams = true;
+
       if (
         options.routeNamesChangeBehavior === 'lastUnhandled' &&
         !routeNames.includes(route.params.screen)
@@ -675,14 +724,26 @@ export function useNavigationBuilder<
         : nextState;
   }
 
-  const shouldUpdate =
-    state !== nextState ||
-    typeof route?.params?.state === 'object' ||
-    typeof route?.params?.screen === 'string';
+  React.useEffect(() => {
+    if (
+      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,
+      });
+    }
+  }, [didConsumeNestedParams, route?.params]);
+
+  const shouldUpdate = state !== nextState;
 
   useScheduleUpdate(() => {
     if (shouldUpdate) {
-      // If the state needs to be updated, we'll schedule an update
+      // Schedule an update if the state needs to be updated
       setState(nextState);
 
       if (shouldClearUnhandledState) {
@@ -696,25 +757,35 @@ export function useNavigationBuilder<
   // So we override the state object we return to use the latest state as soon as possible
   state = nextState;
 
+  // Last state to reuse if component gets cleaned up due to `<Activity mode="hidden">`
+  React.useEffect(() => {
+    lastStateRef.current = state;
+  });
+
+  const lastNotifiedStateRef = React.useRef<State | null>(null);
+
   React.useEffect(() => {
     // In strict mode, React will double-invoke effects.
     // So we need to reset the flag if component was not unmounted
-    stateCleanedUp.current = false;
+    stateCleanupRef.current = false;
 
     setKey(navigatorKey);
 
-    if (!getIsInitial()) {
+    if (!getIsInitial() && lastNotifiedStateRef.current !== state) {
       // If it's not initial render, we need to update the state
       // This will make sure that our container gets notifier of state changes due to new mounts
       // This is necessary for proper screen tracking, URL updates etc.
-      setState(nextState);
+      // We only notify if the state is different what we already notified
+      // Otherwise this goes into a loop when inside `<Activity mode="hidden">`
+      setState(state);
+      lastNotifiedStateRef.current = state;
     }
 
     return () => {
       // We need to clean up state for this navigator on unmount
       if (getCurrentState() !== undefined && getKey() === navigatorKey) {
         setCurrentState(undefined);
-        stateCleanedUp.current = true;
+        stateCleanupRef.current = true;
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -942,7 +1013,11 @@ export function useNavigationBuilder<
       <NavigationMetaContext.Provider value={undefined}>
         <NavigationHelpersContext.Provider value={navigation}>
           <NavigationStateListenerProvider state={state}>
-            <PreventRemoveProvider>{element}</PreventRemoveProvider>
+            <FocusedRouteKeyContext.Provider
+              value={state.routes[state.index].key}
+            >
+              <PreventRemoveProvider>{element}</PreventRemoveProvider>
+            </FocusedRouteKeyContext.Provider>
           </NavigationStateListenerProvider>
         </NavigationHelpersContext.Provider>
       </NavigationMetaContext.Provider>

package/src/useOnAction.tsx

@@ -16,11 +16,11 @@ import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 import { shouldPreventRemove, useOnPreventRemove } from './useOnPreventRemove';
 
-type Options = {
-  router: Router<NavigationState, NavigationAction>;
-  key?: string;
-  getState: () => NavigationState;
-  setState: (state: NavigationState | PartialState<NavigationState>) => void;
+type Options<State extends NavigationState> = {
+  router: Router<State, NavigationAction>;
+  key?: string | undefined;
+  getState: () => State;
+  setState: (state: State | PartialState<State>) => void;
   actionListeners: ChildActionListener[];
   beforeRemoveListeners: Record<string, ChildBeforeRemoveListener | undefined>;
   routerConfigOptions: RouterConfigOptions;
@@ -36,7 +36,7 @@ type Options = {
  *
  * When the action handler handles as action, it returns `true`, otherwise `false`.
  */
-export function useOnAction({
+export function useOnAction<State extends NavigationState>({
   router,
   getState,
   setState,
@@ -45,7 +45,7 @@ export function useOnAction({
   beforeRemoveListeners,
   routerConfigOptions,
   emitter,
-}: Options) {
+}: Options<State>) {
   const {
     onAction: onActionParent,
     onRouteFocus: onRouteFocusParent,

package/src/useOnRouteFocus.tsx

@@ -7,11 +7,11 @@ import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
 
-type Options<Action extends NavigationAction> = {
-  router: Router<NavigationState, Action>;
-  getState: () => NavigationState;
-  setState: (state: NavigationState) => void;
-  key?: string;
+type Options<State extends NavigationState, Action extends NavigationAction> = {
+  router: Router<State, Action>;
+  getState: () => State;
+  setState: (state: State) => void;
+  key?: string | undefined;
 };
 
 /**
@@ -19,12 +19,10 @@ type Options<Action extends NavigationAction> = {
  * Focus action needs to be treated specially, coz when a nested route is focused,
  * the parent navigators also needs to be focused.
  */
-export function useOnRouteFocus<Action extends NavigationAction>({
-  router,
-  getState,
-  key: sourceRouteKey,
-  setState,
-}: Options<Action>) {
+export function useOnRouteFocus<
+  State extends NavigationState,
+  Action extends NavigationAction,
+>({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
   const { onRouteFocus: onRouteFocusParent } = React.useContext(
     NavigationBuilderContext
   );

package/src/utilities.tsx

@@ -66,6 +66,24 @@ type ExtractSegmentParam<Segment extends string> =
       ? { [K in StripRegex<Param>]: string }
       : {};
 
+export type StandardSchemaValidationResult<Output> =
+  | { value: Output; issues?: undefined }
+  | { value?: undefined; issues: readonly unknown[] };
+
+export type StandardSchemaV1<Input = unknown, Output = Input> = {
+  readonly '~standard': {
+    readonly version: 1;
+    readonly vendor: string;
+    readonly validate: (
+      value: Input
+    ) =>
+      | StandardSchemaValidationResult<Output>
+      | Promise<StandardSchemaValidationResult<Output>>;
+  };
+};
+
+export type QueryParamInput = string | string[] | null | undefined;
+
 /**
  * Extract path params from a path string.
  * e.g. `/foo/:userId/:postId` -> `{ userId: string; postId: string }`
@@ -78,17 +96,67 @@ export type ExtractParamStrings<Path extends string> =
     : ExtractSegmentParam<Path>;
 
 /**
- * Extract the parsed params type from base params and parse functions.
- * Applies the return type of parse functions to the corresponding params.
+ * Get the type of params based on the `parse` config and the path pattern.
  */
 export type ExtractParamsType<Params, Parse> = {
+  /**
+   * Base param types from path pattern
+   * Refine the type based on standard schema, then parse function
+   * Otherwise, use the type from path pattern
+   */
   [K in keyof Params]: K extends keyof Parse
-    ? Parse[K] extends (value: string) => infer R
+    ? Parse[K] extends StandardSchemaV1<unknown, infer R>
       ? R
-      : Params[K]
+      : Parse[K] extends (value: string) => infer R
+        ? R
+        : Params[K]
     : Params[K];
+} & {
+  /**
+   * Optional param types not in path pattern (for query params)
+   */
+  [K in QueryParamOptionalKeys<Params, Parse>]?: QueryParamValue<Parse[K]>;
+} & {
+  /**
+   * Required param types not in path pattern (for query params)
+   */
+  [K in QueryParamRequiredKeys<Params, Parse>]: QueryParamValue<Parse[K]>;
 };
 
+type QueryParamValue<ParseValue> =
+  ParseValue extends StandardSchemaV1<unknown, infer R>
+    ? R
+    : ParseValue extends (value: string) => infer R
+      ? R
+      : never;
+
+/**
+ * For schema, it's optional if the output has `undefined`, otherwise required
+ * For parse function, it's always optional as it can't say if it's required or not
+ */
+type QueryParamOptionalKeys<Params, Parse> = {
+  [K in Exclude<keyof Parse, keyof Params>]: Parse[K] extends StandardSchemaV1<
+    unknown,
+    infer R
+  >
+    ? undefined extends R
+      ? K
+      : never
+    : Parse[K] extends (value: string) => unknown
+      ? K
+      : never;
+}[Exclude<keyof Parse, keyof Params>];
+
+/**
+ * Exclude optional keys to get required keys
+ * For schema, it's required if the output doesn't have `undefined`, otherwise optional
+ * It doesn't include parse functions (as they are always optional)
+ */
+type QueryParamRequiredKeys<Params, Parse> = Exclude<
+  Exclude<keyof Parse, keyof Params>,
+  QueryParamOptionalKeys<Params, Parse>
+>;
+
 /**
  * Infer the path string from a linking config.
  */