This is documentation for the next SDK version. For up-to-date documentation, see the latest version (SDK 54).

Text

A Jetpack Compose Text component for displaying styled text.

Android

GitHub

npm

Changelog

Expo UI Text matches the official Jetpack Compose Text styling API and displays text with Material 3 typography styles, custom fonts, and text formatting options.

Installation

Terminal

- npx expo install @expo/ui

If you are installing this in an existing React Native app, make sure to install expo in your project.

Usage

Basic text

BasicTextExample.tsx

import { Host, Text } from '@expo/ui/jetpack-compose';

export default function BasicTextExample() {
  return (
    <Host matchContents>
      <Text>Hello, world!</Text>
    </Host>
  );
}

Typography styles

Use the style prop with typography to apply Material 3 typography presets.

TypographyExample.tsx

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function TypographyExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ typography: 'displayLarge' }}>Display Large</Text>
        <Text style={{ typography: 'headlineMedium' }}>Headline Medium</Text>
        <Text style={{ typography: 'bodySmall' }}>Body Small</Text>
        <Text style={{ typography: 'labelLarge' }}>Label Large</Text>
      </Column>
    </Host>
  );
}

Text with maxLines and overflow

Control text truncation with maxLines and overflow.

TextOverflowExample.tsx

import { Host, Text } from '@expo/ui/jetpack-compose';
import { width } from '@expo/ui/jetpack-compose/modifiers';

export default function TextOverflowExample() {
  return (
    <Host matchContents>
      <Text maxLines={2} overflow="ellipsis" modifiers={[width(200)]}>
        This is a long paragraph of text that will be truncated after two lines with an ellipsis at
        the end to indicate there is more content.
      </Text>
    </Host>
  );
}

Styled text

Apply custom text styles including font weight, style, size, and decoration.

StyledTextExample.tsx

import { Host, Text, Column } from '@expo/ui/jetpack-compose';
import { paddingAll } from '@expo/ui/jetpack-compose/modifiers';

export default function StyledTextExample() {
  return (
    <Host matchContents>
      <Column modifiers={[paddingAll(16)]}>
        <Text style={{ fontWeight: 'bold', fontSize: 20 }}>Bold text</Text>
        <Text style={{ fontStyle: 'italic' }}>Italic text</Text>
        <Text style={{ textDecoration: 'underline' }}>Underlined text</Text>
        <Text style={{ letterSpacing: 4 }}>Spaced out text</Text>
        <Text color="#E91E63" style={{ fontSize: 18, textAlign: 'center' }}>
          Colored and centered
        </Text>
      </Column>
    </Host>
  );
}

API

import { Text } from '@expo/ui/jetpack-compose';

Component

`Text`

Android

Type: React.Element<TextProps>

Renders a Text component using Jetpack Compose.

The Text component provides comprehensive text styling capabilities. The API is aligned with Jetpack Compose's Text composable, where:

Top-level props (color, maxLines, etc.) match Compose's Text parameters
style object corresponds to TextStyle, including typography, fontSize, fontWeight, textAlign, etc.
style.typography applies Material 3 typography styles (like MaterialTheme.typography)

Example

Basic usage:

import { Text } from 'expo-ui';

<Text>Hello World</Text>

Example

Using Material 3 Typography (matches Jetpack Compose MaterialTheme.typography):

<Text style={{ typography: "bodyLarge" }}>Body text</Text>
<Text style={{ typography: "headlineMedium" }}>Headline</Text>
<Text style={{ typography: "titleSmall" }}>Small title</Text>

Example

Typography with style overrides:

<Text
  color="#007AFF"
  style={{
    typography: "bodyLarge",
    fontWeight: "bold"  // Override the typography's font weight
  }}
>
  Custom styled body text
</Text>

Example

With custom style object (matches Jetpack Compose TextStyle):

<Text
  color="#007AFF"
  style={{
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "center",
    letterSpacing: 1.2
  }}
  modifiers={[ExpoUI.padding(16)]}
>
  Styled text
</Text>

Example

Text truncation with ellipsis:

<Text
  maxLines={2}
  overflow="ellipsis"
>
  This is a very long text that will be truncated after two lines
  with an ellipsis at the end to indicate there's more content...
</Text>

TextProps

`children`

Android

Optional • Type: React.ReactNode

The text content to display.

`color`

Android

Optional • Type: string

The color of the text.

`maxLines`

Android

Optional • Type: number

An optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow.

`minLines`

Android

Optional • Type: number

The minimum height in terms of minimum number of visible lines.

`modifiers`

Android

Optional • Type: ExpoModifier[]

Modifiers for the component.

`overflow`

Android

Optional • Type: TextOverflow

How visual overflow should be handled.

'clip': Clips the overflowing text to fix its container
'ellipsis': Uses an ellipsis to indicate that the text has overflowed
'visible': Renders overflow text outside its container

`softWrap`

Android

Optional • Type: boolean

Whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.

`style`

Android

Optional • Type: TextStyle

Style configuration for the text. Corresponds to Jetpack Compose's TextStyle parameter.

Types

`TextAlign`

Android

Literal Type: string

Text alignment options.

`TextDecoration`

Android

Literal Type: string

Text decoration options.

Acceptable values are: 'none' | 'underline' | 'lineThrough'

`TextFontStyle`

Android

Literal Type: string

Font style options for text styling.

Acceptable values are: 'normal' | 'italic'

`TextFontWeight`

Android

Literal Type: string

Font weight options for text styling.

Acceptable values are: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900'

`TextOverflow`

Android

Literal Type: string

Text overflow behavior options.

Acceptable values are: 'clip' | 'ellipsis' | 'visible'

`TextStyle`

Android

Text style properties that can be applied to text. Corresponds to Jetpack Compose's TextStyle.

Property	Type	Description
fontSize(optional)	`number`	The font size in sp (scale-independent pixels).
fontStyle(optional)	`TextFontStyle`	The font style of the text.
fontWeight(optional)	`TextFontWeight`	The font weight of the text.
letterSpacing(optional)	`number`	The letter spacing in sp.
lineHeight(optional)	`number`	The line height in sp.
textAlign(optional)	`TextAlign`	The text alignment.
textDecoration(optional)	`TextDecoration`	The text decoration.
typography(optional)	`TypographyStyle`	Material 3 Typography style to use as the base style. When specified, applies the predefined Material 3 typography style. Other properties in this style object will override specific values from the typography. Example `style={{ typography: "bodyLarge" }} style={{ typography: "headlineMedium", fontWeight: "bold" }}`

`TypographyStyle`

Android

Literal Type: string

Material 3 Typography scale styles. Corresponds to MaterialTheme.typography in Jetpack Compose.