useLinkProps
The useLinkProps
hook lets us build our custom link component. The link component can be used as a button to navigate to a screen. On the web, it will be rendered as an anchor tag (<a>
) with the href
attribute so that all the accessibility features of a link are preserved, e.g. - such as Right click -> Open link in new tab"
, Ctrl+Click
/⌘+Click
etc.
It returns an object with some props that you can pass to a component.
Example:
import { useLinkProps } from '@react-navigation/native';
// ...
const LinkButton = ({ screen, params, action, href, children, ...rest }) => {
const props = useLinkProps({ screen, params, action, href });
const [isHovered, setIsHovered] = React.useState(false);
return (
<Pressable {...props} {...rest}>
<Text>{children}</Text>
</Pressable>
);
};
Then you can use the LinkButton
component elsewhere in your app:
function Home() {
return (
<LinkButton screen="Profile" params={{ id: 'jane' }}>
Go to Jane's profile
</LinkButton>
);
}
Options
screen
and params
You can pass screen
and params
to navigate to a screen on press:
function Home() {
return (
<LinkButton screen="Profile" params={{ id: 'jane' }}>
Go to Jane's profile
</LinkButton>
);
}
If you want to navigate to a nested screen, you can pass the name of the screen
in params
similar to navigating to a screen in a nested navigator:
<LinkButton screen="Root" params={{ screen: 'Post', params: { id: 123 } }}>
Go to post 123
</LinkButton>
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
screen="Profile"
params={{ id: 'jane' }}
action={StackActions.replace('Profile', { id: 'jane' })}
>
Go to Jane's profile
</LinkButton>
);
}
The screen
and params
props can be omitted if the action
prop is specified. In that case, we recommend specifying the href
prop as well to ensure that the link is accessible.
href
The href
is used for the href
attribute of the anchor tag on the Web to make the links accessible. By default, this is automatically determined based on the linking
options using the screen
and params
props.
If you want to use a custom href
, you can pass it as the href
prop:
function Home() {
return (
<LinkButton
action={StackActions.replace('Profile', { id: 'jane' })}
href="/users/jane"
>
Getting Started
</LinkButton>
);
}