Typography

Typography renders text using the Material Design 3 type scale.

Usage

Open on Snack ↗

import { Typography } from '@rootnative/components'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, justifyContent: 'center', padding: 16, gap: 8 }}>
          <Typography variant="headlineMedium">Hello World</Typography>
          <Typography variant="bodyLarge">Body text content.</Typography>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Variants

The full MD3 type scale:

Category	Variants
Display	displayLarge, displayMedium, displaySmall
Headline	headlineLarge, headlineMedium, headlineSmall
Title	titleLarge, titleMedium, titleSmall
Body	bodyLarge, bodyMedium, bodySmall
Label	labelLarge, labelMedium, labelSmall

Each of the 15 roles also has an MD3 Expressive <name>Emphasized counterpart — same size and line height, weight one step heavier — so variant accepts 30 values in total:

Category	Emphasized variants
Display	displayLargeEmphasized, displayMediumEmphasized, displaySmallEmphasized
Headline	headlineLargeEmphasized, headlineMediumEmphasized, headlineSmallEmphasized
Title	titleLargeEmphasized, titleMediumEmphasized, titleSmallEmphasized
Body	bodyLargeEmphasized, bodyMediumEmphasized, bodySmallEmphasized
Label	labelLargeEmphasized, labelMediumEmphasized, labelSmallEmphasized

<Typography variant="titleMediumEmphasized">Emphasized title</Typography>

Use an emphasized variant instead of a base variant plus a fontWeight override. The emphasized tokens also adjust tracking, which a weight override does not.

Accessibility

Display and headline variants receive accessibilityRole="header" for screen readers unless you pass an explicit accessibilityRole, which always wins.

Custom Styles

Open on Snack ↗

import { Typography } from '@rootnative/components'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Typography variant="bodyMedium" style={{ color: 'red' }}>
            Custom colored text
          </Typography>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Custom Text Component

Use the as prop to render with a custom text component:

Open on Snack ↗

import { Typography } from '@rootnative/components'
import { ThemeProvider } from '@rootnative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Animated } from '@rootnative/inertia/reanimated'
import { View } from 'react-native'

export default function App() {
  return (
    <SafeAreaProvider>
      <ThemeProvider>
        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
          <Typography variant="titleLarge" as={Animated.Text}>
            Animated text
          </Typography>
        </View>
      </ThemeProvider>
    </SafeAreaProvider>
  )
}

Props

This component has no custom props.