@react-navigation/native 8.0.0-alpha.5 → 8.0.0-alpha.51

package/src/useLinking.native.tsx

@@ -2,7 +2,9 @@ import {
   getActionFromState as getActionFromStateDefault,
   getStateFromPath as getStateFromPathDefault,
   type NavigationContainerRef,
+  type NavigationState,
   type ParamListBase,
+  type PartialState,
   useNavigationIndependentTree,
 } from '@react-navigation/core';
 import * as React from 'react';
@@ -12,14 +14,10 @@ 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 = new Set<symbol>();
 
-export function useLinking(
-  ref: React.RefObject<NavigationContainerRef<ParamListBase> | null>,
+export function useLinking<ParamList extends ParamListBase>(
+  ref: React.RefObject<NavigationContainerRef<ParamList> | null>,
   {
     enabled = true,
     prefixes = ['*'],
@@ -45,7 +43,7 @@ export function useLinking(
     },
     getStateFromPath = getStateFromPathDefault,
     getActionFromState = getActionFromStateDefault,
-  }: Options
+  }: LinkingOptions<ParamListBase>
 ) {
   const independent = useNavigationIndependentTree();
 
@@ -58,28 +56,39 @@ export function useLinking(
       return undefined;
     }
 
-    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:',
-          "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
-          '- Only a single instance of the root component is rendered',
-          Platform.OS === 'android'
-            ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
-            : '',
-        ]
-          .join('\n')
-          .trim()
-      );
-    }
-
     const handler = Symbol();
 
     if (enabled !== false) {
       linkingHandlers.add(handler);
     }
 
+    // In some cases, the effect cleanup may get called out of order
+    // This may result in multiple linking handlers being registered
+    // For example, when changing the wallpaper on Android
+    // Showing the error in a delay avoids false positives
+    const timer = setTimeout(() => {
+      if (
+        enabled !== false &&
+        linkingHandlers.size &&
+        !(linkingHandlers.size === 1 && linkingHandlers.has(handler))
+      ) {
+        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:',
+            "- You don't have multiple NavigationContainers in the app each with 'linking' enabled",
+            '- Only a single instance of the root component is rendered',
+            Platform.OS === 'android'
+              ? "- You have set 'android:launchMode=singleTask' in the '<activity />' section of the 'AndroidManifest.xml' file to avoid launching multiple instances"
+              : '',
+          ]
+            .join('\n')
+            .trim()
+        );
+      }
+    }, 1000);
+
     return () => {
+      clearTimeout(timer);
       linkingHandlers.delete(handler);
     };
   }, [enabled, independent]);
@@ -106,18 +115,22 @@ export function useLinking(
   });
 
   const getStateFromURL = React.useCallback(
-    (url: string | null | undefined) => {
+    (url: string | null | undefined, previous: NavigationState | undefined) => {
       if (!url) {
         return undefined;
       }
 
       try {
-        return getStateFromHref(url, {
-          prefixes: prefixesRef.current,
-          filter: filterRef.current,
-          config: configRef.current,
-          getStateFromPath: getStateFromPathRef.current,
-        });
+        return getStateFromHref(
+          url,
+          {
+            prefixes: prefixesRef.current,
+            filter: filterRef.current,
+            config: configRef.current,
+            getStateFromPath: getStateFromPathRef.current,
+          },
+          previous
+        );
       } catch (e) {
         return undefined;
       }
@@ -126,7 +139,7 @@ export function useLinking(
   );
 
   const getInitialState = React.useCallback(() => {
-    let state: ResultState | undefined;
+    let state: PartialState<NavigationState> | undefined;
 
     if (enabledRef.current) {
       const url = getInitialURLRef.current();
@@ -134,18 +147,20 @@ export function useLinking(
       if (url != null) {
         if (typeof url !== 'string') {
           return url.then((url) => {
-            const state = getStateFromURL(url);
+            const state = getStateFromURL(url, undefined);
 
             return state;
           });
         }
       }
 
-      state = getStateFromURL(url);
+      state = getStateFromURL(url, undefined);
     }
 
-    const thenable: Thenable<ResultState | undefined> = {
-      then(onfulfilled?: (state: ResultState | undefined) => void) {
+    const thenable: Thenable<PartialState<NavigationState> | undefined> = {
+      then(
+        onfulfilled?: (state: PartialState<NavigationState> | undefined) => void
+      ) {
         return Promise.resolve(onfulfilled ? onfulfilled(state) : state);
       },
     };
@@ -155,19 +170,35 @@ export function useLinking(
 
   React.useEffect(() => {
     const listener = (url: string) => {
-      if (!enabled) {
+      const navigation = ref.current;
+
+      if (!enabled || !navigation) {
         return;
       }
 
-      const navigation = ref.current;
-      const state = navigation ? getStateFromURL(url) : undefined;
+      const rootState = navigation.getRootState();
+
+      const state = getStateFromURL(url, rootState);
+
+      REACT_NAVIGATION_DEVTOOLS.get(navigation)?.listeners.forEach(
+        (listener) => {
+          listener({
+            type: 'link',
+            url,
+            state,
+          });
+        }
+      );
 
-      if (navigation && state) {
+      if (state) {
         const action = getActionFromStateRef.current(state, configRef.current);
 
         if (action !== undefined) {
           try {
-            navigation.dispatch(action);
+            navigation.dispatch({
+              target: rootState?.key,
+              ...action,
+            });
           } catch (e) {
             // Ignore any errors from deep linking.
             // This could happen in case of malformed links, navigation object not being initialized etc.