useLinkProps
The 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.
Example:
import { useLinkProps } from '@react-navigation/native';
// ...
const LinkButton = ({ to, action, children, ...rest }) => {
const { onPress, ...props } = useLinkProps({ to, action });
const [isHovered, setIsHovered] = React.useState(false);
if (Platform.OS === 'web') {
// It's important to use a `View` or `Text` on web instead of `TouchableX`
// Otherwise React Native for Web omits the `onClick` prop that's passed
// You'll also need to pass `onPress` as `onClick` to the `View`
// You can add hover effects using `onMouseEnter` and `onMouseLeave`
return (
<View
onClick={onPress}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
style={{ transitionDuration: '150ms', opacity: isHovered ? 0.5 : 1 }}
{...props}
{...rest}
>
<Text>{children}</Text>
</View>
);
}
return (
<TouchableOpacity onPress={onPress} {...props} {...rest}>
<Text>{children}</Text>
</TouchableOpacity>
);
};
function Home() {
return <LinkButton to={{ screen: 'Profile', params: { id: 'jane' } }}>Go to Jane's profile</LinkButton>;
}
Then you can use the LinkButton
component elsewhere in your app:
function Home() {
return <LinkButton to={{ screen: 'Profile', params: { id: 'jane' } }}>Go to Jane's profile</LinkButton>;
}
The props
object returned by useLinkProps
contains the required props for accessible link components. When we use these props on View
, Text
etc., the link component responds to user actions such as Ctrl+Click
/⌘+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
onPress
as theonClick
prop, otherwise in-page navigation won't work - You can only use
View
orText
withuseLinkProps
. TheTouchableX
components don't support a correctonClick
event 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.
Options
to
You can pass an object with a screen
property:
function Home() {
return (
<LinkButton
to={{ screen: 'Profile', params: { id: 'jane' } }}
>
Go to Jane's profile
</LinkButton>
);
}
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. - /profile/jane
.
This will be used for the href
prop as well as for in-page navigation.
action
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:
Example:
import { StackActions } from '@react-navigation/native';
// ...
function Home() {
return (
<LinkButton
to={{ screen: 'Profile', params: { id: 'jane' } }}
action={StackActions.replace('Profile', { id: 'jane' })}
>
Go to Jane's profile
</LinkButton>
);
}
If the action
prop is not specified, the path provided to the to
prop will be used and dispatched as a navigate
action.