@react-navigation/core 6.4.8 → 7.0.0-alpha.1

package/src/useNavigationBuilder.tsx

@@ -13,14 +13,14 @@ import {
 import * as React from 'react';
 import { isValidElementType } from 'react-is';
 
-import Group from './Group';
-import isArrayEqual from './isArrayEqual';
-import isRecordEqual from './isRecordEqual';
-import NavigationHelpersContext from './NavigationHelpersContext';
-import NavigationRouteContext from './NavigationRouteContext';
-import NavigationStateContext from './NavigationStateContext';
-import PreventRemoveProvider from './PreventRemoveProvider';
-import Screen from './Screen';
+import { Group } from './Group';
+import { isArrayEqual } from './isArrayEqual';
+import { isRecordEqual } from './isRecordEqual';
+import { NavigationHelpersContext } from './NavigationHelpersContext';
+import { NavigationRouteContext } from './NavigationRouteContext';
+import { NavigationStateContext } from './NavigationStateContext';
+import { PreventRemoveProvider } from './PreventRemoveProvider';
+import { Screen } from './Screen';
 import {
   DefaultNavigatorOptions,
   EventMapBase,
@@ -30,20 +30,20 @@ import {
   RouteConfig,
   RouteProp,
 } from './types';
-import useChildListeners from './useChildListeners';
-import useComponent from './useComponent';
-import useCurrentRender from './useCurrentRender';
-import useDescriptors, { ScreenConfigWithParent } from './useDescriptors';
-import useEventEmitter from './useEventEmitter';
-import useFocusedListenersChildrenAdapter from './useFocusedListenersChildrenAdapter';
-import useFocusEvents from './useFocusEvents';
-import useKeyedChildListeners from './useKeyedChildListeners';
-import useNavigationHelpers from './useNavigationHelpers';
-import useOnAction from './useOnAction';
-import useOnGetState from './useOnGetState';
-import useOnRouteFocus from './useOnRouteFocus';
-import useRegisterNavigator from './useRegisterNavigator';
-import useScheduleUpdate from './useScheduleUpdate';
+import { useChildListeners } from './useChildListeners';
+import { useComponent } from './useComponent';
+import { useCurrentRender } from './useCurrentRender';
+import { ScreenConfigWithParent, useDescriptors } from './useDescriptors';
+import { useEventEmitter } from './useEventEmitter';
+import { useFocusedListenersChildrenAdapter } from './useFocusedListenersChildrenAdapter';
+import { useFocusEvents } from './useFocusEvents';
+import { useKeyedChildListeners } from './useKeyedChildListeners';
+import { useNavigationHelpers } from './useNavigationHelpers';
+import { useOnAction } from './useOnAction';
+import { useOnGetState } from './useOnGetState';
+import { useOnRouteFocus } from './useOnRouteFocus';
+import { useRegisterNavigator } from './useRegisterNavigator';
+import { useScheduleUpdate } from './useScheduleUpdate';
 
 // This is to make TypeScript compiler happy
 // eslint-disable-next-line babel/no-unused-expressions
@@ -63,9 +63,9 @@ type NavigationBuilderOptions<ScreenOptions extends {}> = {
       }) => ScreenOptions);
 };
 
-type NavigatorRoute<State extends NavigationState> = {
+type NavigatorRoute = {
   key: string;
-  params?: NavigatorScreenParams<ParamListBase, State>;
+  params?: NavigatorScreenParams<ParamListBase>;
 };
 
 const isValidKey = (key: unknown) =>
@@ -153,7 +153,12 @@ const getRouteConfigsFromChildren = <
           ? `'${
               typeof child.type === 'string' ? child.type : child.type?.name
             }'${
-              child.props?.name ? ` for the screen '${child.props.name}'` : ''
+              child.props != null &&
+              typeof child.props === 'object' &&
+              'name' in child.props &&
+              child.props?.name
+                ? ` for the screen '${child.props.name}'`
+                : ''
             }`
           : typeof child === 'object'
           ? JSON.stringify(child)
@@ -247,7 +252,7 @@ const getRouteConfigsFromChildren = <
  * @param options Options object containing `children` and additional options for the router.
  * @returns An object containing `state`, `navigation`, `descriptors` objects.
  */
-export default function useNavigationBuilder<
+export function useNavigationBuilder<
   State extends NavigationState,
   RouterOptions extends DefaultRouterOptions,
   ActionHelpers extends Record<string, () => void>,
@@ -267,7 +272,7 @@ export default function useNavigationBuilder<
   const navigatorKey = useRegisterNavigator();
 
   const route = React.useContext(NavigationRouteContext) as
-    | NavigatorRoute<State>
+    | NavigatorRoute
     | undefined;
 
   const { children, screenListeners, ...rest } = options;
@@ -417,7 +422,7 @@ export default function useNavigationBuilder<
     } else {
       return [
         router.getRehydratedState(
-          route?.params?.state ?? (currentState as PartialState<State>),
+          (route?.params?.state ?? currentState) as PartialState<State>,
           {
             routeNames,
             routeParamList: initialRouteParamList,

package/src/useNavigationCache.tsx

@@ -7,12 +7,13 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationBuilderContext from './NavigationBuilderContext';
+import { NavigationBuilderContext } from './NavigationBuilderContext';
 import type { NavigationHelpers, NavigationProp } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
 type Options<
   State extends NavigationState,
+  ScreenOptions extends {},
   EventMap extends Record<string, any>
 > = {
   state: State;
@@ -20,7 +21,9 @@ type Options<
   navigation: NavigationHelpers<ParamListBase> &
     Partial<NavigationProp<ParamListBase, string, any, any, any>>;
   setOptions: (
-    cb: (options: Record<string, object>) => Record<string, object>
+    cb: (
+      options: Record<string, ScreenOptions>
+    ) => Record<string, ScreenOptions>
   ) => void;
   router: Router<State, NavigationAction>;
   emitter: NavigationEventEmitter<EventMap>;
@@ -47,7 +50,7 @@ type NavigationCache<
  * It's important to cache them to make sure navigation objects don't change between renders.
  * This lets us apply optimizations like `React.memo` to minimize re-rendering screens.
  */
-export default function useNavigationCache<
+export function useNavigationCache<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends Record<string, any>
@@ -58,7 +61,7 @@ export default function useNavigationCache<
   setOptions,
   router,
   emitter,
-}: Options<State, EventMap>) {
+}: Options<State, ScreenOptions, EventMap>) {
   const { stackRef } = React.useContext(NavigationBuilderContext);
 
   // Cache object which holds navigation objects for each screen
@@ -149,11 +152,12 @@ export default function useNavigationCache<
 
           return rest.getParent(id);
         },
-        setOptions: (options: object) =>
+        setOptions: (options: object) => {
           setOptions((o) => ({
             ...o,
             [route.key]: { ...o[route.key], ...options },
-          })),
+          }));
+        },
         isFocused: () => {
           const state = getState();
 

package/src/useNavigationContainerRef.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 
-import createNavigationContainerRef from './createNavigationContainerRef';
+import { createNavigationContainerRef } from './createNavigationContainerRef';
 import type { NavigationContainerRefWithCurrent } from './types';
 
-export default function useNavigationContainerRef<
+export function useNavigationContainerRef<
   ParamList extends {} = ReactNavigation.RootParamList
 >(): NavigationContainerRefWithCurrent<ParamList> {
   const navigation =

package/src/useNavigationHelpers.tsx

@@ -7,9 +7,9 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationContext from './NavigationContext';
+import { NavigationContext } from './NavigationContext';
 import { NavigationHelpers, PrivateValueStore } from './types';
-import UnhandledActionContext from './UnhandledActionContext';
+import { UnhandledActionContext } from './UnhandledActionContext';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
 // This is to make TypeScript compiler happy
@@ -28,7 +28,7 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
  * Navigation object with helper methods to be used by a navigator.
  * This object includes methods for common actions as well as methods the parent screen's navigation object.
  */
-export default function useNavigationHelpers<
+export function useNavigationHelpers<
   State extends NavigationState,
   ActionHelpers extends Record<string, () => void>,
   Action extends NavigationAction,

package/src/useNavigationIndependentTree.tsx

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

package/src/useNavigationState.tsx

@@ -2,7 +2,7 @@ import type { NavigationState, ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
 import type { NavigationProp } from './types';
-import useNavigation from './useNavigation';
+import { useNavigation } from './useNavigation';
 
 type Selector<ParamList extends ParamListBase, T> = (
   state: NavigationState<ParamList>
@@ -13,7 +13,7 @@ type Selector<ParamList extends ParamListBase, T> = (
  *
  * @param selector Selector function to get a value from the state.
  */
-export default function useNavigationState<ParamList extends ParamListBase, T>(
+export function useNavigationState<ParamList extends ParamListBase, T>(
   selector: Selector<ParamList, T>
 ): T {
   const navigation = useNavigation<NavigationProp<ParamList>>();

package/src/useOnAction.tsx

@@ -7,13 +7,15 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationBuilderContext, {
+import { DeprecatedNavigationInChildContext } from './DeprecatedNavigationInChildContext';
+import {
   ChildActionListener,
   ChildBeforeRemoveListener,
+  NavigationBuilderContext,
 } from './NavigationBuilderContext';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
-import useOnPreventRemove, { shouldPreventRemove } from './useOnPreventRemove';
+import { shouldPreventRemove, useOnPreventRemove } from './useOnPreventRemove';
 
 type Options = {
   router: Router<NavigationState, NavigationAction>;
@@ -35,7 +37,7 @@ type Options = {
  *
  * When the action handler handles as action, it returns `true`, otherwise `false`.
  */
-export default function useOnAction({
+export function useOnAction({
   router,
   getState,
   setState,
@@ -51,6 +53,9 @@ export default function useOnAction({
     addListener: addListenerParent,
     onDispatchAction,
   } = React.useContext(NavigationBuilderContext);
+  const navigationInChildEnabled = React.useContext(
+    DeprecatedNavigationInChildContext
+  );
 
   const routerConfigOptionsRef =
     React.useRef<RouterConfigOptions>(routerConfigOptions);
@@ -126,12 +131,15 @@ export default function useOnAction({
         }
       }
 
-      // If the action wasn't handled by current navigator or a parent navigator, let children handle it
-      for (let i = actionListeners.length - 1; i >= 0; i--) {
-        const listener = actionListeners[i];
+      if (typeof action.target === 'string' || navigationInChildEnabled) {
+        // If the action wasn't handled by current navigator or a parent navigator, let children handle it
+        // Handling this when target isn't specified is deprecated and will be removed in the future
+        for (let i = actionListeners.length - 1; i >= 0; i--) {
+          const listener = actionListeners[i];
 
-        if (listener(action, visitedNavigators)) {
-          return true;
+          if (listener(action, visitedNavigators)) {
+            return true;
+          }
         }
       }
 
@@ -142,6 +150,7 @@ export default function useOnAction({
       beforeRemoveListeners,
       emitter,
       getState,
+      navigationInChildEnabled,
       key,
       onActionParent,
       onDispatchAction,

package/src/useOnGetState.tsx

@@ -1,21 +1,19 @@
 import type { NavigationState } from '@react-navigation/routers';
 import * as React from 'react';
 
-import isArrayEqual from './isArrayEqual';
-import NavigationBuilderContext, {
+import { isArrayEqual } from './isArrayEqual';
+import {
   GetStateListener,
+  NavigationBuilderContext,
 } from './NavigationBuilderContext';
-import NavigationRouteContext from './NavigationRouteContext';
+import { NavigationRouteContext } from './NavigationRouteContext';
 
 type Options = {
   getState: () => NavigationState;
   getStateListeners: Record<string, GetStateListener | undefined>;
 };
 
-export default function useOnGetState({
-  getState,
-  getStateListeners,
-}: Options) {
+export function useOnGetState({ getState, getStateListeners }: Options) {
   const { addKeyedListener } = React.useContext(NavigationBuilderContext);
   const route = React.useContext(NavigationRouteContext);
   const key = route ? route.key : 'root';

package/src/useOnPreventRemove.tsx

@@ -4,10 +4,11 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationBuilderContext, {
+import {
   ChildBeforeRemoveListener,
+  NavigationBuilderContext,
 } from './NavigationBuilderContext';
-import NavigationRouteContext from './NavigationRouteContext';
+import { NavigationRouteContext } from './NavigationRouteContext';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
@@ -72,7 +73,7 @@ export const shouldPreventRemove = (
   return false;
 };
 
-export default function useOnPreventRemove({
+export function useOnPreventRemove({
   getState,
   emitter,
   beforeRemoveListeners,

package/src/useOnRouteFocus.tsx

@@ -5,7 +5,7 @@ import type {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationBuilderContext from './NavigationBuilderContext';
+import { NavigationBuilderContext } from './NavigationBuilderContext';
 
 type Options<Action extends NavigationAction> = {
   router: Router<NavigationState, Action>;
@@ -19,7 +19,7 @@ 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 default function useOnRouteFocus<Action extends NavigationAction>({
+export function useOnRouteFocus<Action extends NavigationAction>({
   router,
   getState,
   key: sourceRouteKey,

package/src/useOptionsGetters.tsx

@@ -1,8 +1,8 @@
 import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationBuilderContext from './NavigationBuilderContext';
-import NavigationStateContext from './NavigationStateContext';
+import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { NavigationStateContext } from './NavigationStateContext';
 import type { NavigationProp } from './types';
 
 type Options = {
@@ -11,11 +11,7 @@ type Options = {
   options?: object | undefined;
 };
 
-export default function useOptionsGetters({
-  key,
-  options,
-  navigation,
-}: Options) {
+export function useOptionsGetters({ key, options, navigation }: Options) {
   const optionsRef = React.useRef<object | undefined>(options);
   const optionsGettersFromChildRef = React.useRef<
     Record<string, () => object | undefined | null>

package/src/usePreventRemove.tsx

@@ -4,9 +4,9 @@ import * as React from 'react';
 import useLatestCallback from 'use-latest-callback';
 
 import type { EventListenerCallback, EventMapCore } from './types';
-import useNavigation from './useNavigation';
-import usePreventRemoveContext from './usePreventRemoveContext';
-import useRoute from './useRoute';
+import { useNavigation } from './useNavigation';
+import { usePreventRemoveContext } from './usePreventRemoveContext';
+import { useRoute } from './useRoute';
 
 /**
  * Hook to prevent screen from being removed. Can be used to prevent users from leaving the screen.
@@ -14,7 +14,7 @@ import useRoute from './useRoute';
  * @param preventRemove Boolean indicating whether to prevent screen from being removed.
  * @param callback Function which is executed when screen was prevented from being removed.
  */
-export default function usePreventRemove(
+export function UNSTABLE_usePreventRemove(
   preventRemove: boolean,
   callback: (options: { data: { action: NavigationAction } }) => void
 ) {

package/src/usePreventRemoveContext.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 
-import PreventRemoveContext from './PreventRemoveContext';
+import { PreventRemoveContext } from './PreventRemoveContext';
 
-export default function usePreventRemoveContext() {
+export function usePreventRemoveContext() {
   const value = React.useContext(PreventRemoveContext);
 
   if (value == null) {

package/src/useRegisterNavigator.tsx

@@ -7,7 +7,7 @@ import { SingleNavigatorContext } from './EnsureSingleNavigator';
  * Register a navigator in the parent context (either a navigation container or a screen).
  * This is used to prevent multiple navigators under a single container or screen.
  */
-export default function useRegisterNavigator() {
+export function useRegisterNavigator() {
   const [key] = React.useState(() => nanoid());
   const container = React.useContext(SingleNavigatorContext);
 

package/src/useRoute.tsx

@@ -1,7 +1,7 @@
 import type { ParamListBase } from '@react-navigation/routers';
 import * as React from 'react';
 
-import NavigationRouteContext from './NavigationRouteContext';
+import { NavigationRouteContext } from './NavigationRouteContext';
 import type { RouteProp } from './types';
 
 /**
@@ -9,7 +9,7 @@ import type { RouteProp } from './types';
  *
  * @returns Route prop of the parent screen.
  */
-export default function useRoute<T extends RouteProp<ParamListBase>>(): T {
+export function useRoute<T extends RouteProp<ParamListBase>>(): T {
   const route = React.useContext(NavigationRouteContext);
 
   if (route === undefined) {

package/src/useRouteCache.tsx

@@ -20,7 +20,7 @@ export const CHILD_STATE = Symbol('CHILD_STATE');
  * Hook to cache route props for each screen in the navigator.
  * This lets add warnings and modifications to the route object but keep references between renders.
  */
-export default function useRouteCache<State extends NavigationState>(
+export function useRouteCache<State extends NavigationState>(
   routes: State['routes']
 ) {
   // Cache object which holds route objects for each screen

package/src/useScheduleUpdate.tsx

@@ -21,7 +21,7 @@ export const ScheduleUpdateContext = React.createContext<{
  * It lets all subsequent updates access the latest state so it stays correct.
  * Then we call setState during after the component updates.
  */
-export default function useScheduleUpdate(callback: () => void) {
+export function useScheduleUpdate(callback: () => void) {
   const { scheduleUpdate, flushUpdates } = React.useContext(
     ScheduleUpdateContext
   );

package/src/useSyncState.tsx

@@ -5,7 +5,7 @@ const UNINTIALIZED_STATE = {};
 /**
  * This is definitely not compatible with concurrent mode, but we don't have a solution for sync state yet.
  */
-export default function useSyncState<T>(initialState?: (() => T) | T) {
+export function useSyncState<T>(initialState?: (() => T) | T) {
   const stateRef = React.useRef<T>(UNINTIALIZED_STATE as any);
   const isSchedulingRef = React.useRef(false);
   const isMountedRef = React.useRef(true);

package/src/validatePathConfig.tsx

@@ -1,7 +1,7 @@
 const formatToList = (items: string[]) =>
   items.map((key) => `- ${key}`).join('\n');
 
-export default function validatePathConfig(config: any, root = true) {
+export function validatePathConfig(config: any, root = true) {
   const validKeys = ['initialRouteName', 'screens'];
 
   if (!root) {