@react-navigation/native 7.0.0-alpha.4 → 7.0.0-alpha.6

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';
@@ -63,12 +63,13 @@ const findMatchingState = <T extends NavigationState>(
 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>;
 
@@ -80,7 +81,8 @@ export function useLinking(
     getStateFromPath = getStateFromPathDefault,
     getPathFromState = getPathFromStateDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: Options,
+  onUnhandledLinking: (lastUnhandledLining: string | undefined) => void
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -139,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(() => {
@@ -154,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 = {
@@ -183,6 +199,8 @@ export function useLinking(
         return;
       }
 
+      const { location } = window;
+
       const path = location.pathname + location.search;
       const index = history.index;
 
@@ -206,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;
         }
 
@@ -248,7 +263,13 @@ export function useLinking(
         navigation.resetRoot(state);
       }
     });
-  }, [enabled, history, ref]);
+  }, [
+    enabled,
+    history,
+    onUnhandledLinking,
+    ref,
+    validateRoutesNotExistInRootState,
+  ]);
 
   React.useEffect(() => {
     if (!enabled) {

package/src/useScrollToTop.tsx

@@ -1,6 +1,6 @@
 import {
-  EventArg,
-  NavigationProp,
+  type EventArg,
+  type NavigationProp,
   useNavigation,
   useRoute,
 } from '@react-navigation/core';
@@ -53,7 +53,7 @@ export function useScrollToTop(ref: React.RefObject<ScrollableWrapper>) {
   const route = useRoute();
 
   React.useEffect(() => {
-    let tabNavigations: NavigationProp<ReactNavigation.RootParamList>[] = [];
+    const tabNavigations: NavigationProp<ReactNavigation.RootParamList>[] = [];
     let currentNavigation = navigation;
 
     // If the screen is nested inside multiple tab navigators, we should scroll to top for any of them
@@ -74,7 +74,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,90 @@
+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';
+
+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 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/typescript/src/__mocks__/createStackNavigator.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"createStackNavigator.d.ts","sourceRoot":"","sources":["../../../../src/__mocks__/createStackNavigator.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAW/B,CAAC"}