@react-navigation/core 6.0.2

package/src/useOptionsGetters.tsx

@@ -0,0 +1,98 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import NavigationBuilderContext from './NavigationBuilderContext';
+import NavigationStateContext from './NavigationStateContext';
+import type { NavigationProp } from './types';
+
+type Options = {
+  key?: string;
+  navigation?: NavigationProp<ParamListBase>;
+  options?: object | undefined;
+};
+
+export default function useOptionsGetters({
+  key,
+  options,
+  navigation,
+}: Options) {
+  const optionsRef = React.useRef<object | undefined>(options);
+  const optionsGettersFromChildRef = React.useRef<
+    Record<string, () => object | undefined | null>
+  >({});
+
+  const { onOptionsChange } = React.useContext(NavigationBuilderContext);
+  const { addOptionsGetter: parentAddOptionsGetter } = React.useContext(
+    NavigationStateContext
+  );
+
+  const optionsChangeListener = React.useCallback(() => {
+    const isFocused = navigation?.isFocused() ?? true;
+    const hasChildren = Object.keys(optionsGettersFromChildRef.current).length;
+
+    if (isFocused && !hasChildren) {
+      onOptionsChange(optionsRef.current ?? {});
+    }
+  }, [navigation, onOptionsChange]);
+
+  React.useEffect(() => {
+    optionsRef.current = options;
+    optionsChangeListener();
+
+    return navigation?.addListener('focus', optionsChangeListener);
+  }, [navigation, options, optionsChangeListener]);
+
+  const getOptionsFromListener = React.useCallback(() => {
+    for (let key in optionsGettersFromChildRef.current) {
+      if (optionsGettersFromChildRef.current.hasOwnProperty(key)) {
+        const result = optionsGettersFromChildRef.current[key]?.();
+
+        // null means unfocused route
+        if (result !== null) {
+          return result;
+        }
+      }
+    }
+
+    return null;
+  }, []);
+
+  const getCurrentOptions = React.useCallback(() => {
+    const isFocused = navigation?.isFocused() ?? true;
+
+    if (!isFocused) {
+      return null;
+    }
+
+    const optionsFromListener = getOptionsFromListener();
+
+    if (optionsFromListener !== null) {
+      return optionsFromListener;
+    }
+
+    return optionsRef.current;
+  }, [navigation, getOptionsFromListener]);
+
+  React.useEffect(() => {
+    return parentAddOptionsGetter?.(key!, getCurrentOptions);
+  }, [getCurrentOptions, parentAddOptionsGetter, key]);
+
+  const addOptionsGetter = React.useCallback(
+    (key: string, getter: () => object | undefined | null) => {
+      optionsGettersFromChildRef.current[key] = getter;
+      optionsChangeListener();
+
+      return () => {
+        // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+        delete optionsGettersFromChildRef.current[key];
+        optionsChangeListener();
+      };
+    },
+    [optionsChangeListener]
+  );
+
+  return {
+    addOptionsGetter,
+    getCurrentOptions,
+  };
+}

package/src/useRegisterNavigator.tsx

@@ -0,0 +1,29 @@
+import { nanoid } from 'nanoid/non-secure';
+import * as React from 'react';
+
+import { SingleNavigatorContext } from './EnsureSingleNavigator';
+
+/**
+ * Register a navigator in the parent context (either a navigation container or a screen).
+ * This is used to prevent multiple navigators under a single container or screen.
+ */
+export default function useRegisterNavigator() {
+  const [key] = React.useState(() => nanoid());
+  const container = React.useContext(SingleNavigatorContext);
+
+  if (container === undefined) {
+    throw new Error(
+      "Couldn't register the navigator. Have you wrapped your app with 'NavigationContainer'?\n\nThis can also happen if there are multiple copies of '@react-navigation' packages installed."
+    );
+  }
+
+  React.useEffect(() => {
+    const { register, unregister } = container;
+
+    register(key);
+
+    return () => unregister(key);
+  }, [container, key]);
+
+  return key;
+}

package/src/useRoute.tsx

@@ -0,0 +1,22 @@
+import type { ParamListBase } from '@react-navigation/routers';
+import * as React from 'react';
+
+import NavigationRouteContext from './NavigationRouteContext';
+import type { RouteProp } from './types';
+
+/**
+ * Hook to access the route prop of the parent screen anywhere.
+ *
+ * @returns Route prop of the parent screen.
+ */
+export default function useRoute<T extends RouteProp<ParamListBase>>(): T {
+  const route = React.useContext(NavigationRouteContext);
+
+  if (route === undefined) {
+    throw new Error(
+      "Couldn't find a route object. Is your component inside a screen in a navigator?"
+    );
+  }
+
+  return route as T;
+}

package/src/useRouteCache.tsx

@@ -0,0 +1,55 @@
+import type {
+  NavigationState,
+  ParamListBase,
+  Route,
+} from '@react-navigation/routers';
+import * as React from 'react';
+
+import type { RouteProp } from './types';
+
+type RouteCache = Map<Route<string>, RouteProp<ParamListBase>>;
+
+/**
+ * Utilites such as `getFocusedRouteNameFromRoute` need to access state.
+ * So we need a way to suppress the warning for those use cases.
+ * This is fine since they are internal utilities and this is not public API.
+ */
+export const CHILD_STATE = Symbol('CHILD_STATE');
+
+/**
+ * Hook to cache route props for each screen in the navigator.
+ * This lets add warnings and modifications to the route object but keep references between renders.
+ */
+export default function useRouteCache<State extends NavigationState>(
+  routes: State['routes']
+) {
+  // Cache object which holds route objects for each screen
+  const cache = React.useMemo(() => ({ current: new Map() as RouteCache }), []);
+
+  if (process.env.NODE_ENV === 'production') {
+    // We don't want the overhead of creating extra maps every render in prod
+    return routes;
+  }
+
+  cache.current = routes.reduce((acc, route) => {
+    const previous = cache.current.get(route);
+
+    if (previous) {
+      // If a cached route object already exists, reuse it
+      acc.set(route, previous);
+    } else {
+      const { state, ...proxy } = route;
+
+      Object.defineProperty(proxy, CHILD_STATE, {
+        enumerable: false,
+        value: state,
+      });
+
+      acc.set(route, proxy);
+    }
+
+    return acc;
+  }, new Map() as RouteCache);
+
+  return Array.from(cache.current.values());
+}

package/src/useScheduleUpdate.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+
+const MISSING_CONTEXT_ERROR = "Couldn't find a schedule context.";
+
+export const ScheduleUpdateContext = React.createContext<{
+  scheduleUpdate: (callback: () => void) => void;
+  flushUpdates: () => void;
+}>({
+  scheduleUpdate() {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+  flushUpdates() {
+    throw new Error(MISSING_CONTEXT_ERROR);
+  },
+});
+
+/**
+ * When screen config changes, we want to update the navigator in the same update phase.
+ * However, navigation state is in the root component and React won't let us update it from a child.
+ * This is a workaround for that, the scheduled update is stored in the ref without actually calling setState.
+ * It lets all subsequent updates access the latest state so it stays correct.
+ * Then we call setState during after the component updates.
+ */
+export default function useScheduleUpdate(callback: () => void) {
+  const { scheduleUpdate, flushUpdates } = React.useContext(
+    ScheduleUpdateContext
+  );
+
+  scheduleUpdate(callback);
+
+  React.useEffect(flushUpdates);
+}

package/src/useSyncState.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+const UNINTIALIZED_STATE = {};
+
+/**
+ * This is definitely not compatible with concurrent mode, but we don't have a solution for sync state yet.
+ */
+export default function useSyncState<T>(initialState?: (() => T) | T) {
+  const stateRef = React.useRef<T>(UNINTIALIZED_STATE as any);
+  const isSchedulingRef = React.useRef(false);
+  const isMountedRef = React.useRef(true);
+
+  React.useEffect(() => {
+    isMountedRef.current = true;
+
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  if (stateRef.current === UNINTIALIZED_STATE) {
+    stateRef.current =
+      // @ts-expect-error: initialState is a function, but TypeScript doesn't think so
+      typeof initialState === 'function' ? initialState() : initialState;
+  }
+
+  const [trackingState, setTrackingState] = React.useState(stateRef.current);
+
+  const getState = React.useCallback(() => stateRef.current, []);
+
+  const setState = React.useCallback((state: T) => {
+    if (state === stateRef.current || !isMountedRef.current) {
+      return;
+    }
+
+    stateRef.current = state;
+
+    if (!isSchedulingRef.current) {
+      setTrackingState(state);
+    }
+  }, []);
+
+  const scheduleUpdate = React.useCallback((callback: () => void) => {
+    isSchedulingRef.current = true;
+
+    try {
+      callback();
+    } finally {
+      isSchedulingRef.current = false;
+    }
+  }, []);
+
+  const flushUpdates = React.useCallback(() => {
+    if (!isMountedRef.current) {
+      return;
+    }
+
+    // Make sure that the tracking state is up-to-date.
+    // We call it unconditionally, but React should skip the update if state is unchanged.
+    setTrackingState(stateRef.current);
+  }, []);
+
+  // If we're rendering and the tracking state is out of date, update it immediately
+  // This will make sure that our updates are applied as early as possible.
+  if (trackingState !== stateRef.current) {
+    setTrackingState(stateRef.current);
+  }
+
+  const state = stateRef.current;
+
+  React.useDebugValue(state);
+
+  return [state, getState, setState, scheduleUpdate, flushUpdates] as const;
+}

package/src/validatePathConfig.tsx

@@ -0,0 +1,32 @@
+const formatToList = (items: string[]) =>
+  items.map((key) => `- ${key}`).join('\n');
+
+export default function validatePathConfig(config: any, root = true) {
+  const validKeys = ['initialRouteName', 'screens'];
+
+  if (!root) {
+    validKeys.push('path', 'exact', 'stringify', 'parse');
+  }
+
+  const invalidKeys = Object.keys(config).filter(
+    (key) => !validKeys.includes(key)
+  );
+
+  if (invalidKeys.length) {
+    throw new Error(
+      `Found invalid properties in the configuration:\n${formatToList(
+        invalidKeys
+      )}\n\nDid you forget to specify them under a 'screens' property?\n\nYou can only specify the following properties:\n${formatToList(
+        validKeys
+      )}\n\nSee https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration.`
+    );
+  }
+
+  if (config.screens) {
+    Object.entries(config.screens).forEach(([_, value]) => {
+      if (typeof value !== 'string') {
+        validatePathConfig(value, false);
+      }
+    });
+  }
+}