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

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.

Material 3 typography hierarchy: headline, title, body, and label

Installation

Terminal

- npx expo install @expo/ui

- yarn expo install @expo/ui

- pnpm expo install @expo/ui

- bun 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 { useColorScheme } from 'react-native';
import { Host, Text } from '@expo/ui';

export default function TextExample() {
  const colorScheme = useColorScheme();

  return (
    <Host matchContents>
      <Text textStyle={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
        Hello, world!
      </Text>
    </Host>
  );
}

Styled text

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

StyledTextExample.tsx

import { useColorScheme } from 'react-native';
import { Host, Text } from '@expo/ui';

export default function StyledTextExample() {
  const colorScheme = useColorScheme();

  return (
    <Host matchContents>
      <Text
        textStyle={{
          color: colorScheme === 'dark' ? '#FFFFFF' : '#000000',
          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 { useColorScheme } from 'react-native';
import { Host, Text } from '@expo/ui';

export default function TruncatedTextExample() {
  const colorScheme = useColorScheme();

  return (
    <Host matchContents={{ vertical: true }} style={{ width: '100%' }}>
      <Text numberOfLines={1} textStyle={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
        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!