useLinkProps hook let's build our custom link components which let us navigate to a screen using a path instead of a screen name based on the
linking options. It takes a path and returns an object with some props that you can pass to a component.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
Then you can use the
LinkButton component elsewhere in your app:
1 2 3
props object returned by
useLinkProps contains the required props for accessible link components. When we use these props on
Text etc., the link component responds to user actions such as
⌘+Click to open links in new tab while keeping regular clicks within the same web page.
There are couple of important things to note when using
useLinkProps with current version of React Native for Web:
- You must explicitly pass
onClickprop, otherwise in-page navigation won't work
- You can only use
TouchableXcomponents don't support a correct
onClickevent which we need
In a future version of React Native for Web, these won't be an issue and you'll be able to have the same code for links on Web, iOS and Android. But until then, you need to write platform specific code for Web and native.
You can pass an object with a
1 2 3 4 5 6 7 8 9
The syntax of this object is the same as navigating to a screen in a nested navigators. This uses a
navigate action for navigation by default, unless you specify a different action.
Alternatively, you can also pass an absolute path to the screen, e.g. -
This will be used for the
href prop as well as for in-page navigation.
Sometimes we want a different behavior for in-page navigation, such as
replace instead of
navigate. We can use the
action prop to customize it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
action prop is not specified, the path provided to the
to prop will be used and dispatched as a