@react-navigation/core 7.14.0 → 8.0.0-alpha.1

package/src/useChildListeners.tsx

@@ -6,18 +6,19 @@ import type { ListenerMap } from './NavigationBuilderContext';
  * Hook which lets child navigators add action listeners.
  */
 export function useChildListeners() {
-  const { current: listeners } = React.useRef<{
+  const listeners = React.useRef<{
     [K in keyof ListenerMap]: ListenerMap[K][];
   }>({
     action: [],
     focus: [],
-  });
+  }).current;
 
   const addListener = React.useCallback(
     <T extends keyof ListenerMap>(type: T, listener: ListenerMap[T]) => {
       listeners[type].push(listener);
 
       let removed = false;
+
       return () => {
         const index = listeners[type].indexOf(listener);
 

package/src/useDescriptors.tsx

@@ -12,8 +12,7 @@ import {
   type AddListener,
   NavigationBuilderContext,
 } from './NavigationBuilderContext';
-import { NavigationContext } from './NavigationContext';
-import { NavigationRouteContext } from './NavigationRouteContext';
+import { NavigationProvider } from './NavigationProvider';
 import { SceneView } from './SceneView';
 import { ThemeContext } from './theming/ThemeContext';
 import type {
@@ -23,6 +22,7 @@ import type {
   NavigationProp,
   RouteConfig,
   RouteProp,
+  Theme,
 } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 import { useNavigationCache } from './useNavigationCache';
@@ -50,7 +50,7 @@ type ScreenLayout<ScreenOptions extends {}> = (props: {
   route: RouteProp<ParamListBase, string>;
   options: ScreenOptions;
   navigation: any;
-  theme: ReactNavigation.Theme;
+  theme: Theme;
   children: React.ReactElement;
 }) => React.ReactElement;
 
@@ -59,7 +59,7 @@ type ScreenOptionsOrCallback<ScreenOptions extends {}> =
   | ((props: {
       route: RouteProp<ParamListBase, string>;
       navigation: any;
-      theme: ReactNavigation.Theme;
+      theme: Theme;
     }) => ScreenOptions);
 
 type Options<
@@ -95,7 +95,7 @@ type Options<
  */
 export function useDescriptors<
   State extends NavigationState,
-  ActionHelpers extends Record<string, () => void>,
+  ActionHelpers extends Record<string, (...args: any) => void>,
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 >({
@@ -173,7 +173,6 @@ export function useDescriptors<
     navigation: NavigationProp<
       ParamListBase,
       string,
-      string | undefined,
       State,
       ScreenOptions,
       EventMap
@@ -212,7 +211,6 @@ export function useDescriptors<
     navigation: NavigationProp<
       ParamListBase,
       string,
-      string | undefined,
       State,
       ScreenOptions,
       EventMap
@@ -268,11 +266,9 @@ export function useDescriptors<
 
     return (
       <NavigationBuilderContext.Provider key={route.key} value={context}>
-        <NavigationContext.Provider value={navigation}>
-          <NavigationRouteContext.Provider value={route}>
-            {element}
-          </NavigationRouteContext.Provider>
-        </NavigationContext.Provider>
+        <NavigationProvider navigation={navigation} route={route}>
+          {element}
+        </NavigationProvider>
       </NavigationBuilderContext.Provider>
     );
   };
@@ -285,12 +281,11 @@ export function useDescriptors<
         NavigationProp<
           ParamListBase,
           string,
-          string | undefined,
           State,
           ScreenOptions,
-          EventMap
-        > &
-          ActionHelpers,
+          EventMap,
+          ActionHelpers
+        >,
         RouteProp<ParamListBase>
       >
     >
@@ -306,7 +301,6 @@ export function useDescriptors<
 
     acc[route.key] = {
       route,
-      // @ts-expect-error: it's missing action helpers, fix later
       navigation,
       render() {
         return element;

package/src/useEventEmitter.tsx

@@ -7,7 +7,7 @@ export type NavigationEventEmitter<T extends Record<string, any>> =
     create: (target: string) => EventConsumer<T>;
   };
 
-type Listeners = ((e: any) => void)[];
+type Listeners = Set<(e: any) => void>;
 
 /**
  * Hook to manage the event system used by the navigator to notify screens of various events.
@@ -27,34 +27,18 @@ export function useEventEmitter<T extends Record<string, any>>(
 
   const create = React.useCallback((target: string) => {
     const removeListener = (type: string, callback: (data: any) => void) => {
-      const callbacks = listeners.current[type]
-        ? listeners.current[type][target]
-        : undefined;
+      const callbacks = listeners.current[type]?.[target];
 
-      if (!callbacks) {
-        return;
-      }
-
-      const index = callbacks.indexOf(callback);
-
-      if (index > -1) {
-        callbacks.splice(index, 1);
-      }
+      callbacks?.delete(callback);
     };
 
     const addListener = (type: string, callback: (data: any) => void) => {
-      listeners.current[type] = listeners.current[type] || {};
-      listeners.current[type][target] = listeners.current[type][target] || [];
-      listeners.current[type][target].push(callback);
-
-      let removed = false;
-      return () => {
-        // Prevent removing other listeners when unsubscribing same listener multiple times
-        if (!removed) {
-          removed = true;
-          removeListener(type, callback);
-        }
-      };
+      listeners.current[type] ??= {};
+      listeners.current[type][target] ??= new Set();
+
+      listeners.current[type][target].add(callback);
+
+      return () => removeListener(type, callback);
     };
 
     return {
@@ -78,12 +62,11 @@ export function useEventEmitter<T extends Record<string, any>>(
       const items = listeners.current[type] || {};
 
       // Copy the current list of callbacks in case they are mutated during execution
-      const callbacks =
-        target !== undefined
-          ? items[target]?.slice()
-          : ([] as Listeners)
-              .concat(...Object.keys(items).map((t) => items[t]))
-              .filter((cb, i, self) => self.lastIndexOf(cb) === i);
+      const callbacks = new Set(
+        Object.values(target ? { [target]: items[target] } : items).flatMap(
+          (t) => (t ? Array.from(t) : [])
+        )
+      );
 
       const event: EventArg<any, any, any> = {
         get type() {

package/src/useFocusEvents.tsx

@@ -1,7 +1,7 @@
 import type { NavigationState } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationContext } from './NavigationContext';
+import { NavigationContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 

package/src/useNavigation.tsx

@@ -1,29 +1,72 @@
-import { type NavigationState } from '@react-navigation/routers';
 import * as React from 'react';
 
 import { NavigationContainerRefContext } from './NavigationContainerRefContext';
-import { NavigationContext } from './NavigationContext';
-import type { NavigationProp } from './types';
+import {
+  NavigationContext,
+  NavigationRouteNameContext,
+} from './NavigationProvider';
+import type {
+  GenericNavigation,
+  NavigationListForNavigator,
+  NavigationListForNested,
+  RootNavigator,
+  RootParamList,
+} from './types';
 
 /**
  * Hook to access the navigation prop of the parent screen anywhere.
  *
+ * If the route name of the current or one of the parents is specified,
+ * the navigation prop for that route is returned.
+ *
  * @returns Navigation prop of the parent screen.
  */
+export function useNavigation(): GenericNavigation<RootParamList>;
+export function useNavigation<
+  const Navigator = RootNavigator,
+>(): NavigationListForNavigator<Navigator>[keyof NavigationListForNavigator<Navigator>];
 export function useNavigation<
-  T = Omit<NavigationProp<ReactNavigation.RootParamList>, 'getState'> & {
-    getState(): NavigationState | undefined;
-  },
->(): T {
-  const root = React.useContext(NavigationContainerRefContext);
-  const navigation = React.useContext(NavigationContext);
-
-  if (navigation === undefined && root === undefined) {
+  const Navigator = RootNavigator,
+  const RouteName extends
+    keyof NavigationListForNested<Navigator> = keyof NavigationListForNested<Navigator>,
+>(name: RouteName): NavigationListForNested<Navigator>[RouteName];
+export function useNavigation(name?: string): unknown {
+  const root = React.use(NavigationContainerRefContext);
+  const navigation = React.use(NavigationContext);
+
+  if (name === undefined) {
+    if (navigation === undefined && root === undefined) {
+      throw new Error(
+        "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+      );
+    }
+
+    return navigation ?? root;
+  }
+
+  const routeName = React.use(NavigationRouteNameContext);
+
+  // Generally, this condition isn't needed as `getParent(name)` works for current screen
+  // However, it'll throw if the hook is used in a preloaded screen
+  if (routeName === name) {
+    if (navigation === undefined) {
+      throw new Error(
+        `Couldn't find a navigation object for '${name}'. This is not expected.`
+      );
+    }
+
+    return navigation;
+  }
+
+  // We get parent first so that `getParent(name)` is not called in preloaded screens
+  // It's ok since `getParent` also works for current screen, so parent is not skipped
+  const parent = navigation?.getParent()?.getParent(name);
+
+  if (parent === undefined) {
     throw new Error(
-      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+      `Couldn't find a navigation object for '${name}' in current or any parent screens. Is your component inside the correct screen?`
     );
   }
 
-  // FIXME: Figure out a better way to do this
-  return (navigation ?? root) as unknown as T;
+  return parent;
 }

package/src/useNavigationBuilder.tsx

@@ -21,7 +21,7 @@ import { isArrayEqual } from './isArrayEqual';
 import { isRecordEqual } from './isRecordEqual';
 import { NavigationHelpersContext } from './NavigationHelpersContext';
 import { NavigationMetaContext } from './NavigationMetaContext';
-import { NavigationRouteContext } from './NavigationRouteContext';
+import { NavigationRouteContext } from './NavigationProvider';
 import { NavigationStateContext } from './NavigationStateContext';
 import { PreventRemoveProvider } from './PreventRemoveProvider';
 import { Screen } from './Screen';
@@ -35,7 +35,6 @@ import {
 } from './types';
 import { UnhandledActionContext } from './UnhandledActionContext';
 import { useChildListeners } from './useChildListeners';
-import { useClientLayoutEffect } from './useClientLayoutEffect';
 import { useComponent } from './useComponent';
 import { useCurrentRender } from './useCurrentRender';
 import { type ScreenConfigWithParent, useDescriptors } from './useDescriptors';
@@ -311,7 +310,6 @@ export function useNavigationBuilder<
   createRouter: RouterFactory<State, NavigationAction, RouterOptions>,
   options: DefaultNavigatorOptions<
     ParamListBase,
-    string | undefined,
     State,
     ScreenOptions,
     EventMap,
@@ -331,7 +329,7 @@ export function useNavigationBuilder<
     screenOptions,
     screenLayout,
     screenListeners,
-    UNSTABLE_router,
+    router: routerOverrides,
     ...rest
   } = options;
 
@@ -355,8 +353,8 @@ export function useNavigationBuilder<
 
     const original = createRouter(rest as unknown as RouterOptions);
 
-    if (UNSTABLE_router != null) {
-      const overrides = UNSTABLE_router(original);
+    if (routerOverrides != null) {
+      const overrides = routerOverrides(original);
 
       return {
         ...original,
@@ -520,7 +518,7 @@ export function useNavigationBuilder<
       );
 
       if (
-        options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
+        options.routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(stateBeforeInitialization)
       ) {
         return [stateBeforeInitialization, hydratedState, true];
@@ -553,7 +551,7 @@ export function useNavigationBuilder<
   // It's possible that they were absent due to conditional render
   // Store this state so we can reuse it if the routes change later
   if (
-    options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
+    options.routeNamesChangeBehavior === 'lastUnhandled' &&
     stateBeforeInitialization &&
     unhandledState !== stateBeforeInitialization
   ) {
@@ -621,7 +619,7 @@ export function useNavigationBuilder<
       route.params !== previousParams
     ) {
       if (
-        options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
+        options.routeNamesChangeBehavior === 'lastUnhandled' &&
         doesStateHaveOnlyInvalidRoutes(route.params.state)
       ) {
         if (route.params.state !== unhandledState) {
@@ -637,7 +635,7 @@ export function useNavigationBuilder<
         route.params !== previousParams)
     ) {
       if (
-        options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
+        options.routeNamesChangeBehavior === 'lastUnhandled' &&
         !routeNames.includes(route.params.screen)
       ) {
         const state = getStateFromParams(route.params);
@@ -730,7 +728,7 @@ export function useNavigationBuilder<
 
   stateRef.current = state;
 
-  useClientLayoutEffect(() => {
+  React.useLayoutEffect(() => {
     stateRef.current = null;
   });
 
@@ -833,7 +831,7 @@ export function useNavigationBuilder<
 
   const onUnhandledAction = useLatestCallback((action: NavigationAction) => {
     if (
-      options.UNSTABLE_routeNamesChangeBehavior === 'lastUnhandled' &&
+      options.routeNamesChangeBehavior === 'lastUnhandled' &&
       action.type === 'NAVIGATE' &&
       action.payload != null &&
       'name' in action.payload &&
@@ -871,7 +869,6 @@ export function useNavigationBuilder<
     NavigationAction,
     EventMap
   >({
-    id: options.id,
     onAction,
     onUnhandledAction,
     getState,

package/src/useNavigationCache.tsx

@@ -8,6 +8,7 @@ import {
 import * as React from 'react';
 
 import { NavigationBuilderContext } from './NavigationBuilderContext';
+import { NavigationContext } from './NavigationProvider';
 import type { NavigationHelpers, NavigationProp } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
@@ -33,20 +34,25 @@ type NavigationItem<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends Record<string, any>,
+  ActionHelpers extends Record<string, (...args: any) => void>,
 > = NavigationProp<
   ParamListBase,
   string,
-  string | undefined,
   State,
   ScreenOptions,
-  EventMap
+  EventMap,
+  ActionHelpers
 >;
 
 type NavigationCache<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends Record<string, any>,
-> = Record<string, NavigationItem<State, ScreenOptions, EventMap>>;
+  ActionHelpers extends Record<string, (...args: any) => void>,
+> = Record<
+  string,
+  NavigationItem<State, ScreenOptions, EventMap, ActionHelpers>
+>;
 
 /**
  * Hook to cache navigation objects for each screen in the navigator.
@@ -57,7 +63,7 @@ export function useNavigationCache<
   State extends NavigationState,
   ScreenOptions extends {},
   EventMap extends Record<string, any>,
-  ActionHelpers extends Record<string, () => void>,
+  ActionHelpers extends Record<string, (...args: any) => void>,
 >({
   state,
   getState,
@@ -66,12 +72,14 @@ export function useNavigationCache<
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
+  const parentNavigationHelpers = React.useContext(NavigationContext);
   const { stackRef } = React.useContext(NavigationBuilderContext);
 
   const base = React.useMemo((): NavigationItem<
     State,
     ScreenOptions,
-    EventMap
+    EventMap,
+    ActionHelpers
   > &
     ActionHelpers => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -97,6 +105,7 @@ export function useNavigationCache<
       {}
     ) as ActionHelpers;
 
+    // @ts-expect-error: type of getParent does not match
     return {
       ...rest,
       ...helpers,
@@ -111,31 +120,40 @@ export function useNavigationCache<
         // Event listeners are not supported for placeholder screens
       },
       dispatch,
-      getParent: (id?: string) => {
-        if (id !== undefined && id === rest.getId()) {
-          return base;
+      getParent: (routeName) => {
+        if (routeName !== undefined) {
+          throw new Error(
+            'Getting parent by route name is not supported from a placeholder screen.'
+          );
         }
 
-        return rest.getParent(id);
+        return parentNavigationHelpers;
       },
       setOptions: () => {
         throw new Error('Options cannot be set from a placeholder screen.');
       },
       isFocused: () => false,
     };
-  }, [navigation, router.actionCreators]);
+  }, [parentNavigationHelpers, navigation, router.actionCreators]);
 
   // Cache object which holds navigation objects for each screen
   // We use `React.useMemo` instead of `React.useRef` coz we want to invalidate it when deps change
   // In reality, these deps will rarely change, if ever
   const cache = React.useMemo(
-    () => ({ current: {} as NavigationCache<State, ScreenOptions, EventMap> }),
+    () => ({
+      current: {} as NavigationCache<
+        State,
+        ScreenOptions,
+        EventMap,
+        ActionHelpers
+      >,
+    }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [base, getState, navigation, setOptions, emitter]
+    [base, getState, parentNavigationHelpers, navigation, setOptions, emitter]
   );
 
   cache.current = state.routes.reduce<
-    NavigationCache<State, ScreenOptions, EventMap>
+    NavigationCache<State, ScreenOptions, EventMap, ActionHelpers>
   >((acc, route) => {
     const previous = cache.current[route.key];
 
@@ -201,14 +219,18 @@ export function useNavigationCache<
         // FIXME: too much work to fix the types for now
         ...(emitter.create(route.key) as any),
         dispatch: (thunk: Thunk) => withStack(() => dispatch(thunk)),
-        getParent: (id?: string) => {
-          if (id !== undefined && id === base.getId()) {
-            // If the passed id is the same as the current navigation id,
-            // we return the cached navigation object for the relevant route
+        getParent: (routeName) => {
+          if (routeName === route.name) {
+            // If the passed route name is the same as the current route's name,
+            // we return the cached navigation object for the route
             return acc[route.key];
           }
 
-          return base.getParent(id);
+          if (routeName !== undefined) {
+            return parentNavigationHelpers?.getParent(routeName);
+          }
+
+          return parentNavigationHelpers;
         },
         setOptions: (options: object) => {
           setOptions((o) => ({

package/src/useNavigationContainerRef.tsx

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

package/src/useNavigationHelpers.tsx

@@ -7,7 +7,7 @@ import {
 } from '@react-navigation/routers';
 import * as React from 'react';
 
-import { NavigationContext } from './NavigationContext';
+import { NavigationContext } from './NavigationProvider';
 import { type NavigationHelpers, PrivateValueStore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
 
@@ -16,7 +16,6 @@ import type { NavigationEventEmitter } from './useEventEmitter';
 PrivateValueStore;
 
 type Options<State extends NavigationState, Action extends NavigationAction> = {
-  id: string | undefined;
   onAction: (action: NavigationAction) => boolean;
   onUnhandledAction: (action: NavigationAction) => void;
   getState: () => State;
@@ -31,11 +30,10 @@ type Options<State extends NavigationState, Action extends NavigationAction> = {
  */
 export function useNavigationHelpers<
   State extends NavigationState,
-  ActionHelpers extends Record<string, () => void>,
+  ActionHelpers extends Record<string, (...args: any) => void>,
   Action extends NavigationAction,
   EventMap extends Record<string, any>,
 >({
-  id: navigatorId,
   onAction,
   onUnhandledAction,
   getState,
@@ -88,20 +86,6 @@ export function useNavigationHelpers<
           false
         );
       },
-      getId: () => navigatorId,
-      getParent: (id?: string) => {
-        if (id !== undefined) {
-          let current = navigationHelpers;
-
-          while (current && id !== current.getId()) {
-            current = current.getParent();
-          }
-
-          return current;
-        }
-
-        return parentNavigationHelpers;
-      },
       getState: (): State => {
         // FIXME: Workaround for when the state is read during render
         // By this time, we haven't committed the new state yet
@@ -124,7 +108,6 @@ export function useNavigationHelpers<
     getState,
     onAction,
     onUnhandledAction,
-    navigatorId,
     stateRef,
   ]);
 }