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).

The universal components in @expo/ui are a single-API layer over the platform-native UI toolkits. On Android, they delegate to @expo/ui/jetpack-compose. On iOS, they delegate to @expo/ui/swift-ui. On web, they're JS implementations using react-dom or react-native-web and are picked per component to suit the control.

Installation

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

Usage

Universal components must still be wrapped in a Host, but you import everything, including Host, from the package root. The universal Host dispatches to the platform-native host on Android and iOS, so there's no need to reach for @expo/ui/swift-ui or @expo/ui/jetpack-compose directly.

UniversalExample.tsx

Copy

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

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

  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text textStyle={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#000000' }}>
          Hello, world!
        </Text>
        <Button label="Press me" onPress={() => alert('Pressed')} />
      </Column>
    </Host>
  );
}

Android

iOS

Available components

BottomSheet

Button

Checkbox

Collapsible

Column

FieldGroup

Host

Icon

List

Picker

RNHostView

Row

ScrollView

Slider

Spacer

Switch

Text

TextInput

When to use this versus jetpack-compose/swift-ui

• Reach for universal components when you want one component tree that runs unmodified on Android, iOS, and web. The platform-native look and feel is preserved on Android and iOS because the components delegate to Jetpack Compose/SwiftUI under the hood.
• Reach for @expo/ui/jetpack-compose or @expo/ui/swift-ui directly when you need platform-specific controls, modifiers, or behavior that the universal API doesn't surface.