React Native Mantine › Typography
Title
Semantic heading with size variants
Import: import { Title } from 'react-native-mantine';
Usage
import { Title } from 'react-native-mantine';
<Title order={1}>Main Heading</Title>
<Title order={2}>Subheading</Title>
<Title order={3}>Section Title</Title>
// With custom styling
<Title order={2} style={{ color: '#228be6' }}>
Colored Title
</Title>
// With text alignment
<Title order={1} align="center">
Centered Title
</Title>Props
| Prop | Type | Default | Description |
|---|---|---|---|
order | 1 | 2 | 3 | 4 | 5 | 6 | 1 | Heading order (h1-h6), determines the font size from theme.headings.sizes |
children | React.ReactNode | Text content to display in the heading | |
withTextWrapper | boolean | true | If false, returns children without wrapping in Text component |
style | TextStyle | Additional styles to apply to the title text | |
size | string | Text size (inherited from Text, but typically controlled by order prop) | |
color | string | Text color - can be a theme color name or any valid color string | |
white | boolean | false | Sets text color to white |
bold | boolean | false | Applies bold font weight (headings are bold by default) |
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 |