Universal

For the complete documentation index, see llms.txt. Use this file to discover all available pages.

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.

import { Host, Column, Button, Text } from '@expo/ui';

export default function Example() {
  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text>Hello, world!</Text>
        <Button label="Press me" onPress={() => alert('Pressed')} />
      </Column>
    </Host>
  );
}

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

• 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/swift-ui or @expo/ui/jetpack-compose directly when you need platform-specific controls, modifiers, or behavior that the universal API doesn't surface.