@react-navigation/native 7.1.25 → 8.0.0-alpha.0

package/src/useLinkBuilder.tsx

@@ -3,13 +3,13 @@ import {
   findFocusedRoute,
   getActionFromState,
   getPathFromState,
-  getStateFromPath,
   NavigationHelpersContext,
   NavigationRouteContext,
   useStateForPath,
 } from '@react-navigation/core';
 import * as React from 'react';
 
+import { getStateFromHref } from './getStateFromHref';
 import { LinkingContext } from './LinkingContext';
 
 type MinimalState = {
@@ -30,7 +30,6 @@ export function useLinkBuilder() {
   const focusedRouteState = useStateForPath();
 
   const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
-  const getStateFromPathHelper = options?.getStateFromPath ?? getStateFromPath;
   const getActionFromStateHelper =
     options?.getActionFromState ?? getActionFromState;
 
@@ -103,21 +102,19 @@ export function useLinkBuilder() {
 
   const buildAction = React.useCallback(
     (href: string) => {
-      if (!href.startsWith('/')) {
-        throw new Error(`The href must start with '/' (${href}).`);
-      }
-
-      const state = getStateFromPathHelper(href, options?.config);
+      const state = getStateFromHref(href, options);
 
       if (state) {
         const action = getActionFromStateHelper(state, options?.config);
 
         return action ?? CommonActions.reset(state);
       } else {
-        throw new Error('Failed to parse the href to a navigation state.');
+        throw new Error(
+          `Failed to parse href '${href}' to a navigation state.`
+        );
       }
     },
-    [options?.config, getStateFromPathHelper, getActionFromStateHelper]
+    [options, getActionFromStateHelper]
   );
 
   return {

package/src/useLinkProps.tsx

@@ -5,6 +5,7 @@ import {
   NavigationHelpersContext,
   type NavigatorScreenParams,
   type ParamListBase,
+  type RootParamList,
 } from '@react-navigation/core';
 import type { NavigationState, PartialState } from '@react-navigation/routers';
 import * as React from 'react';
@@ -13,7 +14,7 @@ import { type GestureResponderEvent, Platform } from 'react-native';
 import { LinkingContext } from './LinkingContext';
 
 export type LinkProps<
-  ParamList extends ReactNavigation.RootParamList,
+  ParamList extends {} = RootParamList,
   RouteName extends keyof ParamList = keyof ParamList,
 > =
   | ({
@@ -68,12 +69,10 @@ const getStateFromParams = (
  * @param props.href Optional absolute path to use for the href (e.g. `/feeds/hot`).
  * @param props.action Optional action to use for in-page navigation. By default, the path is parsed to an action based on linking config.
  */
-export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
-  screen,
-  params,
-  href,
-  action,
-}: LinkProps<ParamList>) {
+export function useLinkProps<
+  const ParamList extends {} = RootParamList,
+  const RouteName extends keyof ParamList = keyof ParamList,
+>({ screen, params, href, action }: LinkProps<ParamList, RouteName>) {
   const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationHelpersContext);
   const { options } = React.useContext(LinkingContext);
@@ -130,6 +129,36 @@ export function useLinkProps<ParamList extends ReactNavigation.RootParamList>({
 
   const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
 
+  if (Platform.OS === 'web') {
+    if (screen == null && action != null && options?.config != null) {
+      switch (action.type) {
+        case 'NAVIGATE':
+        case 'PUSH':
+        case 'REPLACE':
+        case 'POP_TO':
+        case 'JUMP_TO': {
+          if (
+            action.payload != null &&
+            'name' in action.payload &&
+            typeof action.payload.name === 'string' &&
+            action.payload.name in options.config.screens
+          ) {
+            screen = action.payload.name;
+
+            if (
+              'params' in action.payload &&
+              typeof action.payload.params === 'object' &&
+              action.payload.params != null
+            ) {
+              // @ts-expect-error this is fine 🔥
+              params = action.payload.params;
+            }
+          }
+        }
+      }
+    }
+  }
+
   return {
     href:
       href ??

package/src/useLinking.native.tsx

@@ -8,20 +8,21 @@ import {
 import * as React from 'react';
 import { Linking, Platform } from 'react-native';
 
-import { extractPathFromURL } from './extractPathFromURL';
+import { getStateFromHref } from './getStateFromHref';
 import type { LinkingOptions } from './types';
+import type { Thenable } from './useThenable';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
 type Options = LinkingOptions<ParamListBase>;
 
-const linkingHandlers: symbol[] = [];
+const linkingHandlers = new Set<symbol>();
 
 export function useLinking(
   ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
   {
     enabled = true,
-    prefixes,
+    prefixes = ['*'],
     filter,
     config,
     getInitialURL = () =>
@@ -36,27 +37,15 @@ export function useLinking(
     subscribe = (listener) => {
       const callback = ({ url }: { url: string }) => listener(url);
 
-      const subscription = Linking.addEventListener('url', callback) as
-        | { remove(): void }
-        | undefined;
-
-      // Storing this in a local variable stops Jest from complaining about import after teardown
-      // @ts-expect-error: removeEventListener is not present in newer RN versions
-      const removeEventListener = Linking.removeEventListener?.bind(Linking);
+      const subscription = Linking.addEventListener('url', callback);
 
       return () => {
-        // https://github.com/facebook/react-native/commit/6d1aca806cee86ad76de771ed3a1cc62982ebcd7
-        if (subscription?.remove) {
-          subscription.remove();
-        } else {
-          removeEventListener?.('url', callback);
-        }
+        subscription.remove();
       };
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -69,7 +58,7 @@ export function useLinking(
       return undefined;
     }
 
-    if (enabled !== false && linkingHandlers.length) {
+    if (enabled !== false && linkingHandlers.size) {
       console.error(
         [
           'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
@@ -87,15 +76,11 @@ export function useLinking(
     const handler = Symbol();
 
     if (enabled !== false) {
-      linkingHandlers.push(handler);
+      linkingHandlers.add(handler);
     }
 
     return () => {
-      const index = linkingHandlers.indexOf(handler);
-
-      if (index > -1) {
-        linkingHandlers.splice(index, 1);
-      }
+      linkingHandlers.delete(handler);
     };
   }, [enabled, independent]);
 
@@ -122,15 +107,20 @@ export function useLinking(
 
   const getStateFromURL = React.useCallback(
     (url: string | null | undefined) => {
-      if (!url || (filterRef.current && !filterRef.current(url))) {
+      if (!url) {
         return undefined;
       }
 
-      const path = extractPathFromURL(prefixesRef.current, url);
-
-      return path !== undefined
-        ? getStateFromPathRef.current(path, configRef.current)
-        : undefined;
+      try {
+        return getStateFromHref(url, {
+          prefixes: prefixesRef.current,
+          filter: filterRef.current,
+          config: configRef.current,
+          getStateFromPath: getStateFromPathRef.current,
+        });
+      } catch (e) {
+        return undefined;
+      }
     },
     []
   );
@@ -146,32 +136,22 @@ export function useLinking(
           return url.then((url) => {
             const state = getStateFromURL(url);
 
-            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);
     }
 
-    const thenable = {
+    const thenable: Thenable<ResultState | undefined> = {
       then(onfulfilled?: (state: ResultState | undefined) => void) {
         return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
       },
-      catch() {
-        return thenable;
-      },
     };
 
-    return thenable as PromiseLike<ResultState | undefined>;
-  }, [getStateFromURL, onUnhandledLinking, prefixes]);
+    return thenable;
+  }, [getStateFromURL]);
 
   React.useEffect(() => {
     const listener = (url: string) => {
@@ -183,9 +163,6 @@ export function useLinking(
       const state = navigation ? getStateFromURL(url) : undefined;
 
       if (navigation && state) {
-        // If the link were handled, it gets cleared in NavigationContainer
-        onUnhandledLinking(extractPathFromURL(prefixes, url));
-
         const action = getActionFromStateRef.current(state, configRef.current);
 
         if (action !== undefined) {
@@ -209,7 +186,7 @@ export function useLinking(
     };
 
     return subscribe(listener);
-  }, [enabled, getStateFromURL, onUnhandledLinking, prefixes, ref, subscribe]);
+  }, [enabled, getStateFromURL, prefixes, ref, subscribe]);
 
   return {
     getInitialState,

package/src/useLinking.tsx

@@ -14,9 +14,25 @@ import * as React from 'react';
 import { createMemoryHistory } from './createMemoryHistory';
 import { ServerContext } from './ServerContext';
 import type { LinkingOptions } from './types';
+import type { Thenable } from './useThenable';
 
 type ResultState = ReturnType<typeof getStateFromPathDefault>;
 
+/**
+ * Calculate total history length including both navigator history and route history
+ */
+const getTotalHistoryLength = (state: NavigationState): number => {
+  const baseHistoryLength = state.history
+    ? state.history.length
+    : state.routes.length;
+
+  const routeHistoryLength = state.routes.reduce((acc, r) => {
+    return acc + (r.history ? r.history.length : 0);
+  }, 0);
+
+  return baseHistoryLength + routeHistoryLength;
+};
+
 /**
  * Find the matching navigation state that changed between 2 navigation states
  * e.g.: a -> b -> c -> d and a -> b -> c -> e -> f, if history in b changed, b is the matching state
@@ -29,9 +45,8 @@ const findMatchingState = <T extends NavigationState>(
     return [undefined, undefined];
   }
 
-  // Tab and drawer will have `history` property, but stack will have history in `routes`
-  const aHistoryLength = a.history ? a.history.length : a.routes.length;
-  const bHistoryLength = b.history ? b.history.length : b.routes.length;
+  const aHistoryLength = getTotalHistoryLength(a);
+  const bHistoryLength = getTotalHistoryLength(b);
 
   const aRoute = a.routes[a.index];
   const bRoute = b.routes[b.index];
@@ -40,13 +55,15 @@ const findMatchingState = <T extends NavigationState>(
   const bChildState = bRoute.state as T | undefined;
 
   // Stop here if this is the state object that changed:
-  // - history length is different
+  // - total history length is different (including route.history)
   // - focused routes are different
+  // - route.history length is different
   // - one of them doesn't have child state
   // - child state keys are different
   if (
     aHistoryLength !== bHistoryLength ||
     aRoute.key !== bRoute.key ||
+    (aRoute.history?.length || 0) !== (bRoute.history?.length || 0) ||
     aChildState === undefined ||
     bChildState === undefined ||
     aChildState.key !== bChildState.key
@@ -69,7 +86,7 @@ export const series = (cb: () => Promise<void>) => {
   return callback;
 };
 
-const linkingHandlers: symbol[] = [];
+const linkingHandlers = new Set<symbol>();
 
 type Options = LinkingOptions<ParamListBase>;
 
@@ -81,8 +98,7 @@ export function useLinking(
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options,
-  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
+  }: Options
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -95,7 +111,7 @@ export function useLinking(
       return undefined;
     }
 
-    if (enabled !== false && linkingHandlers.length) {
+    if (enabled !== false && linkingHandlers.size) {
       console.error(
         [
           'Looks like you have configured linking in multiple places. This is likely an error since deep links should only be handled in one place to avoid conflicts. Make sure that:',
@@ -110,15 +126,11 @@ export function useLinking(
     const handler = Symbol();
 
     if (enabled !== false) {
-      linkingHandlers.push(handler);
+      linkingHandlers.add(handler);
     }
 
     return () => {
-      const index = linkingHandlers.indexOf(handler);
-
-      if (index > -1) {
-        linkingHandlers.splice(index, 1);
-      }
+      linkingHandlers.delete(handler);
     };
   }, [enabled, independent]);
 
@@ -167,21 +179,15 @@ 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 = {
-      then(onfulfilled?: (state: ResultState | undefined) => void) {
+    const thenable: Thenable<ResultState | undefined> = {
+      then(onfulfilled) {
         return Promise.resolve(onfulfilled ? onfulfilled(value) : value);
       },
-      catch() {
-        return thenable;
-      },
     };
 
-    return thenable as PromiseLike<ResultState | undefined>;
+    return thenable;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -224,8 +230,6 @@ 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
         if (validateRoutesNotExistInRootState(state)) {
@@ -263,13 +267,7 @@ export function useLinking(
         navigation.resetRoot(state);
       }
     });
-  }, [
-    enabled,
-    history,
-    onUnhandledLinking,
-    ref,
-    validateRoutesNotExistInRootState,
-  ]);
+  }, [enabled, history, ref, validateRoutesNotExistInRootState]);
 
   React.useEffect(() => {
     if (!enabled) {
@@ -381,12 +379,8 @@ export function useLinking(
         path !== pendingPath
       ) {
         const historyDelta =
-          (focusedState.history
-            ? focusedState.history.length
-            : focusedState.routes.length) -
-          (previousFocusedState.history
-            ? previousFocusedState.history.length
-            : previousFocusedState.routes.length);
+          getTotalHistoryLength(focusedState) -
+          getTotalHistoryLength(previousFocusedState);
 
         if (historyDelta > 0) {
           // If history length is increased, we should pushState

package/src/useScrollToTop.tsx

@@ -62,7 +62,9 @@ export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
 
   React.useEffect(() => {
     const tabNavigations: NavigationProp<ParamListBase>[] = [];
-    let currentNavigation = navigation;
+    let currentNavigation: NavigationProp<ParamListBase> | undefined =
+      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) {

package/src/useThenable.tsx

@@ -1,15 +1,23 @@
 import * as React from 'react';
 
-export function useThenable<T>(create: () => PromiseLike<T>) {
+export type Thenable<T> = {
+  then(onfulfilled?: (value: T) => unknown): PromiseLike<unknown>;
+};
+
+export function useThenable<T>(create: () => Thenable<T> | undefined) {
   const [promise] = React.useState(create);
 
   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];
-  });
+  if (promise == null) {
+    initialState = [true, undefined];
+  } else {
+    // Check if our thenable is synchronous
+    // eslint-disable-next-line promise/catch-or-return, promise/always-return
+    promise.then((result) => {
+      initialState = [true, result];
+    });
+  }
 
   const [state, setState] = React.useState(initialState);
   const [resolved] = state;

package/lib/module/UnhandledLinkingContext.js

@@ -1,14 +0,0 @@
-"use strict";
-
-import * as React from 'react';
-const MISSING_CONTEXT_ERROR = "Couldn't find an UnhandledLinkingContext context.";
-export const UnhandledLinkingContext = /*#__PURE__*/React.createContext({
-  get lastUnhandledLink() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setLastUnhandledLink() {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  }
-});
-UnhandledLinkingContext.displayName = 'UnhandledLinkingContext';
-//# sourceMappingURL=UnhandledLinkingContext.js.map

package/lib/module/UnhandledLinkingContext.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["React","MISSING_CONTEXT_ERROR","UnhandledLinkingContext","createContext","lastUnhandledLink","Error","setLastUnhandledLink","displayName"],"sourceRoot":"../../src","sources":["UnhandledLinkingContext.tsx"],"mappings":";;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAE9B,MAAMC,qBAAqB,GACzB,mDAAmD;AAErD,OAAO,MAAMC,uBAAuB,gBAAGF,KAAK,CAACG,aAAa,CAGvD;EACD,IAAIC,iBAAiBA,CAAA,EAAQ;IAC3B,MAAM,IAAIC,KAAK,CAACJ,qBAAqB,CAAC;EACxC,CAAC;EACD,IAAIK,oBAAoBA,CAAA,EAAQ;IAC9B,MAAM,IAAID,KAAK,CAACJ,qBAAqB,CAAC;EACxC;AACF,CAAC,CAAC;AAEFC,uBAAuB,CAACK,WAAW,GAAG,yBAAyB","ignoreList":[]}

package/lib/typescript/src/UnhandledLinkingContext.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export declare const UnhandledLinkingContext: React.Context<{
-    lastUnhandledLink: string | undefined;
-    setLastUnhandledLink: (lastUnhandledUrl: string | undefined) => void;
-}>;
-//# sourceMappingURL=UnhandledLinkingContext.d.ts.map

package/lib/typescript/src/UnhandledLinkingContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"UnhandledLinkingContext.d.ts","sourceRoot":"","sources":["../../../src/UnhandledLinkingContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,uBAAuB;uBACf,MAAM,GAAG,SAAS;0BACf,CAAC,gBAAgB,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI;EAQpE,CAAC"}

package/src/UnhandledLinkingContext.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react';
-
-const MISSING_CONTEXT_ERROR =
-  "Couldn't find an UnhandledLinkingContext context.";
-
-export const UnhandledLinkingContext = React.createContext<{
-  lastUnhandledLink: string | undefined;
-  setLastUnhandledLink: (lastUnhandledUrl: string | undefined) => void;
-}>({
-  get lastUnhandledLink(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-  get setLastUnhandledLink(): any {
-    throw new Error(MISSING_CONTEXT_ERROR);
-  },
-});
-
-UnhandledLinkingContext.displayName = 'UnhandledLinkingContext';