概要
公開日: 2026-05-26
翻訳生成に失敗したため、原文をそのまま保存しています。
原文
Expo UI is now stable and ready for production. A single JS import gives you SwiftUI / Compose-backed primitive views for free. And it includes drop-in replacement views, so you can remove existing community packages from your package.json while you're at it. Universal components in Expo UI, across Android, iOS and web. [object Object] Universal components in Expo UI, across Android, iOS and web. Starting with SDK 56, @expo/ui lets you use SwiftUI on iOS and Jetpack Compose on Android. The real native primitives, not a JavaScript re-implementation. Expo UI is in the default create-expo-app template and bundled into Expo Go, so you can try it the moment you create or open a project. This milestone is the payoff of three SDK cycles of iteration: - SDK 53 — first prototype. A handful of leaf components for SwiftUI and Jetpack Compose. - SDK 54 — <Host>, SwiftUI modifiers, and container views like Form and List. The hot-chocolate showcase proved you could build a complete app this way. - SDK 55 — Jetpack Compose support in beta, and the SwiftUI surface was audited so every component, prop, and modifier name maps 1-to-1 with Apple's documentation. - SDK 56 — the Jetpack Compose surface got the same audit treatment, a universal layer sits on top of both, and a handful of long-standing community packages now have native drop-in replacements. Here's how each piece lands in practice. One import, all platforms: the universal components The biggest new thing you can see in SDK 56 is the universal layer. Instead of importing from @expo/ui/swift-ui or @expo/ui/jetpack-compose, you can import from @expo/ui and get the platform-idiomatic implementation underneath: import { Host, FieldGroup, Row, Switch, Slider, Text, Spacer } from '@expo/ui'; Under the hood, each universal component is just a wrapper: on iOS it renders the SwiftUI version, on Android it renders the Compose version. There's no JS re-implementation in between, so you're using the real platform component either way. Layout primitives, text, inputs, controls, and sheets are all in scope: Host, Row, Column, ScrollView, and more. Learn more about universal components. A few naming choices worth calling out: it's Switch, not Toggle; it's Column / Row, not HStack / VStack. The universal layer leans toward names a React Native developer already types every day. When you want the SwiftUI-flavored name, it's still right there under @expo/ui/swift-ui. Universal components showcase: settings screen FieldGroup is the universal counterpart to SwiftUI's Form - a grouped, sectioned list with section titles, footers, and platform-appropriate styling on both iOS and Android. Note the compound components in the snippet below: FieldGroup.Section for sections, FieldGroup.SectionFooter for the gray descriptive text underneath. import { useState } from 'react'; import { Button, FieldGroup, Host, Row, Slider, Spacer, Switch, Text } from '@expo/ui'; export default function SettingsScreen() { const [notifications, setNotifications] = useState(true); const [sounds, setSounds] = useState(false); const [brightness, setBrightness] = useState(0.6); return ( <Host style={{ flex: 1 }}> <FieldGroup> <FieldGroup.Section title="Notifications"> <LabeledRow label="Push notifications"> <Switch value={notifications} onValueChange={setNotifications} /> </LabeledRow> <LabeledRow label="Sounds"> <Switch value={sounds} onValueChange={setSounds} /> </LabeledRow> <FieldGroup.SectionFooter> <Text textStyle={{ fontSize: 13, color: '#6c6c70' }}> Notification previews can expose sensitive content on the lock screen. </Text> </FieldGroup.SectionFooter> </FieldGroup.Section> <FieldGroup.Section title="Display"> <LabeledRow label="Brightness"> <Slider value={brightness} onValueChange={setBrightness} /> </LabeledRow> </FieldGroup.Section> <FieldGroup.Section> <Row alignment="center" style={{ padding: 12 }}> <Spacer flexible /> <Button variant="outlined" onPress={() => alert('Signed out')} label="Sign out" /> <Spacer flexible />