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

Label

A SwiftUI Label component for displaying text with an icon.

iOS

tvOS

GitHub

npm

Changelog

Expo UI Label matches the official SwiftUI Label API and displays a title alongside an icon.

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 label with SF Symbol

BasicLabelExample.tsx

import { Host, Label } from '@expo/ui/swift-ui';

export default function BasicLabelExample() {
  return (
    <Host matchContents>
      <Label title="Favorites" systemImage="star.fill" />
    </Host>
  );
}

With custom icon

Use the icon prop to provide a custom React node as the icon instead of an SF Symbol.

LabelCustomIconExample.tsx

import { Host, Label, Image } from '@expo/ui/swift-ui';

export default function LabelCustomIconExample() {
  return (
    <Host matchContents>
      <Label title="Custom Icon" icon={<Image systemName="sparkles" size={20} color="purple" />} />
    </Host>
  );
}

Icon only

Use the labelStyle modifier with iconOnly to display only the icon. Always provide a title for accessibility even though it won't be visible.

LabelIconOnlyExample.tsx

import { Host, Label } from '@expo/ui/swift-ui';
import { labelStyle } from '@expo/ui/swift-ui/modifiers';

export default function LabelIconOnlyExample() {
  return (
    <Host matchContents>
      <Label title="Settings" systemImage="gear" modifiers={[labelStyle('iconOnly')]} />
    </Host>
  );
}

API

No API data file found, sorry!