@react-navigation/core 8.0.0-alpha.2 → 8.0.0-alpha.21

package/src/useDescriptors.tsx

@@ -113,17 +113,18 @@ export function useDescriptors<
   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);
+  } = React.use(NavigationBuilderContext);
 
   const context = React.useMemo(
     () => ({
@@ -133,6 +134,7 @@ export function useDescriptors<
       addKeyedListener,
       onRouteFocus,
       onDispatchAction,
+      onEmitEvent,
       onOptionsChange,
       scheduleUpdate,
       flushUpdates,
@@ -145,6 +147,7 @@ export function useDescriptors<
       addKeyedListener,
       onRouteFocus,
       onDispatchAction,
+      onEmitEvent,
       onOptionsChange,
       scheduleUpdate,
       flushUpdates,
@@ -177,20 +180,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,7 +222,11 @@ 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) => {
@@ -236,7 +243,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;
 
@@ -291,7 +298,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] = {

package/src/useEventEmitter.tsx

@@ -59,58 +59,67 @@ 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));

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

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/useNavigation.tsx

@@ -13,6 +13,8 @@ import type {
   RootParamList,
 } from './types';
 
+type RootNavigation = GenericNavigation<RootParamList>;
+
 /**
  * Hook to access the navigation prop of the parent screen anywhere.
  *
@@ -21,14 +23,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);