Docs
BlogChangelogStar Us on GitHub
HomeGuidesEASReferenceLearn

Reference version

ArchiveExpo SnackDiscord and ForumsNewsletter

This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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

Text

A component for displaying styled text content.

Android
iOS
Web
Included in Expo Go

GitHub

npm

Changelog

A component for displaying text. Adapts to the platform color scheme (light/dark) by default and exposes a focused subset of typography knobs through textStyle.

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

TextExample.tsx
import { Host, Text } from '@expo/ui';

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

Styled text

Use textStyle for typography-specific properties (font size, weight, alignment).

StyledTextExample.tsx
import { Host, Text } from '@expo/ui';

export default function StyledTextExample() {
  return (
    <Host matchContents>
      <Text textStyle={{ fontSize: 24, fontWeight: '700', textAlign: 'center' }}>Headline</Text>
    </Host>
  );
}

Truncating long text

Use numberOfLines to clamp long text with a trailing ellipsis.

TruncatedTextExample.tsx
import { Host, Text } from '@expo/ui';

export default function TruncatedTextExample() {
  return (
    <Host style={{ flex: 1 }}>
      <Text numberOfLines={1}>
        A very long line of text that will be truncated when it does not fit on a single line.
      </Text>
    </Host>
  );
}

API

import { Text } from '@expo/ui';

Component

Text

Android
iOS
Web

Type: React.Element<TextProps>

A component for displaying styled text content.

Props for the Text component.

TextProps

children

Android
iOS
Web
Optional • Type: string

The text content to display.

disabled

Android
iOS
Web
Optional • Type: boolean

Whether the component is disabled. Disabled components do not respond to user interaction.

hidden

Android
iOS
Web
Optional • Type: boolean

Whether the component is hidden.

modifiers

Android
iOS
Optional • Type: ModifierConfig[]

Platform-specific modifier escape hatch. Pass an array of modifier configs from @expo/ui/swift-ui/modifiers or @expo/ui/jetpack-compose/modifiers. A modifier supplied here replaces any modifier of the same type that the component derives from style or other props.

numberOfLines

Android
iOS
Web
Optional • Type: number

Maximum number of lines to display. Text is truncated with an ellipsis when exceeded.

onAppear

Android
iOS
Web
Optional • Type: () => void

Called when the component appears on screen.

onDisappear

Android
iOS
Web
Optional • Type: () => void

Called when the component is removed from screen.

onPress

Android
iOS
Web
Optional • Type: () => void

Called when the component is pressed.

style

Android
iOS
Web
Optional • Type: Pick<ViewStyle, 'padding' | 'paddingHorizontal' | 'paddingVertical' | 'paddingTop' | 'paddingBottom' | 'paddingLeft' | 'paddingRight' | 'backgroundColor' | 'borderRadius' | 'borderWidth' | 'borderColor' | 'opacity' | 'width' | 'height'>

Platform-agnostic style properties. These are translated to SwiftUI modifiers on iOS and Jetpack Compose modifiers on Android.

testID

Android
iOS
Web
Optional • Type: string

Identifier used to locate the component in end-to-end tests.

textStyle

Android
iOS
Web
Optional • Type: { color: string, fontFamily: string, fontSize: number, fontWeight: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900', letterSpacing: number, lineHeight: number, textAlign: 'center' | 'left' | 'right' }

Text-specific styling (font, color, alignment).