Typography

Theme-aware text component with i18n support, text decoration, alignment, and loading states.

Basic Usage

import { Typography } from '@multinaire/expo-ui';

<Typography>Hello World</Typography>

<Typography type="heading" weight="bold" color="primary">
  Styled Text
</Typography>

Props

Prop	Type	Default	Description
type	StyleKeys	'body'	Text style preset. Options: 'display', 'heading', 'subheading', 'title', 'body', 'caption'
weight	TextKeys	'regular'	Font weight. Options: 'regular', 'medium', 'bold'
color	ColorKeys	'onBackground'	Text color key from the active theme palette
alignment	TextStyle['textAlign']	—	Text alignment. Equivalent to textAlign property
decoration	TextStyle['textDecorationLine']	—	Text decoration line. Equivalent to textDecorationLine property
transform	TextStyle['textTransform']	—	Text transform. Equivalent to textTransform property
center	boolean	false	⚠️ Deprecated. Use alignment="center" instead
margin	SpacingProps	—	Outer margin. Accepts a number for uniform margin, or an object for per-side control
flex	number	—	Flex grow value
isLoading	boolean	false	Show a loading skeleton in place of the text
textWidth	number	200	Width of the loading skeleton in pixels
translate	boolean	true	When true, string children are passed through the i18n translation function. Defaults to true
selectable	boolean	false	Whether the text can be selected/copied by the user. Defaults to false to match native platform behavior — on web, RN Text is selectable by default unless set otherwise
onPress	(event: GestureResponderEvent) => void	—	Press handler. When provided, the text is wrapped in a pressable with the same press/hover feedback as the button components

All standard React Native TextProps are also supported and forwarded.

Examples

Text Styles

<Typography type="heading">Heading</Typography>
<Typography type="subheading">Subheading</Typography>
<Typography type="body">Body text</Typography>
<Typography type="caption">Caption</Typography>

Font Weights

<Typography weight="regular">Regular</Typography>
<Typography weight="medium">Medium</Typography>
<Typography weight="bold">Bold</Typography>

Colors

<Typography color="primary">Primary</Typography>
<Typography color="secondary">Secondary</Typography>
<Typography color="error">Error</Typography>

Text Alignment

<Typography alignment="center">Centered text</Typography>
<Typography alignment="right">Right-aligned text</Typography>
<Typography alignment="justify">Justified text</Typography>

Text Decoration

<Typography decoration="underline">Underlined text</Typography>
<Typography decoration="line-through">Strikethrough text</Typography>
<Typography decoration="underline line-through">Both</Typography>

Text Transform

<Typography transform="uppercase">UPPERCASE TEXT</Typography>
<Typography transform="lowercase">lowercase text</Typography>
<Typography transform="capitalize">Capitalized Text</Typography>

Loading State

<Typography isLoading textWidth={150}>
  This text is loading
</Typography>

Pressable Text

Passing onPress wraps the text in a pressable that dims on press and hover, matching the feedback of Button, IconButton, and Badge. margin and flex are applied to that wrapper, so surrounding layout is unaffected.

<Typography color="primary" decoration="underline" onPress={openTerms}>
  Terms of Service
</Typography>

With Translation

// Automatically translates using i18next
<Typography>welcome_message</Typography>

// Disable translation
<Typography translate={false}>Literal text</Typography>

Migration

The center prop is deprecated. Replace it with alignment="center":

// Before
<Typography center>Centered text</Typography>

// After
<Typography alignment="center">Centered text</Typography>