Heading

Semantic heading levels for screen architecture. Uses the theme’s heading font family and maps to the type scale.

When to use: Screen titles (level={1}), section headers (level={2}), card titles (level={3}), subsections (level={4}).

When not to use: Body copy, captions, or UI control labels — use Text instead.

Import

import { Heading } from '@/components';

Usage

<Heading level={1}>Welcome back</Heading>
<Heading level={2}>Your account</Heading>
<Heading level={3}>Recent activity</Heading>
<Heading level={4}>This week</Heading>

Props

Prop	Type	Default	Description
level	1 | 2 | 3 | 4	—	Semantic level and visual scale (required)
style	StyleProp<TextStyle>	—	Additional styles
testID	string	—	For testing

Levels

Level	Size	Weight	Typical use
1	30px	Bold	Screen hero title
2	24px	Bold	Screen section header, modal title
3	20px	Semibold	Card title, subsection header
4	17px	Semibold	List group header

Do / Don’t

Do: Use level to reflect semantic hierarchy — not just visual size.

<Heading level={1}>Settings</Heading>       {/* screen title */}
<Heading level={2}>Notifications</Heading>  {/* section header */}
<Heading level={3}>Push alerts</Heading>    {/* card title */}

Don’t: Use Text with weight overrides to fake a heading.

// ✗
<Text weight="bold" size="lg">Settings</Text>
// ✓
<Heading level={1}>Settings</Heading>

Theme Behavior

The theme.typography.fontFamily.heading font is applied automatically — switching themes updates the typeface. On all built-in themes this defaults to the system font, but custom themes can supply a brand typeface.

Related

• Text — body copy, captions, labels