The Text component is a styled text element that provides typography hierarchy through categories, status colors, and appearance variations.
import { Text } from '@ui-kitten/components' ;
Basic Usage import React from 'react' ; import { Text } from '@ui-kitten/components' ; export const TextSimple = () => ( < Text > Simple text content </ Text > );
Categories Text supports multiple category types for different typography hierarchies:
Headings
Subtitles
Paragraphs
Labels & Captions
< Text category = 'h1' > Heading 1 </ Text > < Text category = 'h2' > Heading 2 </ Text > < Text category = 'h3' > Heading 3 </ Text > < Text category = 'h4' > Heading 4 </ Text > < Text category = 'h5' > Heading 5 </ Text > < Text category = 'h6' > Heading 6 </ Text >
Appearances Text has three appearance variations for different contexts:
< Text appearance = 'default' > Default appearance </ Text > < Text appearance = 'alternative' > Alternative appearance </ Text > < Text appearance = 'hint' > Hint appearance </ Text >
Use alternative for displaying light text on dark content and vice versa. Use hint when giving users a hint or secondary information.
Status Colors Text supports status colors to convey different semantic meanings:
< Text status = 'basic' > Basic </ Text > < Text status = 'primary' > Primary </ Text > < Text status = 'success' > Success </ Text > < Text status = 'info' > Info </ Text > < Text status = 'warning' > Warning </ Text > < Text status = 'danger' > Danger </ Text > < Text status = 'control' > Control </ Text >
Use control status when displaying text within a contrast container.
Nested Text Text components can be nested to create rich text compositions:
< Text category = 'h4' > Welcome to < Text status = 'primary' > UI Kitten </ Text > </ Text >
Custom Styling Text can be styled with the style property:
< Text category = 'h5' style = { { textAlign: 'center' , textTransform: 'uppercase' , } } > Custom styled text </ Text >
children
React.ReactText | TextElement | TextElement[]
String, number, or nested Text component(s) to be rendered.
Typography category. Can be:
Headings : h1, h2, h3, h4, h5, h6Subtitles : s1, s2Paragraphs : p1, p2Labels/Captions : c1, c2, label Visual appearance variant:
default - Default text appearancealternative - Light text on dark/dark text on lighthint - Secondary, hint-style text Status color of the text. Can be basic, primary, success, info, warning, danger, or control.
Custom style to apply to the text component.
Accepts all React Native Text component props.
Accessibility < Text accessible = { true } accessibilityRole = "text" accessibilityLabel = "Welcome message" > Welcome to our app </ Text >
Examples Combining Properties < Text category = 'h3' status = 'primary' appearance = 'default' style = { { marginVertical: 8 } } > Featured Content </ Text >
Error Message < Text category = 'c1' status = 'danger' appearance = 'hint' > This field is required </ Text >
Styled Paragraph < Text category = 'p2' appearance = 'hint' style = { { textAlign: 'justify' , lineHeight: 24 , } } > UI Kitten provides a comprehensive set of React Native components based on Eva Design System. Each component is fully customizable and supports both light and dark themes out of the box. </ Text >
Theming Text appearance can be customized through Eva Design System theme. In most cases, custom styling is redundant if a custom theme is configured .
import { Text } from '@ui-kitten/components' ; < Text category = 'h1' > Themed Text </ Text >
