REACT-NATIVES
WIRED FOR SPEED
react-natives v2.1.2
Theme
Light
Dark
Get Started
Menu
Components
Core Primitives
Heading
A semantic heading component for section titles, with size variants that map to appropriate typographic scales.
Example
Preview
Code
Props
Heading Props
Prop
Type
Default
Description
className
string
—
NativeWind utility classes to apply to the heading element.
size
'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl'
'lg'
Controls the font size of the heading.
isTruncated
boolean
false
When true, truncates the heading with an ellipsis if it overflows.
Usage Guidelines
When to use
Use Heading for page titles, section headers, and any hierarchical text headings.
Best practices
•
Use descending size hierarchy (larger sizes for top-level headings).
•
Pair with Text components for body content below headings.
•
Avoid skipping heading levels in the visual hierarchy.
Accessibility
Heading is rendered with appropriate semantic meaning. Screen readers will announce it as a heading element.
Related Components
Text
A typographic component for rendering text with built-in size, weight, and decoration variants.
Divider
A visual separator that divides content into distinct sections, supporting horizontal and vertical orientations.
Card
A compound container component with header, body, and footer sections for grouping related content.
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.