Text

Typography component with theme support

Import: import { Text } from 'react-native-mantine';

Usage

import { Text } from 'react-native-mantine';

<Text
  size="lg"
  weight="600"
  color="blue"
  align="center"
>
  Styled text
</Text>

// With custom font size
<Text fontSize={20} color="red">
  Custom sized text
</Text>

// Bold text
<Text bold>Bold text</Text>

// Semi-bold text
<Text semiBold>Semi-bold text</Text>

Props

Prop	Type	Default	Description
`size`	`string`	`'md'`	Predefined text size from theme (e.g., "xs", "sm", "md", "lg", "xl")
`color`	`string`	`theme.light.text`	Text color - can be a theme color name (e.g., "blue", "red") or any valid color string
`white`	`boolean`	`false`	Sets text color to white, useful for dark backgrounds
`bold`	`boolean`	`false`	Applies bold font weight using theme font family
`semiBold`	`boolean`	`false`	Applies semi-bold font weight using theme font family
`weight`	`'100' \| '200' \| '300' \| '400' \| '500' \| '600' \| '700' \| '800' \| '900'`		Font weight - numeric values from 100 (thin) to 900 (black)
`fontSize`	`number`		Custom font size in pixels, overrides the size prop
`align`	`'left' \| 'center' \| 'right' \| 'justify'`		Text alignment
`questrial`	`boolean`	`false`	Uses Questrial font family if available
`style`	`TextStyle`		Additional styles to apply to the text
`children`	`React.ReactNode`		Text content to display

Source on GitHub · npm