fix: fix href with useLinkProps. fixes #9930

react-navigation · Sep 26, 2021 · 4ae53e1 · 4ae53e1
1 parent 77080d8
commit 4ae53e1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/packages/native/src/useLinkProps.tsx b/packages/native/src/useLinkProps.tsx
@@ -1,11 +1,13 @@
 import {
+  getPathFromState,
   NavigationAction,
   NavigationContainerRefContext,
   NavigationHelpersContext,
 } from '@react-navigation/core';
 import * as React from 'react';
 import { GestureResponderEvent, Platform } from 'react-native';
 
+import LinkingContext from './LinkingContext';
 import useLinkTo, { To } from './useLinkTo';
 
 type Props<ParamList extends ReactNavigation.RootParamList> = {
@@ -24,6 +26,7 @@ export default function useLinkProps<
 >({ to, action }: Props<ParamList>) {
   const root = React.useContext(NavigationContainerRefContext);
   const navigation = React.useContext(NavigationHelpersContext);
+  const { options } = React.useContext(LinkingContext);
   const linkTo = useLinkTo<ParamList>();
 
   const onPress = (
@@ -63,8 +66,22 @@ export default function useLinkProps<
     }
   };
 
+  const getPathFromStateHelper = options?.getPathFromState ?? getPathFromState;
+
+  const href =
+    typeof to === 'string'
+      ? to
+      : getPathFromStateHelper(
+          {
+            routes: [
+              { name: to.screen, params: to.params as unknown as object },
+            ],
+          },
+          options?.config
+        );
+
   return {
-    href: to,
+    href,
     accessibilityRole: 'link' as const,
     onPress,
   };

diff --git a/packages/native/src/useLinkTo.tsx b/packages/native/src/useLinkTo.tsx
@@ -14,11 +14,11 @@ export type To<
   | string
   | (undefined extends ParamList[RouteName]
       ? {
-          screen: RouteName;
+          screen: Extract<RouteName, string>;
           params?: ParamList[RouteName];
         }
       : {
-          screen: RouteName;
+          screen: Extract<RouteName, string>;
           params: ParamList[RouteName];
         });