@react-navigation/native 7.0.0-alpha.1 → 7.0.0-alpha.11

package/src/useBackButton.native.tsx

@@ -0,0 +1,33 @@
+import type {
+  NavigationContainerRef,
+  ParamListBase,
+} from '@react-navigation/core';
+import * as React from 'react';
+import { BackHandler } from 'react-native';
+
+export function useBackButton(
+  ref: React.RefObject<NavigationContainerRef<ParamListBase>>
+) {
+  React.useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      'hardwareBackPress',
+      () => {
+        const navigation = ref.current;
+
+        if (navigation == null) {
+          return false;
+        }
+
+        if (navigation.canGoBack()) {
+          navigation.goBack();
+
+          return true;
+        }
+
+        return false;
+      }
+    );
+
+    return () => subscription.remove();
+  }, [ref]);
+}

package/src/useBackButton.tsx

@@ -2,32 +2,10 @@ import type {
   NavigationContainerRef,
   ParamListBase,
 } from '@react-navigation/core';
-import * as React from 'react';
-import { BackHandler } from 'react-native';
 
 export function useBackButton(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase>>
+  _: React.RefObject<NavigationContainerRef<ParamListBase>>
 ) {
-  React.useEffect(() => {
-    const subscription = BackHandler.addEventListener(
-      'hardwareBackPress',
-      () => {
-        const navigation = ref.current;
-
-        if (navigation == null) {
-          return false;
-        }
-
-        if (navigation.canGoBack()) {
-          navigation.goBack();
-
-          return true;
-        }
-
-        return false;
-      }
-    );
-
-    return () => subscription.remove();
-  }, [ref]);
+  // No-op
+  // BackHandler is not available on web
 }

package/src/{useLinkTools.tsx → useLinkBuilder.tsx}

@@ -3,10 +3,10 @@ import {
   getActionFromState,
   getPathFromState,
   getStateFromPath,
-  NavigationHelpers,
+  type NavigationHelpers,
   NavigationHelpersContext,
-  NavigationProp,
-  ParamListBase,
+  type NavigationProp,
+  type ParamListBase,
 } from '@react-navigation/core';
 import * as React from 'react';
 
@@ -45,10 +45,10 @@ const getRootStateForNavigate = (
 };
 
 /**
- * Build destination link for a navigate action.
- * Useful for showing anchor tags on the web for buttons that perform navigation.
+ * Helpers to build href or action based on the linking options.
+ * @returns `buildHref` to build an `href` for screen and `buildAction` to build an action from an `href`.
  */
-export function useLinkTools() {
+export function useLinkBuilder() {
   const navigation = React.useContext(NavigationHelpersContext);
   const linking = React.useContext(LinkingContext);
 
@@ -84,7 +84,7 @@ export function useLinkTools() {
   const buildAction = React.useCallback(
     (href: string) => {
       if (!href.startsWith('/')) {
-        throw new Error(`The path must start with '/' (${href}).`);
+        throw new Error(`The href must start with '/' (${href}).`);
       }
 
       const { options } = linking;
@@ -98,7 +98,7 @@ export function useLinkTools() {
 
         return action ?? CommonActions.reset(state);
       } else {
-        throw new Error('Failed to parse the path to a navigation state.');
+        throw new Error('Failed to parse the href to a navigation state.');
       }
     },
     [linking]

package/src/useLinkProps.tsx

@@ -1,20 +1,20 @@
 import {
   getPathFromState,
-  NavigationAction,
+  type NavigationAction,
   NavigationContainerRefContext,
   NavigationHelpersContext,
-  NavigatorScreenParams,
-  ParamListBase,
+  type NavigatorScreenParams,
+  type ParamListBase,
 } from '@react-navigation/core';
 import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
-import { GestureResponderEvent, Platform } from 'react-native';
+import { type GestureResponderEvent, Platform } from 'react-native';
 
 import { LinkingContext } from './LinkingContext';
 
 export type Props<
   ParamList extends ReactNavigation.RootParamList,
-  RouteName extends keyof ParamList = keyof ParamList
+  RouteName extends keyof ParamList = keyof ParamList,
 > =
   | ({
       screen: Extract<RouteName, string>;
@@ -43,7 +43,7 @@ const getStateFromParams = (
         {
           name: params.screen,
           params: params.params,
-          // @ts-expect-error
+          // @ts-expect-error this is fine 🔥
           state: params.screen
             ? getStateFromParams(
                 params.params as
@@ -80,19 +80,20 @@ export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
   const onPress = (
     e?: React.MouseEvent<HTMLAnchorElement, MouseEvent> | GestureResponderEvent
   ) => {
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const hasModifierKey = e.metaKey || e.altKey || e.ctrlKey || e.shiftKey; // ignore clicks with modifier keys
+    // @ts-expect-error: these properties exist on web, but not in React Native
+    const isLeftClick = e.button == null || e.button === 0; // only handle left clicks
+    const isSelfTarget = [undefined, null, '', 'self'].includes(
+      // @ts-expect-error: these properties exist on web, but not in React Native
+      e.currentTarget?.target
+    ); // let browser handle "target=_blank" etc.
+
     let shouldHandle = false;
 
     if (Platform.OS !== 'web' || !e) {
-      shouldHandle = e ? !e.defaultPrevented : true;
-    } else if (
-      !e.defaultPrevented && // onPress prevented default
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      (e.button == null || e.button === 0) && // ignore everything but left clicks
-      // @ts-expect-error: these properties exist on web, but not in React Native
-      [undefined, null, '', 'self'].includes(e.currentTarget?.target) // let browser handle "target=_blank" etc.
-    ) {
+      shouldHandle = true;
+    } else if (!hasModifierKey && isLeftClick && isSelfTarget) {
       e.preventDefault();
       shouldHandle = true;
     }
@@ -109,7 +110,7 @@ export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
           );
         }
       } else {
-        // @ts-expect-error: This is already type-checked by the prop types
+        // @ts-expect-error This is already type-checked by the prop types
         navigation?.navigate(screen, params);
       }
     }
@@ -126,9 +127,9 @@ export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
               routes: [
                 {
                   name: screen,
-                  // @ts-expect-error
+                  // @ts-expect-error this is fine 🔥
                   params: params,
-                  // @ts-expect-error
+                  // @ts-expect-error this is fine 🔥
                   state: getStateFromParams(params),
                 },
               ],

package/src/useLinkTo.tsx

@@ -0,0 +1,30 @@
+import { NavigationContainerRefContext } from '@react-navigation/core';
+import * as React from 'react';
+
+import { useLinkBuilder } from './useLinkBuilder';
+
+/**
+ * Helper to navigate to a screen using a href based on the linking options.
+ * @returns function that receives the href to navigate to.
+ */
+export function useLinkTo() {
+  const navigation = React.useContext(NavigationContainerRefContext);
+  const { buildAction } = useLinkBuilder();
+
+  const linkTo = React.useCallback(
+    (href: string) => {
+      if (navigation === undefined) {
+        throw new Error(
+          "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+        );
+      }
+
+      const action = buildAction(href);
+
+      navigation.dispatch(action);
+    },
+    [buildAction, navigation]
+  );
+
+  return linkTo;
+}

package/src/useLinking.native.tsx

@@ -1,8 +1,8 @@
 import {
   getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
-  NavigationContainerRef,
-  ParamListBase,
+  type NavigationContainerRef,
+  type ParamListBase,
   useNavigationIndependentTree,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -15,7 +15,7 @@ type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
 type Options = LinkingOptions<ParamListBase>;
 
-let linkingHandlers: Symbol[] = [];
+const linkingHandlers: symbol[] = [];
 
 export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase>>,
@@ -27,11 +27,11 @@ export function useLinking(
     getInitialURL = () =>
       Promise.race([
         Linking.getInitialURL(),
-        new Promise<undefined>((resolve) =>
+        new Promise<undefined>((resolve) => {
           // Timeout in 150ms if `getInitialState` doesn't resolve
           // Workaround for https://github.com/facebook/react-native/issues/25675
-          setTimeout(resolve, 150)
-        ),
+          setTimeout(resolve, 150);
+        }),
       ]),
     subscribe = (listener) => {
       const callback = ({ url }: { url: string }) => listener(url);
@@ -55,7 +55,8 @@ export function useLinking(
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: Options,
+  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -140,12 +141,21 @@ export function useLinking(
     if (enabledRef.current) {
       const url = getInitialURLRef.current();
 
-      if (url != null && typeof url !== 'string') {
-        return url.then((url) => {
-          const state = getStateFromURL(url);
+      if (url != null) {
+        if (typeof url !== 'string') {
+          return url.then((url) => {
+            const state = getStateFromURL(url);
 
-          return state;
-        });
+            if (typeof url === 'string') {
+              // If the link were handled, it gets cleared in NavigationContainer
+              onUnhandledLinking(extractPathFromURL(prefixes, url));
+            }
+
+            return state;
+          });
+        } else {
+          onUnhandledLinking(extractPathFromURL(prefixes, url));
+        }
       }
 
       state = getStateFromURL(url);
@@ -161,7 +171,7 @@ export function useLinking(
     };
 
     return thenable as PromiseLike<ResultState | undefined>;
-  }, [getStateFromURL]);
+  }, [getStateFromURL, onUnhandledLinking, prefixes]);
 
   React.useEffect(() => {
     const listener = (url: string) => {
@@ -173,14 +183,10 @@ export function useLinking(
       const state = navigation ? getStateFromURL(url) : undefined;
 
       if (navigation && state) {
-        // Make sure that the routes in the state exist in the root navigator
-        // Otherwise there's an error in the linking configuration
+        // If the link were handled, it gets cleared in NavigationContainer
+        onUnhandledLinking(extractPathFromURL(prefixes, url));
         const rootState = navigation.getRootState();
-
         if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
-          console.warn(
-            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
-          );
           return;
         }
 
@@ -207,7 +213,7 @@ export function useLinking(
     };
 
     return subscribe(listener);
-  }, [enabled, getStateFromURL, ref, subscribe]);
+  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe]);
 
   return {
     getInitialState,

package/src/useLinking.tsx

@@ -3,9 +3,9 @@ import {
   getActionFromState as getActionFromStateDefault,
   getPathFromState as getPathFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
-  NavigationContainerRef,
-  NavigationState,
-  ParamListBase,
+  type NavigationContainerRef,
+  type NavigationState,
+  type ParamListBase,
   useNavigationIndependentTree,
 } from '@react-navigation/core';
 import isEqual from 'fast-deep-equal';
@@ -60,39 +60,16 @@ const findMatchingState = <T extends NavigationState>(
 /**
  * Run async function in series as it's called.
  */
-const series = (cb: () => Promise<void>) => {
-  // Whether we're currently handling a callback
-  let handling = false;
-  let queue: (() => Promise<void>)[] = [];
-
-  const callback = async () => {
-    try {
-      if (handling) {
-        // If we're currently handling a previous event, wait before handling this one
-        // Add the callback to the beginning of the queue
-        queue.unshift(callback);
-        return;
-      }
-
-      handling = true;
-
-      await cb();
-    } finally {
-      handling = false;
-
-      if (queue.length) {
-        // If we have queued items, handle the last one
-        const last = queue.pop();
-
-        last?.();
-      }
-    }
+export const series = (cb: () => Promise<void>) => {
+  let queue = Promise.resolve();
+  const callback = () => {
+    // eslint-disable-next-line promise/no-callback-in-promise
+    queue = queue.then(cb);
   };
-
   return callback;
 };
 
-let linkingHandlers: Symbol[] = [];
+const linkingHandlers: symbol[] = [];
 
 type Options = LinkingOptions<ParamListBase>;
 
@@ -104,7 +81,8 @@ export function useLinking(
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: Options,
+  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -163,6 +141,17 @@ export function useLinking(
     getActionFromStateRef.current = getActionFromState;
   });
 
+  const validateRoutesNotExistInRootState = React.useCallback(
+    (state: ResultState) => {
+      const navigation = ref.current;
+      const rootState = navigation?.getRootState();
+      // Make sure that the routes in the state exist in the root navigator
+      // Otherwise there's an error in the linking configuration
+      return state?.routes.some((r) => !rootState?.routeNames.includes(r.name));
+    },
+    [ref]
+  );
+
   const server = React.useContext(ServerContext);
 
   const getInitialState = React.useCallback(() => {
@@ -178,6 +167,9 @@ export function useLinking(
       if (path) {
         value = getStateFromPathRef.current(path, configRef.current);
       }
+
+      // If the link were handled, it gets cleared in NavigationContainer
+      onUnhandledLinking(path);
     }
 
     const thenable = {
@@ -207,6 +199,8 @@ export function useLinking(
         return;
       }
 
+      const { location } = window;
+
       const path = location.pathname + location.search;
       const index = history.index;
 
@@ -230,14 +224,11 @@ export function useLinking(
       // We should only dispatch an action when going forward
       // Otherwise the action will likely add items to history, which would mess things up
       if (state) {
+        // If the link were handled, it gets cleared in NavigationContainer
+        onUnhandledLinking(path);
         // Make sure that the routes in the state exist in the root navigator
         // Otherwise there's an error in the linking configuration
-        const rootState = navigation.getRootState();
-
-        if (state.routes.some((r) => !rootState?.routeNames.includes(r.name))) {
-          console.warn(
-            "The navigation state parsed from the URL contains routes not present in the root navigator. This usually means that the linking configuration doesn't match the navigation structure. See https://reactnavigation.org/docs/configuring-links for more details on how to specify a linking configuration."
-          );
+        if (validateRoutesNotExistInRootState(state)) {
           return;
         }
 
@@ -272,7 +263,13 @@ export function useLinking(
         navigation.resetRoot(state);
       }
     });
-  }, [enabled, history, ref]);
+  }, [
+    enabled,
+    history,
+    onUnhandledLinking,
+    ref,
+    validateRoutesNotExistInRootState,
+  ]);
 
   React.useEffect(() => {
     if (!enabled) {
@@ -381,7 +378,12 @@ export function useLinking(
           const currentIndex = history.index;
 
           try {
-            if (nextIndex !== -1 && nextIndex < currentIndex) {
+            if (
+              nextIndex !== -1 &&
+              nextIndex < currentIndex &&
+              // We should only go back if the entry exists and it's less than current index
+              history.get(nextIndex - currentIndex)
+            ) {
               // An existing entry for this path exists and it's less than current index, go back to that
               await history.go(nextIndex - currentIndex);
             } else {

package/src/useLocale.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { LocaleDirContext } from './LocaleDirContext';
+
+/**
+ * Hook to access the text direction specified in the `NavigationContainer`.
+ */
+export function useLocale() {
+  const direction = React.useContext(LocaleDirContext);
+
+  if (direction === undefined) {
+    throw new Error(
+      "Couldn't determine the text direction. Is your component inside NavigationContainer?"
+    );
+  }
+
+  return { direction };
+}

package/src/useScrollToTop.tsx

@@ -1,7 +1,8 @@
 import {
-  EventArg,
-  NavigationProp,
-  useNavigation,
+  type EventArg,
+  NavigationContext,
+  type NavigationProp,
+  type ParamListBase,
   useRoute,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -49,13 +50,18 @@ function getScrollableNode(ref: React.RefObject<ScrollableWrapper>) {
 }
 
 export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
-  const navigation = useNavigation();
+  const navigation = React.useContext(NavigationContext);
   const route = useRoute();
 
+  if (navigation === undefined) {
+    throw new Error(
+      "Couldn't find a navigation object. Is your component inside NavigationContainer?"
+    );
+  }
+
   React.useEffect(() => {
-    let tabNavigations: NavigationProp<ReactNavigation.RootParamList>[] = [];
+    const tabNavigations: NavigationProp<ParamListBase>[] = [];
     let currentNavigation = navigation;
-
     // If the screen is nested inside multiple tab navigators, we should scroll to top for any of them
     // So we need to find all the parent tab navigators and add the listeners there
     while (currentNavigation) {
@@ -74,7 +80,7 @@ export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
       return tab.addListener(
         // We don't wanna import tab types here to avoid extra deps
         // in addition, there are multiple tab implementations
-        // @ts-expect-error
+        // @ts-expect-error the `tabPress` event is only available when navigation type is tab
         'tabPress',
         (e: EventArg<'tabPress', true>) => {
           // We should scroll to top only when the screen is focused

package/src/useThenable.tsx

@@ -6,6 +6,7 @@ export function useThenable<T>(create: () => PromiseLike<T>) {
   let initialState: [boolean, T | undefined] = [false, undefined];
 
   // Check if our thenable is synchronous
+  // eslint-disable-next-line promise/catch-or-return, promise/always-return
   promise.then((result) => {
     initialState = [true, result];
   });

package/src/useUnhandledLinking.tsx

@@ -0,0 +1,91 @@
+import {
+  getStateFromPath,
+  NavigationContext,
+  type NavigationState,
+  type PartialState,
+} from '@react-navigation/core';
+import React from 'react';
+import useLatestCallback from 'use-latest-callback';
+
+import { LinkingContext } from './LinkingContext';
+import { UnhandledLinkingContext } from './UnhandledLinkingContext';
+
+// FIXME: don't rely on depth only to get the navigator state
+function extractNavigatorSpecificState(
+  _: NavigationState,
+  pathState: PartialState<NavigationState>,
+  depth: number
+) {
+  let partialPathState: PartialState<NavigationState> | undefined = pathState;
+
+  let currentDepth = depth;
+  while (currentDepth) {
+    if (!partialPathState) {
+      return undefined;
+    }
+    partialPathState =
+      partialPathState.routes[partialPathState.routes.length - 1].state;
+    currentDepth--;
+  }
+  return partialPathState;
+}
+
+export function UNSTABLE_useUnhandledLinking() {
+  const navigation = React.useContext(NavigationContext);
+  const linking = React.useContext(LinkingContext);
+  const { setLastUnhandledLink, lastUnhandledLink } = React.useContext(
+    UnhandledLinkingContext
+  );
+
+  const { options } = linking;
+
+  const getStateForRouteNamesChange = (
+    currentState: NavigationState
+  ): PartialState<NavigationState> | undefined => {
+    if (lastUnhandledLink == null) {
+      // noop, nothing to handle
+      return;
+    }
+
+    // at web, the path is already extracted
+    const path = lastUnhandledLink;
+    if (!lastUnhandledLink) {
+      return;
+    }
+
+    // First, we parse the URL to get the desired state
+    const getStateFromPathHelper =
+      options?.getStateFromPath ?? getStateFromPath;
+
+    const pathState = getStateFromPathHelper(path, options?.config);
+
+    if (!pathState) {
+      return;
+    }
+
+    let depth = 0;
+    let parent = navigation;
+    while (parent) {
+      depth++;
+      parent = parent.getParent();
+    }
+
+    const state = extractNavigatorSpecificState(currentState, pathState, depth);
+
+    if (!state) {
+      return;
+    }
+
+    return state;
+  };
+
+  const clearUnhandledLink = useLatestCallback(() => {
+    setLastUnhandledLink(undefined);
+  });
+
+  return {
+    lastUnhandledLink,
+    getStateForRouteNamesChange,
+    clearUnhandledLink,
+  };
+}

package/lib/commonjs/theming/ThemeContext.js

@@ -1,14 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ThemeContext = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _DefaultTheme = require("./DefaultTheme");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const ThemeContext = /*#__PURE__*/React.createContext(_DefaultTheme.DefaultTheme);
-exports.ThemeContext = ThemeContext;
-ThemeContext.displayName = 'ThemeContext';
-//# sourceMappingURL=ThemeContext.js.map

package/lib/commonjs/theming/ThemeContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["ThemeContext","React","createContext","DefaultTheme","displayName"],"sourceRoot":"../../../src","sources":["theming/ThemeContext.tsx"],"mappings":";;;;;;AAAA;AAGA;AAA8C;AAAA;AAEvC,MAAMA,YAAY,gBAAGC,KAAK,CAACC,aAAa,CAAQC,0BAAY,CAAC;AAAC;AAErEH,YAAY,CAACI,WAAW,GAAG,cAAc"}