@react-navigation/core 8.0.0-alpha.3 → 8.0.0-alpha.31

package/src/useDescriptors.tsx

@@ -78,6 +78,7 @@ type Options<
   onAction: (action: NavigationAction) => boolean;
   getState: () => State;
   setState: (state: State) => void;
+  subscribe: (callback: () => void) => () => void;
   addListener: AddListener;
   addKeyedListener: AddKeyedListener;
   onRouteFocus: (key: string) => void;
@@ -107,16 +108,17 @@ export function useDescriptors<
   onAction,
   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,
@@ -124,7 +126,8 @@ export function useDescriptors<
     scheduleUpdate,
     flushUpdates,
     stackRef,
-  } = React.useContext(NavigationBuilderContext);
+    getIsStateEmitted,
+  } = React.use(NavigationBuilderContext);
 
   const context = React.useMemo(
     () => ({
@@ -136,6 +139,7 @@ export function useDescriptors<
       onDispatchAction,
       onEmitEvent,
       onOptionsChange,
+      getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
       stackRef,
@@ -149,6 +153,7 @@ export function useDescriptors<
       onDispatchAction,
       onEmitEvent,
       onOptionsChange,
+      getIsStateEmitted,
       scheduleUpdate,
       flushUpdates,
       stackRef,
@@ -180,20 +185,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,
     ];
@@ -222,12 +227,15 @@ export function useDescriptors<
     routeState: NavigationState | PartialState<NavigationState> | 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;
         }
@@ -239,7 +247,7 @@ export function useDescriptors<
       // The `layout` prop passed to `Screen` elements,
       screen.layout ??
       // The `screenLayout` props passed to `Group` elements
-      config.layout ??
+      config?.layout ??
       // The default `screenLayout` passed to the navigator
       screenLayout;
 
@@ -251,6 +259,7 @@ export function useDescriptors<
         routeState={routeState}
         getState={getState}
         setState={setState}
+        subscribe={subscribe}
         options={customOptions}
         clearOptions={clearOptions}
       />
@@ -294,7 +303,15 @@ export function useDescriptors<
     >
   >((acc, route, i) => {
     const navigation = navigations[route.key];
-    const customOptions = getOptions(route, navigation, options[route.key]);
+    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);
     const element = render(route, navigation, customOptions, routes[i]?.state);
 
     acc[route.key] = {
@@ -303,7 +320,7 @@ export function useDescriptors<
       render() {
         return element;
       },
-      options: customOptions as ScreenOptions,
+      options: customOptions,
     };
 
     return acc;

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>>>(
@@ -59,62 +62,73 @@ export function useEventEmitter<T extends Record<string, any>>(
       target?: string;
       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/useFocusEvents.tsx

@@ -17,10 +17,16 @@ export function useFocusEvents<State extends NavigationState>({
   state,
   emitter,
 }: Options<State>) {
-  const navigation = React.useContext(NavigationContext);
+  const navigation = React.use(NavigationContext);
   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 +51,12 @@ export function useFocusEvents<State extends NavigationState>({
   React.useEffect(() => {
     const lastFocusedKey = lastFocusedKeyRef.current;
 
-    lastFocusedKeyRef.current = currentFocusedKey;
+    const isFocused = navigation ? navigation.isFocused() : 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 +66,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;
     }
 

package/src/useFocusedListenersChildrenAdapter.tsx

@@ -20,7 +20,7 @@ export function useFocusedListenersChildrenAdapter({
   navigation,
   focusedListeners,
 }: Options) {
-  const { addListener } = React.useContext(NavigationBuilderContext);
+  const { addListener } = React.use(NavigationBuilderContext);
 
   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,25 @@
 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
+);
 
 /**
  * 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

@@ -28,8 +28,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;
 }

package/src/useNavigation.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
 
 import { NavigationContainerRefContext } from './NavigationContainerRefContext';
-import {
-  NavigationContext,
-  NavigationRouteNameContext,
-} from './NavigationProvider';
+import { NavigationContext } from './NavigationProvider';
 import type {
   GenericNavigation,
   NavigationListForNavigator,
@@ -13,6 +10,8 @@ import type {
   RootParamList,
 } from './types';
 
+type RootNavigation = GenericNavigation<RootParamList>;
+
 /**
  * Hook to access the navigation prop of the parent screen anywhere.
  *
@@ -21,14 +20,14 @@ import type {
  *
  * @returns Navigation prop of the parent screen.
  */
-export function useNavigation(): GenericNavigation<RootParamList>;
+export function useNavigation(): RootNavigation;
 export function useNavigation<
   const Navigator = RootNavigator,
 >(): NavigationListForNavigator<Navigator>[keyof NavigationListForNavigator<Navigator>];
 export function useNavigation<
   const Navigator = RootNavigator,
-  const RouteName extends
-    keyof NavigationListForNested<Navigator> = keyof NavigationListForNested<Navigator>,
+  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);
@@ -44,23 +43,7 @@ export function useNavigation(name?: string): unknown {
     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);
+  const parent = navigation?.getParent(name);
 
   if (parent === undefined) {
     throw new Error(