@react-navigation/core 8.0.0-alpha.2 → 8.0.0-alpha.20

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,13 +45,13 @@ export function useOnAction({
   beforeRemoveListeners,
   routerConfigOptions,
   emitter,
-}: Options) {
+}: Options<State>) {
   const {
     onAction: onActionParent,
     onRouteFocus: onRouteFocusParent,
     addListener: addListenerParent,
     onDispatchAction,
-  } = React.useContext(NavigationBuilderContext);
+  } = React.use(NavigationBuilderContext);
 
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);
@@ -132,7 +132,7 @@ export function useOnAction({
         for (let i = actionListeners.length - 1; i >= 0; i--) {
           const listener = actionListeners[i];
 
-          if (listener(action, visitedNavigators)) {
+          if (listener?.(action, visitedNavigators)) {
             return true;
           }
         }
@@ -160,7 +160,7 @@ export function useOnAction({
     beforeRemoveListeners,
   });
 
-  React.useEffect(
+  React.useInsertionEffect(
     () => addListenerParent?.('action', onAction),
     [addListenerParent, onAction]
   );

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(() => {
@@ -39,7 +39,9 @@ export function useOnGetState({ getState, getStateListeners }: Options) {
     return { ...state, routes };
   }, [getState, getStateListeners]);
 
-  React.useEffect(() => {
+  // Use insertion effect to preserve the listener under `<Activity mode="hidden">`
+  // So `getRootState` will still return state of nested navigators
+  React.useInsertionEffect(() => {
     return addKeyedListener?.('getState', key, getRehydratedState);
   }, [addKeyedListener, getRehydratedState, key]);
 }

package/src/useOnPreventRemove.tsx

@@ -78,11 +78,11 @@ 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(() => {
+  React.useInsertionEffect(() => {
     if (routeKey) {
       return addKeyedListener?.('beforeRemove', routeKey, (action) => {
         const state = getState();

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,13 +19,11 @@ 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>) {
-  const { onRouteFocus: onRouteFocusParent } = React.useContext(
+export function useOnRouteFocus<
+  State extends NavigationState,
+  Action extends NavigationAction,
+>({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
+  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
   );
 
@@ -69,8 +69,11 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     return optionsRef.current;
   }, [navigation, getOptionsFromListener]);
 
-  React.useEffect(() => {
-    return parentAddOptionsGetter?.(key!, getCurrentOptions);
+  React.useInsertionEffect(() => {
+    // We don't have a parent at the root
+    if (key != null) {
+      return parentAddOptionsGetter?.(key, getCurrentOptions);
+    }
   }, [getCurrentOptions, parentAddOptionsGetter, key]);
 
   const addOptionsGetter = React.useCallback(

package/src/usePreventRemove.tsx

@@ -44,7 +44,7 @@ export function usePreventRemove(
     callback({ data: e.data });
   });
 
-  React.useEffect(
+  React.useInsertionEffect(
     () => navigation?.addListener('beforeRemove', beforeRemoveListener),
     [navigation, beforeRemoveListener]
   );

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(
@@ -17,7 +17,7 @@ export function useRegisterNavigator() {
     );
   }
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     const { register, unregister } = container;
 
     register(key);

package/src/useRoute.tsx

@@ -22,8 +22,10 @@ type AllRouteNames<ParamList extends {}> = RouteForName<
  */
 export function useRoute<
   const ParamList extends {} = RootParamList,
-  const RouteName extends AllRouteNames<ParamList> = AllRouteNames<ParamList>,
->(name: RouteName): RouteForName<ParamList, RouteName>;
+  const RouteName extends string = string,
+>(
+  name: RouteName & AllRouteNames<ParamList>
+): RouteForName<ParamList, RouteName>;
 export function useRoute<
   const ParamList extends {} = RootParamList,
 >(): {} extends ParamList

package/src/useRouteCache.tsx

@@ -36,9 +36,10 @@ export function useRouteCache<State extends NavigationState>(
       proxy = routeWithoutState;
     }
 
-    if (process.env.NODE_ENV !== 'production') {
+    if (process.env.NODE_ENV !== 'production' && proxy !== previous) {
       // FIXME: since the state is updated with mutation, the route object cannot be frozen
       // As a workaround, loop through the object and make the properties readonly
+      // Only needed once per proxy - skip if we're reusing a previously-frozen one
       for (const key in proxy) {
         // @ts-expect-error: this is fine since we are looping through the object
         const value = proxy[key];

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;
 }

package/src/utilities.tsx

@@ -35,6 +35,16 @@ export type NotUndefined<T> = T extends undefined ? never : T;
 
 export type AnyToUnknown<T> = 0 extends 1 & T ? unknown : T;
 
+export type RequiredKeys<T extends object> = {
+  [K in keyof T]-?: {} extends Pick<T, K> ? never : K;
+}[keyof T];
+
+export type UndefinedIfAllOptional<T> = T extends object
+  ? RequiredKeys<T> extends never
+    ? T | undefined
+    : T
+  : T;
+
 /**
  * Check if a function type has arguments.
  */
@@ -66,6 +76,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,16 +106,72 @@ 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];
-};
+} & // Query params are the parse keys not present in the path pattern. When there
+  // are none (the common case), skip building the query param mapped types.
+  ([Exclude<keyof Parse, keyof Params>] extends [never]
+    ? {}
+    : {
+        /**
+         * 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.
@@ -101,6 +185,18 @@ export type InferPath<T> = T extends { path: infer P extends string }
  */
 export type InferParse<T> = T extends { parse: infer P } ? P : {};
 
+export type InferParamsFromLinking<T> = T extends {
+  path: infer P extends string;
+}
+  ? UndefinedIfAllOptional<
+      ExtractParamsType<ExtractParamStrings<P>, InferParse<T>>
+    >
+  : T extends string
+    ? UndefinedIfAllOptional<
+        ExtractParamsType<ExtractParamStrings<T>, undefined>
+      >
+    : undefined;
+
 /**
  * Infer the params type from a screen component or nested navigator.
  */

package/src/validatePathConfig.tsx

@@ -15,6 +15,7 @@ export function validatePathConfig(config: unknown, root = true) {
           exact: 'boolean',
           stringify: 'object',
           parse: 'object',
+          shared: 'boolean',
         }),
   };
 

package/lib/module/CurrentRenderContext.js

@@ -1,10 +0,0 @@
-"use strict";
-
-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.
- */
-export const CurrentRenderContext = /*#__PURE__*/React.createContext(undefined);
-//# sourceMappingURL=CurrentRenderContext.js.map

package/lib/module/CurrentRenderContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","CurrentRenderContext","createContext","undefined"],"sourceRoot":"../../src","sources":["CurrentRenderContext.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAE9B;AACA;AACA;AACA;AACA,OAAO,MAAMC,oBAAoB,gBAAGD,KAAK,CAACE,aAAa,CAErDC,SAAS,CAAC","ignoreList":[]}

package/lib/module/useCurrentRender.js

@@ -1,19 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-import { CurrentRenderContext } from "./CurrentRenderContext.js";
-/**
- * Write the current options, so that server renderer can get current values
- * Mutating values like this is not safe in async mode, but it doesn't apply to SSR
- */
-export function useCurrentRender({
-  state,
-  navigation,
-  descriptors
-}) {
-  const current = React.useContext(CurrentRenderContext);
-  if (current && navigation.isFocused()) {
-    current.options = descriptors[state.routes[state.index].key].options;
-  }
-}
-//# sourceMappingURL=useCurrentRender.js.map

package/lib/module/useCurrentRender.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","CurrentRenderContext","useCurrentRender","state","navigation","descriptors","current","useContext","isFocused","options","routes","index","key"],"sourceRoot":"../../src","sources":["useCurrentRender.tsx"],"mappings":";;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,SAASC,oBAAoB,QAAQ,2BAAwB;AAiB7D;AACA;AACA;AACA;AACA,OAAO,SAASC,gBAAgBA,CAAC;EAAEC,KAAK;EAAEC,UAAU;EAAEC;AAAqB,CAAC,EAAE;EAC5E,MAAMC,OAAO,GAAGN,KAAK,CAACO,UAAU,CAACN,oBAAoB,CAAC;EAEtD,IAAIK,OAAO,IAAIF,UAAU,CAACI,SAAS,CAAC,CAAC,EAAE;IACrCF,OAAO,CAACG,OAAO,GAAGJ,WAAW,CAACF,KAAK,CAACO,MAAM,CAACP,KAAK,CAACQ,KAAK,CAAC,CAACC,GAAG,CAAC,CAACH,OAAO;EACtE;AACF","ignoreList":[]}

package/lib/typescript/src/CurrentRenderContext.d.ts

@@ -1,9 +0,0 @@
-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.
- */
-export declare const CurrentRenderContext: React.Context<{
-    options?: object;
-} | undefined>;
-//# sourceMappingURL=CurrentRenderContext.d.ts.map

package/lib/typescript/src/CurrentRenderContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CurrentRenderContext.d.ts","sourceRoot":"","sources":["../../../src/CurrentRenderContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B;;;GAGG;AACH,eAAO,MAAM,oBAAoB;cACnB,MAAM;cACR,CAAC"}

package/lib/typescript/src/useCurrentRender.d.ts

@@ -1,14 +0,0 @@
-import type { NavigationState, ParamListBase } from '@react-navigation/routers';
-import type { Descriptor, NavigationHelpers, NavigationProp, RouteProp } from './types';
-type Options = {
-    state: NavigationState;
-    navigation: NavigationHelpers<ParamListBase>;
-    descriptors: Record<string, Descriptor<object, NavigationProp<ParamListBase>, RouteProp<ParamListBase>>>;
-};
-/**
- * Write the current options, so that server renderer can get current values
- * Mutating values like this is not safe in async mode, but it doesn't apply to SSR
- */
-export declare function useCurrentRender({ state, navigation, descriptors }: Options): void;
-export {};
-//# sourceMappingURL=useCurrentRender.d.ts.map

package/lib/typescript/src/useCurrentRender.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useCurrentRender.d.ts","sourceRoot":"","sources":["../../../src/useCurrentRender.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAIhF,OAAO,KAAK,EACV,UAAU,EACV,iBAAiB,EACjB,cAAc,EACd,SAAS,EACV,MAAM,SAAS,CAAC;AAEjB,KAAK,OAAO,GAAG;IACb,KAAK,EAAE,eAAe,CAAC;IACvB,UAAU,EAAE,iBAAiB,CAAC,aAAa,CAAC,CAAC;IAC7C,WAAW,EAAE,MAAM,CACjB,MAAM,EACN,UAAU,CAAC,MAAM,EAAE,cAAc,CAAC,aAAa,CAAC,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC,CAC5E,CAAC;CACH,CAAC;AAEF;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,EAAE,OAAO,QAM3E"}

package/src/CurrentRenderContext.tsx

@@ -1,9 +0,0 @@
-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.
- */
-export const CurrentRenderContext = React.createContext<
-  { options?: object } | undefined
->(undefined);

package/src/useCurrentRender.tsx

@@ -1,31 +0,0 @@
-import type { NavigationState, ParamListBase } from '@react-navigation/routers';
-import * as React from 'react';
-
-import { CurrentRenderContext } from './CurrentRenderContext';
-import type {
-  Descriptor,
-  NavigationHelpers,
-  NavigationProp,
-  RouteProp,
-} from './types';
-
-type Options = {
-  state: NavigationState;
-  navigation: NavigationHelpers<ParamListBase>;
-  descriptors: Record<
-    string,
-    Descriptor<object, NavigationProp<ParamListBase>, RouteProp<ParamListBase>>
-  >;
-};
-
-/**
- * Write the current options, so that server renderer can get current values
- * 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);
-
-  if (current && navigation.isFocused()) {
-    current.options = descriptors[state.routes[state.index].key].options;
-  }
-}