@react-navigation/core 6.0.2

package/src/useCurrentRender.tsx

@@ -0,0 +1,35 @@
+import type { NavigationState, ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import CurrentRenderContext from './CurrentRenderContext';
+import type {
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  RouteProp,
+} from './types';
+
+type Options = {
+  state: NavigationState;
+  navigation: NavigationHelpers<ParamListBase>;
+  descriptors: Record<
+    string,
+    Descriptor<object, NavigationProp<ParamListBase>, RouteProp<ParamListBase>>
+  >;
+};
+
+/**
+ * Write the current options, so that server renderer can get current values
+ * Mutating values like this is not safe in async mode, but it doesn't apply to SSR
+ */
+export default function useCurrentRender({
+  state,
+  navigation,
+  descriptors,
+}: Options) {
+  const current = React.useContext(CurrentRenderContext);
+
+  if (current && navigation.isFocused()) {
+    current.options = descriptors[state.routes[state.index].key].options;
+  }
+}

package/src/useDescriptors.tsx

@@ -0,0 +1,229 @@
+import type {
+  NavigationAction,
+  NavigationState,
+  ParamListBase,
+  Router,
+} from '@react-navigation/routers';
+import * as React from 'react';
+
+import NavigationBuilderContext, {
+  AddKeyedListener,
+  AddListener,
+} from './NavigationBuilderContext';
+import NavigationContext from './NavigationContext';
+import NavigationRouteContext from './NavigationRouteContext';
+import SceneView from './SceneView';
+import type {
+  Descriptor,
+  EventMapBase,
+  NavigationHelpers,
+  NavigationProp,
+  RouteConfig,
+  RouteProp,
+} from './types';
+import type { NavigationEventEmitter } from './useEventEmitter';
+import useNavigationCache from './useNavigationCache';
+import useRouteCache from './useRouteCache';
+
+export type ScreenConfigWithParent<
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase
+> = [
+  (ScreenOptionsOrCallback<ScreenOptions> | undefined)[] | undefined,
+  RouteConfig<ParamListBase, string, State, ScreenOptions, EventMap>
+];
+
+type ScreenOptionsOrCallback<ScreenOptions extends {}> =
+  | ScreenOptions
+  | ((props: {
+      route: RouteProp<ParamListBase, string>;
+      navigation: any;
+    }) => ScreenOptions);
+
+type Options<
+  State extends NavigationState,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase
+> = {
+  state: State;
+  screens: Record<
+    string,
+    ScreenConfigWithParent<State, ScreenOptions, EventMap>
+  >;
+  navigation: NavigationHelpers<ParamListBase>;
+  screenOptions?: ScreenOptionsOrCallback<ScreenOptions>;
+  defaultScreenOptions?:
+    | ScreenOptions
+    | ((props: {
+        route: RouteProp<ParamListBase>;
+        navigation: any;
+        options: ScreenOptions;
+      }) => ScreenOptions);
+  onAction: (action: NavigationAction) => boolean;
+  getState: () => State;
+  setState: (state: State) => void;
+  addListener: AddListener;
+  addKeyedListener: AddKeyedListener;
+  onRouteFocus: (key: string) => void;
+  router: Router<State, NavigationAction>;
+  emitter: NavigationEventEmitter<EventMap>;
+};
+
+/**
+ * Hook to create descriptor objects for the child routes.
+ *
+ * A descriptor object provides 3 things:
+ * - Helper method to render a screen
+ * - Options specified by the screen for the navigator
+ * - Navigation object intended for the route
+ */
+export default function useDescriptors<
+  State extends NavigationState,
+  ActionHelpers extends Record<string, () => void>,
+  ScreenOptions extends {},
+  EventMap extends EventMapBase
+>({
+  state,
+  screens,
+  navigation,
+  screenOptions,
+  defaultScreenOptions,
+  onAction,
+  getState,
+  setState,
+  addListener,
+  addKeyedListener,
+  onRouteFocus,
+  router,
+  emitter,
+}: Options<State, ScreenOptions, EventMap>) {
+  const [options, setOptions] = React.useState<Record<string, object>>({});
+  const { onDispatchAction, onOptionsChange, stackRef } = React.useContext(
+    NavigationBuilderContext
+  );
+
+  const context = React.useMemo(
+    () => ({
+      navigation,
+      onAction,
+      addListener,
+      addKeyedListener,
+      onRouteFocus,
+      onDispatchAction,
+      onOptionsChange,
+      stackRef,
+    }),
+    [
+      navigation,
+      onAction,
+      addListener,
+      addKeyedListener,
+      onRouteFocus,
+      onDispatchAction,
+      onOptionsChange,
+      stackRef,
+    ]
+  );
+
+  const navigations = useNavigationCache<State, ScreenOptions, EventMap>({
+    state,
+    getState,
+    navigation,
+    setOptions,
+    router,
+    emitter,
+  });
+
+  const routes = useRouteCache(state.routes);
+
+  return routes.reduce<
+    Record<
+      string,
+      Descriptor<
+        ScreenOptions,
+        NavigationProp<ParamListBase, string, State, ScreenOptions, EventMap> &
+          ActionHelpers,
+        RouteProp<ParamListBase>
+      >
+    >
+  >((acc, route, i) => {
+    const config = screens[route.name];
+    const screen = config[1];
+    const navigation = navigations[route.key];
+
+    const optionsList = [
+      // The default `screenOptions` passed to the navigator
+      screenOptions,
+      // The `screenOptions` props passed to `Group` elements
+      ...((config[0]
+        ? config[0].filter(Boolean)
+        : []) as ScreenOptionsOrCallback<ScreenOptions>[]),
+      // The `options` prop passed to `Screen` elements,
+      screen.options,
+      // The options set via `navigation.setOptions`
+      options[route.key],
+    ];
+
+    const customOptions = optionsList.reduce<ScreenOptions>(
+      (acc, curr) =>
+        Object.assign(
+          acc,
+          typeof curr !== 'function' ? curr : curr({ route, navigation })
+        ),
+      {} as ScreenOptions
+    );
+
+    const mergedOptions = {
+      ...(typeof defaultScreenOptions === 'function'
+        ? // @ts-expect-error: ts gives incorrect error here
+          defaultScreenOptions({
+            route,
+            navigation,
+            options: customOptions,
+          })
+        : defaultScreenOptions),
+      ...customOptions,
+    };
+
+    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;
+        }
+
+        return o;
+      });
+
+    acc[route.key] = {
+      route,
+      // @ts-expect-error: it's missing action helpers, fix later
+      navigation,
+      render() {
+        return (
+          <NavigationBuilderContext.Provider key={route.key} value={context}>
+            <NavigationContext.Provider value={navigation}>
+              <NavigationRouteContext.Provider value={route}>
+                <SceneView
+                  navigation={navigation}
+                  route={route}
+                  screen={screen}
+                  routeState={state.routes[i].state}
+                  getState={getState}
+                  setState={setState}
+                  options={mergedOptions}
+                  clearOptions={clearOptions}
+                />
+              </NavigationRouteContext.Provider>
+            </NavigationContext.Provider>
+          </NavigationBuilderContext.Provider>
+        );
+      },
+      options: mergedOptions as ScreenOptions,
+    };
+
+    return acc;
+  }, {});
+}

package/src/useEventEmitter.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+
+import type { EventArg, EventConsumer, EventEmitter } from './types';
+
+export type NavigationEventEmitter<T extends Record<string, any>> =
+  EventEmitter<T> & {
+    create: (target: string) => EventConsumer<T>;
+  };
+
+type Listeners = ((e: any) => void)[];
+
+/**
+ * Hook to manage the event system used by the navigator to notify screens of various events.
+ */
+export default function useEventEmitter<T extends Record<string, any>>(
+  listen?: (e: any) => void
+): NavigationEventEmitter<T> {
+  const listenRef = React.useRef(listen);
+
+  React.useEffect(() => {
+    listenRef.current = listen;
+  });
+
+  const listeners = React.useRef<Record<string, Record<string, Listeners>>>({});
+
+  const create = React.useCallback((target: string) => {
+    const removeListener = (type: string, callback: (data: any) => void) => {
+      const callbacks = listeners.current[type]
+        ? listeners.current[type][target]
+        : undefined;
+
+      if (!callbacks) {
+        return;
+      }
+
+      const index = callbacks.indexOf(callback);
+
+      callbacks.splice(index, 1);
+    };
+
+    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);
+
+      return () => removeListener(type, callback);
+    };
+
+    return {
+      addListener,
+      removeListener,
+    };
+  }, []);
+
+  const emit = React.useCallback(
+    ({
+      type,
+      data,
+      target,
+      canPreventDefault,
+    }: {
+      type: string;
+      data?: any;
+      target?: string;
+      canPreventDefault?: boolean;
+    }) => {
+      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 event: EventArg<any, any, any> = {
+        get type() {
+          return type;
+        },
+      };
+
+      if (target !== undefined) {
+        Object.defineProperty(event, 'target', {
+          enumerable: true,
+          get() {
+            return target;
+          },
+        });
+      }
+
+      if (data !== undefined) {
+        Object.defineProperty(event, 'data', {
+          enumerable: true,
+          get() {
+            return data;
+          },
+        });
+      }
+
+      if (canPreventDefault) {
+        let defaultPrevented = false;
+
+        Object.defineProperties(event, {
+          defaultPrevented: {
+            enumerable: true,
+            get() {
+              return defaultPrevented;
+            },
+          },
+          preventDefault: {
+            enumerable: true,
+            value() {
+              defaultPrevented = true;
+            },
+          },
+        });
+      }
+
+      listenRef.current?.(event);
+
+      callbacks?.forEach((cb) => cb(event));
+
+      return event as any;
+    },
+    []
+  );
+
+  return React.useMemo(() => ({ create, emit }), [create, emit]);
+}

package/src/useFocusEffect.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+
+import useNavigation from './useNavigation';
+
+type EffectCallback = () => undefined | void | (() => void);
+
+/**
+ * Hook to run an effect in a focused screen, similar to `React.useEffect`.
+ * This can be used to perform side-effects such as fetching data or subscribing to events.
+ * The passed callback should be wrapped in `React.useCallback` to avoid running the effect too often.
+ *
+ * @param callback Memoized callback containing the effect, should optionally return a cleanup function.
+ */
+export default function useFocusEffect(effect: EffectCallback) {
+  const navigation = useNavigation();
+
+  if (arguments[1] !== undefined) {
+    const message =
+      "You passed a second argument to 'useFocusEffect', but it only accepts one argument. " +
+      "If you want to pass a dependency array, you can use 'React.useCallback':\n\n" +
+      'useFocusEffect(\n' +
+      '  React.useCallback(() => {\n' +
+      '    // Your code here\n' +
+      '  }, [depA, depB])\n' +
+      ');\n\n' +
+      'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
+
+    console.error(message);
+  }
+
+  React.useEffect(() => {
+    let isFocused = false;
+    let cleanup: undefined | void | (() => void);
+
+    const callback = () => {
+      const destroy = effect();
+
+      if (destroy === undefined || typeof destroy === 'function') {
+        return destroy;
+      }
+
+      if (process.env.NODE_ENV !== 'production') {
+        let message =
+          'An effect function must not return anything besides a function, which is used for clean-up.';
+
+        if (destroy === null) {
+          message +=
+            " You returned 'null'. If your effect does not require clean-up, return 'undefined' (or nothing).";
+        } else if (typeof (destroy as any).then === 'function') {
+          message +=
+            "\n\nIt looks like you wrote 'useFocusEffect(async () => ...)' or returned a Promise. " +
+            'Instead, write the async function inside your effect ' +
+            'and call it immediately:\n\n' +
+            'useFocusEffect(\n' +
+            '  React.useCallback() => {\n' +
+            '    async function fetchData() {\n' +
+            '      // You can await here\n' +
+            '      const response = await MyAPI.getData(someId);\n' +
+            '      // ...\n' +
+            '    }\n\n' +
+            '    fetchData();\n' +
+            '  }, [someId])\n' +
+            ');\n\n' +
+            'See usage guide: https://reactnavigation.org/docs/use-focus-effect';
+        } else {
+          message += ` You returned '${JSON.stringify(destroy)}'.`;
+        }
+
+        console.error(message);
+      }
+    };
+
+    // We need to run the effect on intial render/dep changes if the screen is focused
+    if (navigation.isFocused()) {
+      cleanup = callback();
+      isFocused = true;
+    }
+
+    const unsubscribeFocus = navigation.addListener('focus', () => {
+      // If callback was already called for focus, avoid calling it again
+      // The focus event may also fire on intial render, so we guard against runing the effect twice
+      if (isFocused) {
+        return;
+      }
+
+      if (cleanup !== undefined) {
+        cleanup();
+      }
+
+      cleanup = callback();
+      isFocused = true;
+    });
+
+    const unsubscribeBlur = navigation.addListener('blur', () => {
+      if (cleanup !== undefined) {
+        cleanup();
+      }
+
+      cleanup = undefined;
+      isFocused = false;
+    });
+
+    return () => {
+      if (cleanup !== undefined) {
+        cleanup();
+      }
+
+      unsubscribeFocus();
+      unsubscribeBlur();
+    };
+  }, [effect, navigation]);
+}

package/src/useFocusEvents.tsx

@@ -0,0 +1,73 @@
+import type { NavigationState } from '@react-navigation/routers';
+import * as React from 'react';
+
+import NavigationContext from './NavigationContext';
+import type { EventMapCore } from './types';
+import type { NavigationEventEmitter } from './useEventEmitter';
+
+type Options<State extends NavigationState> = {
+  state: State;
+  emitter: NavigationEventEmitter<EventMapCore<State>>;
+};
+
+/**
+ * Hook to take care of emitting `focus` and `blur` events.
+ */
+export default function useFocusEvents<State extends NavigationState>({
+  state,
+  emitter,
+}: Options<State>) {
+  const navigation = React.useContext(NavigationContext);
+  const lastFocusedKeyRef = React.useRef<string | undefined>();
+
+  const currentFocusedKey = state.routes[state.index].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
+  React.useEffect(
+    () =>
+      navigation?.addListener('focus', () => {
+        lastFocusedKeyRef.current = currentFocusedKey;
+        emitter.emit({ type: 'focus', target: currentFocusedKey });
+      }),
+    [currentFocusedKey, emitter, navigation]
+  );
+
+  React.useEffect(
+    () =>
+      navigation?.addListener('blur', () => {
+        lastFocusedKeyRef.current = undefined;
+        emitter.emit({ type: 'blur', target: currentFocusedKey });
+      }),
+    [currentFocusedKey, emitter, navigation]
+  );
+
+  React.useEffect(() => {
+    const lastFocusedKey = lastFocusedKeyRef.current;
+
+    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
+    if (lastFocusedKey === undefined && !navigation) {
+      emitter.emit({ type: 'focus', target: currentFocusedKey });
+    }
+
+    // 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)
+    ) {
+      return;
+    }
+
+    if (lastFocusedKey === undefined) {
+      // Only fire events after initial mount
+      return;
+    }
+
+    emitter.emit({ type: 'blur', target: lastFocusedKey });
+    emitter.emit({ type: 'focus', target: currentFocusedKey });
+  }, [currentFocusedKey, emitter, navigation]);
+}

package/src/useFocusedListenersChildrenAdapter.tsx

@@ -0,0 +1,47 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import NavigationBuilderContext, {
+  FocusedNavigationCallback,
+  FocusedNavigationListener,
+} from './NavigationBuilderContext';
+import type { NavigationHelpers } from './types';
+
+type Options = {
+  navigation: NavigationHelpers<ParamListBase>;
+  focusedListeners: FocusedNavigationListener[];
+};
+
+/**
+ * Hook for passing focus callback to children
+ */
+export default function useFocusedListenersChildrenAdapter({
+  navigation,
+  focusedListeners,
+}: Options) {
+  const { addListener } = React.useContext(NavigationBuilderContext);
+
+  const listener = React.useCallback(
+    (callback: FocusedNavigationCallback<any>) => {
+      if (navigation.isFocused()) {
+        for (const listener of focusedListeners) {
+          const { handled, result } = listener(callback);
+
+          if (handled) {
+            return { handled, result };
+          }
+        }
+
+        return { handled: true, result: callback(navigation) };
+      } else {
+        return { handled: false, result: null };
+      }
+    },
+    [focusedListeners, navigation]
+  );
+
+  React.useEffect(
+    () => addListener?.('focus', listener),
+    [addListener, listener]
+  );
+}

package/src/useIsFocused.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { useState } from 'react';
+
+import useNavigation from './useNavigation';
+
+/**
+ * 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 default function useIsFocused(): boolean {
+  const navigation = useNavigation();
+  const [isFocused, setIsFocused] = useState(navigation.isFocused);
+
+  const valueToReturn = navigation.isFocused();
+
+  if (isFocused !== valueToReturn) {
+    // If the value has changed since the last render, we need to update it.
+    // This could happen if we missed an update from the event listeners during re-render.
+    // React will process this update immediately, so the old subscription value won't be committed.
+    // It is still nice to avoid returning a mismatched value though, so let's override the return value.
+    // This is the same logic as in https://github.com/facebook/react/tree/master/packages/use-subscription
+    setIsFocused(valueToReturn);
+  }
+
+  React.useEffect(() => {
+    const unsubscribeFocus = navigation.addListener('focus', () =>
+      setIsFocused(true)
+    );
+
+    const unsubscribeBlur = navigation.addListener('blur', () =>
+      setIsFocused(false)
+    );
+
+    return () => {
+      unsubscribeFocus();
+      unsubscribeBlur();
+    };
+  }, [navigation]);
+
+  React.useDebugValue(valueToReturn);
+
+  return valueToReturn;
+}