React Native Mantine › Navigation
Anchor
Styled link component
Import: import { Anchor } from 'react-native-mantine';
Usage
import { Anchor } from 'react-native-mantine';
<Anchor href="https://mantine.dev" color="blue">
Open Mantine docs
</Anchor>
<Anchor variant="text" onPress={() => console.log('pressed')}>
Press me
</Anchor>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | MantineColor | 'blue' | Anchor text color from theme |
size | MantineSize | 'md' | Anchor text size |
weight | TextStyle['fontWeight'] | '400' | Anchor text weight |
underline | boolean | true | If true, anchor text is underlined |
variant | Variants<'text' | 'link'> | 'link' | Variant of anchor |
href | string | URL to open when anchor is pressed (opens in browser) | |
onPress | () => void | Called when anchor is pressed | |
children | React.ReactNode | Anchor content | |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks | |
withTextWrapper | boolean | true | If false, children will not be wrapped in a Text component. This is useful when the children contain non-text elements like icons or custom components. |