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

package/src/useDescriptors.tsx

@@ -6,11 +6,15 @@ import type {
   Router,
 } from '@react-navigation/routers';
 import * as React from 'react';
+import useLatestCallback from 'use-latest-callback';
 
+import { isArrayEqual } from './isArrayEqual';
+import { isRecordEqual } from './isRecordEqual';
 import {
   type AddKeyedListener,
   type AddListener,
   NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import { NavigationProvider } from './NavigationProvider';
 import { SceneView } from './SceneView';
@@ -67,17 +71,19 @@ type Options<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 > = {
-  routes: State['routes'];
   screens: Record<
     string,
     ScreenConfigWithParent<State, ScreenOptions, EventMap>
   >;
-  navigation: NavigationHelpers<ParamListBase>;
+  state: State;
+  navigation: NavigationHelpers<ParamListBase, State>;
   screenOptions: ScreenOptionsOrCallback<ScreenOptions> | undefined;
   screenLayout: ScreenLayout<ScreenOptions> | undefined;
   onAction: (action: NavigationAction) => boolean;
+  canGoBack: (source?: string) => boolean;
   getState: () => State;
   setState: (state: State) => void;
+  subscribe: (callback: () => void) => () => void;
   addListener: AddListener;
   addKeyedListener: AddKeyedListener;
   onRouteFocus: (key: string) => void;
@@ -85,6 +91,30 @@ type Options<
   emitter: NavigationEventEmitter<EventMap>;
 };
 
+type DescriptorCache<
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase,
+  ActionHelpers extends Record<string, (...args: any) => void>,
+> = Record<
+  string,
+  {
+    descriptor: Descriptor<
+      ScreenOptions,
+      NavigationProp<
+        ParamListBase,
+        string,
+        State,
+        ScreenOptions,
+        EventMap,
+        ActionHelpers
+      >,
+      RouteProp<ParamListBase>
+    >;
+    deps: unknown[];
+  }
+>;
+
 /**
  * Hook to create descriptor objects for the child routes.
  *
@@ -99,59 +129,67 @@ export function useDescriptors<
   ScreenOptions extends {},
   EventMap extends EventMapBase,
 >({
-  routes,
   screens,
+  state,
   navigation,
   screenOptions,
   screenLayout,
   onAction,
+  canGoBack,
   getState,
   setState,
+  subscribe,
   addListener,
   addKeyedListener,
   onRouteFocus,
   router,
   emitter,
 }: Options<State, ScreenOptions, EventMap>) {
-  const theme = React.useContext(ThemeContext);
-  const [options, setOptions] = React.useState<Record<string, ScreenOptions>>(
-    {}
-  );
+  const theme = React.use(ThemeContext);
+
+  const [options, setOptions] = React.useState<
+    Record<string, Partial<ScreenOptions> | undefined>
+  >({});
   const {
     onDispatchAction,
     onEmitEvent,
     onOptionsChange,
     scheduleUpdate,
     flushUpdates,
-    stackRef,
-  } = React.useContext(NavigationBuilderContext);
+    getIsStateEmitted,
+    withStackTrace,
+  } = useNavigationBuilderContext();
 
   const context = React.useMemo(
     () => ({
       navigation,
       onAction,
+      canGoBack,
       addListener,
       addKeyedListener,
       onRouteFocus,
       onDispatchAction,
       onEmitEvent,
       onOptionsChange,
+      getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     }),
     [
       navigation,
       onAction,
+      canGoBack,
       addListener,
       addKeyedListener,
       onRouteFocus,
       onDispatchAction,
       onEmitEvent,
       onOptionsChange,
+      getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
-      stackRef,
+      withStackTrace,
     ]
   );
 
@@ -161,7 +199,8 @@ export function useDescriptors<
     EventMap,
     ActionHelpers
   >({
-    routes,
+    routes: state.routes,
+    canGoBack,
     getState,
     navigation,
     setOptions,
@@ -169,7 +208,15 @@ export function useDescriptors<
     emitter,
   });
 
-  const cachedRoutes = useRouteCache(routes);
+  const cachedRoutes = useRouteCache(state.routes);
+
+  const getFocusedRouteKey = useLatestCallback(
+    () => state.routes[state.index]?.key
+  );
+
+  const cache = React.useMemo<{
+    current: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers>;
+  }>(() => ({ current: {} }), []);
 
   const getOptions = (
     route: RouteProp<ParamListBase, string>,
@@ -180,20 +227,20 @@ export function useDescriptors<
       ScreenOptions,
       EventMap
     >,
-    overrides: Record<string, ScreenOptions>
+    overrides: Partial<ScreenOptions> | undefined
   ) => {
     const config = screens[route.name];
-    const screen = config.props;
+    const screen = config?.props;
 
     const optionsList = [
       // The default `screenOptions` passed to the navigator
       screenOptions,
       // The `screenOptions` props passed to `Group` elements
-      ...((config.options
+      ...((config?.options
         ? config.options.filter(Boolean)
         : []) as ScreenOptionsOrCallback<ScreenOptions>[]),
       // The `options` prop passed to `Screen` elements,
-      screen.options,
+      screen?.options,
       // The options set via `navigation.setOptions`
       overrides,
     ];
@@ -219,15 +266,19 @@ export function useDescriptors<
       EventMap
     >,
     customOptions: ScreenOptions,
-    routeState: NavigationState | PartialState<NavigationState> | undefined
+    routeState: NavigationState | PartialState<NavigationState> | undefined,
+    layout: ScreenLayout<ScreenOptions> | undefined
   ) => {
     const config = screens[route.name];
-    const screen = config.props;
+    const screen = config?.props;
+
+    if (screen == null) {
+      throw new Error(`Couldn't find a screen named '${route.name}'.`);
+    }
 
     const clearOptions = () =>
       setOptions((o) => {
         if (route.key in o) {
-          // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const { [route.key]: _, ...rest } = o;
           return rest;
         }
@@ -235,22 +286,16 @@ export function useDescriptors<
         return o;
       });
 
-    const layout =
-      // The `layout` prop passed to `Screen` elements,
-      screen.layout ??
-      // The `screenLayout` props passed to `Group` elements
-      config.layout ??
-      // The default `screenLayout` passed to the navigator
-      screenLayout;
-
     let element = (
       <SceneView
         navigation={navigation}
         route={route}
         screen={screen}
         routeState={routeState}
+        getFocusedRouteKey={getFocusedRouteKey}
         getState={getState}
         setState={setState}
+        subscribe={subscribe}
         options={customOptions}
         clearOptions={clearOptions}
       />
@@ -276,38 +321,101 @@ export function useDescriptors<
     );
   };
 
+  const next: DescriptorCache<State, ScreenOptions, EventMap, ActionHelpers> =
+    {};
+
   const descriptors = cachedRoutes.reduce<
     Record<
       string,
-      Descriptor<
+      DescriptorCache<
+        State,
         ScreenOptions,
-        NavigationProp<
-          ParamListBase,
-          string,
-          State,
-          ScreenOptions,
-          EventMap,
-          ActionHelpers
-        >,
-        RouteProp<ParamListBase>
-      >
+        EventMap,
+        ActionHelpers
+      >[string]['descriptor']
     >
   >((acc, route, i) => {
     const navigation = navigations[route.key];
-    const customOptions = getOptions(route, navigation, options[route.key]);
-    const element = render(route, navigation, customOptions, routes[i]?.state);
+    const overrides = options[route.key];
+
+    if (navigation == null) {
+      throw new Error(
+        `Couldn't find a navigation object for route '${route.key}'.`
+      );
+    }
+
+    const customOptions = getOptions(route, navigation, overrides);
 
-    acc[route.key] = {
+    const routeState = state.routes[i]?.state;
+    const config = screens[route.name];
+    const screen = config?.props;
+
+    const layout =
+      // The `layout` prop passed to `Screen` elements,
+      screen?.layout ??
+      // The `screenLayout` props passed to `Group` elements
+      config?.layout ??
+      // The default `screenLayout` passed to the navigator
+      screenLayout;
+
+    const deps = [
+      route,
+      navigation,
+      routeState,
+      screen?.component,
+      screen?.getComponent,
+      screen?.children,
+      layout,
+      context,
+      theme,
+      getFocusedRouteKey,
+      getState,
+      setState,
+      subscribe,
+    ];
+
+    const previous = cache.current[route.key];
+
+    if (
+      previous &&
+      isArrayEqual(previous.deps, deps) &&
+      isRecordEqual(previous.descriptor.options, customOptions)
+    ) {
+      next[route.key] = previous;
+      acc[route.key] = previous.descriptor;
+
+      return acc;
+    }
+
+    const element = render(
+      route,
+      navigation,
+      customOptions,
+      routeState,
+      layout
+    );
+
+    const descriptor = {
       route,
       navigation,
       render() {
         return element;
       },
-      options: customOptions as ScreenOptions,
+      options: customOptions,
+    };
+
+    acc[route.key] = descriptor;
+    next[route.key] = {
+      descriptor,
+      deps,
     };
 
     return acc;
   }, {});
 
+  React.useInsertionEffect(() => {
+    cache.current = next;
+  });
+
   return descriptors;
 }

package/src/useEventEmitter.tsx

@@ -13,12 +13,15 @@ type Listeners = Set<(e: any) => void>;
  * Hook to manage the event system used by the navigator to notify screens of various events.
  */
 export function useEventEmitter<T extends Record<string, any>>(
-  listen?: (e: any) => void
+  listen?: (e: any) => void,
+  onPostEmit?: (e: any) => void
 ): NavigationEventEmitter<T> {
   const listenRef = React.useRef(listen);
+  const onPostEmitRef = React.useRef(onPostEmit);
 
-  React.useEffect(() => {
+  React.useInsertionEffect(() => {
     listenRef.current = listen;
+    onPostEmitRef.current = onPostEmit;
   });
 
   const listeners = React.useRef<Record<string, Record<string, Listeners>>>(
@@ -56,65 +59,76 @@ export function useEventEmitter<T extends Record<string, any>>(
     }: {
       type: string;
       data?: any;
-      target?: string;
+      target?: string | undefined;
       canPreventDefault?: boolean;
     }) => {
-      const items = listeners.current[type] || {};
+      const items = listeners.current[type];
 
       // Copy the current list of callbacks in case they are mutated during execution
-      const callbacks = new Set(
-        Object.values(target ? { [target]: items[target] } : items).flatMap(
-          (t) => (t ? Array.from(t) : [])
-        )
-      );
+      let callbacks: Set<(e: any) => void> | undefined;
+
+      if (items) {
+        if (target !== undefined) {
+          const targetSet = items[target];
+
+          if (targetSet && targetSet.size) {
+            callbacks = new Set(targetSet);
+          }
+        } else {
+          for (const key in items) {
+            const set = items[key];
+
+            if (set && set.size) {
+              callbacks ??= new Set();
+
+              for (const cb of set) {
+                callbacks.add(cb);
+              }
+            }
+          }
+        }
+      }
 
-      const event: EventArg<any, any, any> = {
-        get type() {
-          return type;
-        },
+      const descriptors: PropertyDescriptorMap = {
+        type: { enumerable: true, value: type },
       };
 
       if (target !== undefined) {
-        Object.defineProperty(event, 'target', {
-          enumerable: true,
-          get() {
-            return target;
-          },
-        });
+        descriptors.target = { enumerable: true, value: target };
       }
 
       if (data !== undefined) {
-        Object.defineProperty(event, 'data', {
-          enumerable: true,
-          get() {
-            return data;
-          },
-        });
+        descriptors.data = { enumerable: true, value: data };
       }
 
+      let defaultPrevented = false;
+
       if (canPreventDefault) {
-        let defaultPrevented = false;
-
-        Object.defineProperties(event, {
-          defaultPrevented: {
-            enumerable: true,
-            get() {
-              return defaultPrevented;
-            },
+        descriptors.defaultPrevented = {
+          enumerable: true,
+          get() {
+            return defaultPrevented;
           },
-          preventDefault: {
-            enumerable: true,
-            value() {
-              defaultPrevented = true;
-            },
+        };
+        descriptors.preventDefault = {
+          enumerable: true,
+          value() {
+            defaultPrevented = true;
           },
-        });
+        };
       }
 
+      const event: EventArg<any, any, any> = Object.defineProperties(
+        {} as EventArg<any, any, any>,
+        descriptors
+      );
+
       listenRef.current?.(event);
 
       callbacks?.forEach((cb) => cb(event));
 
+      onPostEmitRef.current?.(event);
+
       return event as any;
     },
     []

package/src/useFocusEffect.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { IsFocusedGetterContext } from './useIsFocused';
 import { useNavigation } from './useNavigation';
 
 type EffectCallback = () => undefined | void | (() => void);
@@ -14,6 +15,8 @@ type EffectCallback = () => undefined | void | (() => void);
 export function useFocusEffect(effect: EffectCallback) {
   const navigation = useNavigation();
 
+  const getIsFocused = React.use(IsFocusedGetterContext);
+
   // eslint-disable-next-line prefer-rest-params
   if (arguments[1] !== undefined) {
     const message =
@@ -72,7 +75,7 @@ export function useFocusEffect(effect: EffectCallback) {
     };
 
     // We need to run the effect on initial render/dep changes if the screen is focused
-    if (navigation.isFocused()) {
+    if (getIsFocused?.() ?? true) {
       cleanup = callback();
       isFocused = true;
     }
@@ -109,5 +112,5 @@ export function useFocusEffect(effect: EffectCallback) {
       unsubscribeFocus();
       unsubscribeBlur();
     };
-  }, [effect, navigation]);
+  }, [effect, navigation, getIsFocused]);
 }

package/src/useFocusEvents.tsx

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { NavigationContext } from './NavigationProvider';
 import type { EventMapCore } from './types';
 import type { NavigationEventEmitter } from './useEventEmitter';
+import { IsFocusedGetterContext } from './useIsFocused';
 
 type Options<State extends NavigationState> = {
   state: State;
@@ -17,10 +18,18 @@ export function useFocusEvents<State extends NavigationState>({
   state,
   emitter,
 }: Options<State>) {
-  const navigation = React.useContext(NavigationContext);
+  const navigation = React.use(NavigationContext);
+  const getIsFocused = React.use(IsFocusedGetterContext);
+
   const lastFocusedKeyRef = React.useRef<string | undefined>(undefined);
 
-  const currentFocusedKey = state.routes[state.index].key;
+  const currentFocusedRoute = state.routes[state.index];
+
+  if (currentFocusedRoute == null) {
+    throw new Error(`Couldn't find a route at index ${state.index}.`);
+  }
+
+  const currentFocusedKey = currentFocusedRoute.key;
 
   // When the parent screen changes its focus state, we also need to change child's focus
   // Coz the child screen can't be focused if the parent screen is out of focus
@@ -45,7 +54,12 @@ export function useFocusEvents<State extends NavigationState>({
   React.useEffect(() => {
     const lastFocusedKey = lastFocusedKeyRef.current;
 
-    lastFocusedKeyRef.current = currentFocusedKey;
+    const isFocused = getIsFocused?.() ?? true;
+
+    if (isFocused) {
+      // Remember the current route as focused if the navigator is focused
+      lastFocusedKeyRef.current = currentFocusedKey;
+    }
 
     // We wouldn't have `lastFocusedKey` on initial mount
     // Fire focus event for the current route on mount if there's no parent navigator
@@ -55,10 +69,7 @@ export function useFocusEvents<State extends NavigationState>({
 
     // We should only emit events when the focused key changed and navigator is focused
     // When navigator is not focused, screens inside shouldn't receive focused status either
-    if (
-      lastFocusedKey === currentFocusedKey ||
-      !(navigation ? navigation.isFocused() : true)
-    ) {
+    if (lastFocusedKey === currentFocusedKey || !isFocused) {
       return;
     }
 
@@ -69,5 +80,5 @@ export function useFocusEvents<State extends NavigationState>({
 
     emitter.emit({ type: 'blur', target: lastFocusedKey });
     emitter.emit({ type: 'focus', target: currentFocusedKey });
-  }, [currentFocusedKey, emitter, navigation]);
+  }, [currentFocusedKey, emitter, navigation, getIsFocused]);
 }

package/src/useFocusedListenersChildrenAdapter.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {
   type FocusedNavigationCallback,
   type FocusedNavigationListener,
-  NavigationBuilderContext,
+  useNavigationBuilderContext,
 } from './NavigationBuilderContext';
 import type { NavigationHelpers } from './types';
 
@@ -20,7 +20,7 @@ export function useFocusedListenersChildrenAdapter({
   navigation,
   focusedListeners,
 }: Options) {
-  const { addListener } = React.useContext(NavigationBuilderContext);
+  const { addListener } = useNavigationBuilderContext();
 
   const listener = React.useCallback(
     (callback: FocusedNavigationCallback<any>) => {
@@ -41,7 +41,7 @@ export function useFocusedListenersChildrenAdapter({
     [focusedListeners, navigation]
   );
 
-  React.useEffect(
+  React.useInsertionEffect(
     () => addListener?.('focus', listener),
     [addListener, listener]
   );

package/src/useIsFocused.tsx

@@ -1,32 +1,29 @@
 import * as React from 'react';
 
-import { useNavigation } from './useNavigation';
+export const FocusedRouteKeyContext = React.createContext<string | undefined>(
+  undefined
+);
+
+export const IsFocusedContext = React.createContext<boolean | undefined>(
+  undefined
+);
+
+export const IsFocusedGetterContext = React.createContext<
+  (() => boolean) | undefined
+>(undefined);
 
 /**
  * Hook to get the current focus state of the screen. Returns a `true` if screen is focused, otherwise `false`.
  * This can be used if a component needs to render something based on the focus state.
  */
 export function useIsFocused(): boolean {
-  const navigation = useNavigation();
-
-  const subscribe = React.useCallback(
-    (callback: () => void) => {
-      const unsubscribeFocus = navigation.addListener('focus', callback);
-      const unsubscribeBlur = navigation.addListener('blur', callback);
-
-      return () => {
-        unsubscribeFocus();
-        unsubscribeBlur();
-      };
-    },
-    [navigation]
-  );
+  const isFocused = React.use(IsFocusedContext);
 
-  const value = React.useSyncExternalStore(
-    subscribe,
-    navigation.isFocused,
-    navigation.isFocused
-  );
+  if (isFocused === undefined) {
+    throw new Error(
+      "Couldn't determine focus state. Is your component inside a screen in a navigator?"
+    );
+  }
 
-  return value;
+  return isFocused;
 }

package/src/useKeyedChildListeners.tsx

@@ -14,6 +14,7 @@ export function useKeyedChildListeners() {
   }>(
     Object.assign(Object.create(null), {
       getState: {},
+      getNavigation: {},
       beforeRemove: {},
     })
   );
@@ -28,8 +29,10 @@ export function useKeyedChildListeners() {
       keyedListeners[type][key] = listener;
 
       return () => {
-        // @ts-expect-error: according to ref stated above you can use `key` to index type
-        keyedListeners[type][key] = undefined;
+        if (keyedListeners[type][key] === listener) {
+          // @ts-expect-error: according to ref stated above you can use `key` to index type
+          keyedListeners[type][key] = undefined;
+        }
       };
     },
     [keyedListeners]

package/src/useLazyValue.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 
-export function useLazyValue<T>(create: () => T) {
+export function useLazyValue<T>(create: () => T): T {
   const lazyRef = React.useRef<T>(undefined);
 
   if (lazyRef.current === undefined) {
     lazyRef.current = create();
   }
 
-  return lazyRef.current as T;
+  return lazyRef.current;
 }