REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Core Primitives
Text
A typographic component for rendering text with built-in size, weight, and decoration variants.
Example
Preview
Code
Props
Text Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the text element.
size
'2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'
'md'
Controls the font size of the text.
weight
'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold'
'normal'
Controls the font weight of the text.
isTruncated
boolean
false
When true, truncates text with an ellipsis if it overflows.
bold
boolean
false
Shorthand to apply bold font weight.
italic
boolean
false
Renders the text in italic style.
underline
boolean
false
Applies underline text decoration.
strikeThrough
boolean
false
Applies line-through text decoration.
highlight
boolean
false
Applies a highlight background to the text.
sub
boolean
false
Renders the text as subscript.
sup
boolean
false
Renders the text as superscript.
Usage Guidelines
When to use
Use Text for any body copy, labels, or inline text that needs consistent typography.
Best practices
•
Use semantic size variants instead of custom font sizes for consistency.
•
Prefer the weight prop over NativeWind font-weight classes for better cross-platform support.
•
Use isTruncated with numberOfLines for text that may overflow.
Accessibility
Text content is automatically accessible to screen readers. Use accessibilityRole="header" for text that serves as section titles.
Related Components
Heading
A semantic heading component for section titles, with size variants that map to appropriate typographic scales.
Link
A pressable link component for in-app and external navigation with accessible text styling.
Badge
A compound component for displaying short status labels, counts, or tags with semantic color and variant options.
React-Natives
A comprehensive React Native component library.
Documentation
Getting Started
Components
Theming
Community
GitHub
Discord
Twitter
Blog
Support
FAQ
Contact
Contributing
License
© 2026 React-Natives. Wired by WireServers-UI.