Typography

Typography renders text using the Material Design 3 type scale.

Usage

Open on Snack ↗

import { Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/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

Accessibility

Display and headline variants automatically receive accessibilityRole="header" for screen readers.

Custom Styles

Open on Snack ↗

import { Typography } from '@onlynative/components'
import { ThemeProvider } from '@onlynative/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 '@onlynative/components'
import { ThemeProvider } from '@onlynative/core'
import { SafeAreaProvider } from 'react-native-safe-area-context'
import { Animated, 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

Prop	Type	Default	Required	Description
children	ReactNode	-	Yes	Content to display. Accepts strings, numbers, or nested elements.
variant	enum	bodyMedium	No	MD3 type scale role. Controls font size, weight, line height, and letter spacing.
color	string	-	No	Override the text color. Takes priority over `style.color`. Defaults to the theme's `onSurface` color.
style	StyleProp<TextStyle>	-	No	Additional text styles. Can override the default theme color via `style.color` when no `color` prop is set.
as	ComponentType<TextProps>	Text	No	Override the underlying text component (e.g. Animated.Text).