React Native Mantine › Typography
Mark
Marked/highlighted inline text
Import: import { Mark } from 'react-native-mantine';
Usage
import { Mark, Text } from 'react-native-mantine';
// Default yellow highlight
<Text>
This is <Mark>highlighted</Mark> text
</Text>
// Custom color
<Text>
<Mark color="blue">Important</Mark> notice
</Text>
// Multiple marks
<Text>
<Mark color="yellow">Warning</Mark> and <Mark color="red">Error</Mark>
</Text>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | 'yellow' | Background color key from theme.colors (e.g., "yellow", "blue") or color value |
children | React.ReactNode | Text content to highlight with background color | |
withTextWrapper | boolean | true | If false, returns children without wrapping in Text component |
style | TextStyle | Additional styles to apply to the text | |
size | string | Text size from theme (inherited from Text) | |
white | boolean | false | Sets text color to white |
bold | boolean | false | Applies bold font weight |
semiBold | boolean | false | Applies semi-bold font weight |
weight | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | Font weight - numeric values from 100 (thin) to 900 (black) | |
align | 'left' | 'center' | 'right' | 'justify' | Text alignment |