Expo UI Native

Overview

Expo UI lets React code declare native SwiftUI on iOS and Jetpack Compose on Android. In SDK 56, SwiftUI and Jetpack Compose APIs are stable, and Universal components let teams write shared Android, iOS, and web UI through @expo/ui.

Universal Components First

For SDK 56, write common screens with the Universal API first. Drop down to @expo/ui/swift-ui or @expo/ui/jetpack-compose only when the platform-specific behavior matters.

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

export default function SettingsScreen() {
  return (
    <Host style={{ flex: 1 }}>
      <Column spacing={12} alignment="center">
        <Text>Notification settings</Text>
        <Switch label="Enable notifications" value={enabled} onValueChange={setEnabled} />
        <Button label="Save" onPress={handleSave} />
      </Column>
    </Host>
  );
}

Host is the root for a Universal Expo UI subtree. It connects to native hosts on Android and iOS, and falls back to React Native views on web.

Platform-specific APIs

Use platform-specific packages when a screen needs native modifiers, native state, or controls not covered by the Universal API.

import { Platform } from 'react-native';

const NativeSettings = Platform.select({
  ios: () => require('@expo/ui/swift-ui').Form,
  android: () => require('@expo/ui/jetpack-compose').Column,
  default: () => require('@expo/ui').Column,
})();

Drop-in Replacement Candidates

SDK 56 provides import-oriented migration paths for several community native UI libraries. Treat them as drop-in candidates, not guaranteed prop-level replacements.

Native State and Worklet Callbacks

SDK 56 Expo UI integrates with react-native-worklets and native state primitives. Use this path for text input, animation, and high-frequency UI where JS round trips are visible.

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

export function SearchField() {
  const value = useNativeState('');

  return (
    <Host matchContents>
      <TextField text={value} placeholder="Search" />
    </Host>
  );
}

AI Integration

Expo provides official Expo Skills such as expo-ui-swift-ui, expo-ui-jetpack-compose, and building-native-ui.

npx skills add expo/skills

Generated code still needs npx expo-doctor, TypeScript, and real device builds. Native layout, touch targets, system fonts, and Dynamic Color cannot be fully validated in a web preview.

Caveats

• Expo UI components live in a native tree that differs from React Native View, so avoid measure() and onLayout dependencies.
• Universal web APIs can still change; keep web critical flows under regression tests.
• Native modifiers do not mean the same thing on each platform. Keep tokens shared but verify implementation per platform.
• Check accessibility labels, keyboard behavior, and screen reader order for every replacement.