@react-navigation/core 8.0.0-alpha.33 → 8.0.0-alpha.34

package/src/useNavigationHelpers.tsx

@@ -7,7 +7,7 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationContext } from './NavigationProvider';
 import { type NavigationHelpers, PrivateValueStore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
@@ -41,7 +41,7 @@ export function useNavigationHelpers<
   router,
 }: Options<State, Action>) {
   const parentNavigationHelpers = React.use(NavigationContext);
-  const { withStackTrace } = React.use(NavigationBuilderContext);
+  const { withStackTrace } = useNavigationBuilderContext();
 
   return React.useMemo(() => {
     const dispatch = (op: Action | ((state: State) => Action)) => {

package/src/useOnAction.tsx

@@ -12,7 +12,7 @@ import { getLoaderForStateChange } from './DataLoading';
 import {
   type ChildActionListener,
   type ChildBeforeRemoveListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { StaticTreeContext } from './StaticTreeContext';
 import type { EventMapCore } from './types';
@@ -55,7 +55,7 @@ export function useOnAction<State extends NavigationState>({
     addListener: addListenerParent,
     onDispatchAction,
     flushUpdates,
-  } = React.use(NavigationBuilderContext);
+  } = useNavigationBuilderContext();
 
   const tree = React.use(StaticTreeContext);
   const consumedParams = React.use(ConsumedParamsContext);
@@ -95,9 +95,10 @@ export function useOnAction<State extends NavigationState>({
         );
 
         // If a target is specified and set to current navigator, the action shouldn't bubble
-        // So instead of `null`, we use the state object for such cases to signal that action was handled
-        result =
-          result === null && action.target === state.key ? state : result;
+        // So we immediately return `false` to mark it as unhandled
+        if (result === null && action.target === state.key) {
+          return false;
+        }
 
         if (result !== null && result.stale !== false) {
           // Some actions (e.g. `RESET`) may return a stale state from the router

package/src/useOnGetNavigation.tsx

@@ -1,7 +1,7 @@
 import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 import { NavigationRouteContext } from './NavigationProvider';
 import type { NavigationHelpers } from './types';
 
@@ -14,7 +14,8 @@ type Options = {
  * It's used for the navigation object returned by `useNavigation` outside a screen.
  */
 export function useOnGetNavigation({ navigation }: Options) {
-  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const { addKeyedListener } = useNavigationBuilderContext();
+
   const route = React.use(NavigationRouteContext);
 
   React.useInsertionEffect(() => {

package/src/useOnGetState.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { isArrayEqual } from './isArrayEqual';
 import {
   type GetStateListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationRouteContext } from './NavigationProvider';
 
@@ -14,8 +14,10 @@ type Options = {
 };
 
 export function useOnGetState({ getState, getStateListeners }: Options) {
-  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const { addKeyedListener } = useNavigationBuilderContext();
+
   const route = React.use(NavigationRouteContext);
+
   const key = route ? route.key : 'root';
 
   const getRehydratedState = React.useCallback(() => {

package/src/useOnPreventRemove.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 
 import {
   type ChildBeforeRemoveListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationRouteContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
@@ -107,8 +107,10 @@ export function useOnPreventRemove({
   emitter,
   beforeRemoveListeners,
 }: Options) {
-  const { addKeyedListener } = React.use(NavigationBuilderContext);
+  const { addKeyedListener } = useNavigationBuilderContext();
+
   const route = React.use(NavigationRouteContext);
+
   const routeKey = route?.key;
 
   React.useInsertionEffect(() => {

package/src/useOnRouteFocus.tsx

@@ -5,7 +5,7 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 
 type Options<State extends NavigationState, Action extends NavigationAction> = {
   router: Router<State, Action>;
@@ -23,9 +23,7 @@ export function useOnRouteFocus<
   State extends NavigationState,
   Action extends NavigationAction,
 >({ router, getState, key: sourceRouteKey, setState }: Options<State, Action>) {
-  const { onRouteFocus: onRouteFocusParent } = React.use(
-    NavigationBuilderContext
-  );
+  const { onRouteFocus: onRouteFocusParent } = useNavigationBuilderContext();
 
   return React.useCallback(
     (key: string) => {

package/src/useOptionsGetters.tsx

@@ -17,7 +17,8 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     Record<string, () => object | undefined | null>
   >({});
 
-  const { onOptionsChange } = React.use(NavigationBuilderContext);
+  const onOptionsChange = React.use(NavigationBuilderContext)?.onOptionsChange;
+
   const { addOptionsGetter: parentAddOptionsGetter } = React.use(
     NavigationStateContext
   );
@@ -27,7 +28,7 @@ export function useOptionsGetters({ key, options, navigation }: Options) {
     const hasChildren = Object.keys(optionsGettersFromChildRef.current).length;
 
     if (isFocused && !hasChildren) {
-      onOptionsChange(optionsRef.current ?? {});
+      onOptionsChange?.(optionsRef.current ?? {});
     }
   }, [navigation, onOptionsChange]);
 

package/src/useScheduleUpdate.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { useNavigationBuilderContext } from './NavigationBuilderContext';
 
 /**
  * When screen config changes, we want to update the navigator in the same update phase.
@@ -11,7 +11,7 @@ import { NavigationBuilderContext } from './NavigationBuilderContext';
  * This lets nested updates be applied from the root down without clobbering each other.
  */
 export function useScheduleUpdate(callback: () => void) {
-  const { scheduleUpdate, flushUpdates } = React.use(NavigationBuilderContext);
+  const { scheduleUpdate, flushUpdates } = useNavigationBuilderContext();
 
   React.useInsertionEffect(() => {
     scheduleUpdate(callback);

package/src/utilities.tsx

@@ -120,9 +120,11 @@ type StripRegex<Param extends string> = Param extends `${infer Name}(${string})`
 type ExtractSegmentParam<Segment extends string> =
   Segment extends `:${infer Param}?`
     ? { [K in StripRegex<Param>]?: string }
-    : Segment extends `:${infer Param}`
+    : Segment extends `:${infer Param}${'+' | '*'}`
       ? { [K in StripRegex<Param>]: string }
-      : {};
+      : Segment extends `:${infer Param}`
+        ? { [K in StripRegex<Param>]: string }
+        : {};
 
 export type StandardSchemaValidationResult<Output> =
   | { value: Output; issues?: undefined }
@@ -146,6 +148,7 @@ export type QueryParamInput = string | string[] | null | undefined;
  * Extract path params from a path string.
  * e.g. `/foo/:userId/:postId` -> `{ userId: string; postId: string }`
  * Supports optional params with `?` suffix.
+ * Supports repeated params with `+` and `*` suffixes as strings.
  * Params must start with `:` at the beginning of a segment (after `/`).
  */
 export type ExtractParamStrings<Path extends string> =