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

Text

A component for displaying styled text content.

Android

iOS

Web

Included in Expo Go

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';

No API data file found, sorry!