Native UI Components from One Import: Expo UI is Production-Ready

With SDK 56, @expo/ui gives you real SwiftUI and Jetpack Compose components in React Native. No JavaScript reimplementations, no platform-specific code splitting. Just import once and get native components that follow platform conventions.

Universal components in Expo UI, across Android, iOS and web.

The library is bundled into Expo Go and included in the default [create-expo-app](https://docs.expo.dev/more/create-expo/) template. You can start using it immediately in any new project.

This release caps three SDK cycles of development:

• SDK 53 — basic SwiftUI and Jetpack Compose components
• SDK 54 — [<Host>](https://expo.dev/blog/liquid-glass-app-with-expo-ui-and-swiftui), modifiers, and container views like [Form](https://expo.dev/blog/liquid-glass-app-with-expo-ui-and-swiftui) and [List](https://expo.dev/blog/liquid-glass-app-with-expo-ui-and-swiftui). The hot-chocolate demo showed you could build complete apps with it.
• SDK 55 — Jetpack Compose support in beta, plus API alignment with Apple's SwiftUI documentation
• SDK 56 — Compose API audit, universal layer, and drop-in replacements for popular community packages

Here's what each piece looks like in practice.

Universal components: write once, run natively everywhere

The universal layer is the biggest change in SDK 56. Instead of importing from platform-specific packages like @expo/ui/swift-ui or @expo/ui/jetpack-compose, you import from @expo/ui and get the right implementation automatically:

import { Host, FieldGroup, Row, Switch, Slider, Text, Spacer } from '@expo/ui';

Each universal component is a thin wrapper that renders the SwiftUI version on iOS and the Compose version on Android. No JavaScript fallback layer means you're always using the actual platform component. The universal layer covers layout primitives, text, inputs, controls, and sheets: Host, Row, Column, ScrollView, and more. Learn more about universal components.

The naming leans toward React Native conventions. You write Switch instead of Toggle, and Column/Row instead of HStack/VStack. The SwiftUI-style names are still available under @expo/ui/swift-ui when you need them.

Building a settings screen with universal components

FieldGroup is the universal equivalent of SwiftUI's Form. It creates grouped, sectioned lists with section titles, footers, and platform-appropriate styling on iOS and Android. The component uses compound patterns like FieldGroup.Section and FieldGroup.SectionFooter:

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 />
          </Row>
        </FieldGroup.Section>
      </FieldGroup>
    </Host>
  );
}

function LabeledRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <Row alignment="center" spacing={16}>
      <Text>{label}</Text>
      <Spacer flexible />
      {children}
    </Row>
  );
}

This single code snippet produces a SwiftUI Form with inset-grouped sections on iOS and a Material 3 grouped list on Android. The Switch and Slider components automatically become system controls on iOS and Material components on Android. No platform-specific files needed.

You can still reach for @expo/ui/swift-ui and @expo/ui/jetpack-compose when you need platform-specific features like SwiftUI's glassEffect() or Compose's DockedSearchBar. Mix them freely within the same Host.

Notes on the universal layer:

• This is version one. Some universal components work well across all platforms, others don't because SwiftUI, Compose, and web don't always offer equivalent primitives. Let us know which components work, which don't, which are missing, and where you use the platform-specific packages directly.

• Web is experimental. Universal components have web implementations but they're not production-quality yet. Expect improvements in upcoming releases based on your feedback.

Stable APIs and new capabilities

Both the SwiftUI and Compose APIs now match their platform documentation. Most code samples you find online (Apple docs, Google docs, blog posts) are one search-and-replace away from working in Expo UI. Component names, prop names, modifier names all match.

SwiftUI's Toggle and Form keep their names in @expo/ui/swift-ui. Compose's LazyColumn keeps its name in @expo/ui/jetpack-compose. Props and modifiers follow the same pattern.

SDK 56 includes new features alongside the API stabilization:

• Build your own components. SwiftUI and Jetpack Compose have hundreds of views and modifiers. To bridge that gap, you can now create your own SwiftUI and Jetpack Compose views and modifiers while Expo UI handles the layout, props, and events. Learn more for SwiftUI and Jetpack Compose.

• Material 3 Dynamic Colors. [useMaterialColors](https://docs.expo.dev/versions/v56.0.0/sdk/ui/jetpack-compose/colors/) gives you Material 3 Dynamic Colors that adapt to the system theme.

• Full Material Symbols access. The [Icon](https://docs.expo.dev/versions/v56.0.0/sdk/ui/jetpack-compose/icon/) component works with [@expo/material-symbols](https://www.npmjs.com/package/@expo/material-symbols) to make the entire Material Symbols catalog importable.

• UI thread state management. useNativeState for SwiftUI and Jetpack Compose lets you build smooth, UI-thread-driven controls without flicker. We'll cover this in a dedicated post soon.

Replace community packages with native alternatives

Most React Native apps install similar community packages for platform primitives like pickers and sliders. Each adds a native dependency with its own release schedule and potential SDK compatibility issues. SDK 56 ships native replacements for seven common packages under @expo/ui/community:

Community package	Drop-in replacement
@react-native-community/datetimepicker	@expo/ui/community/datetime-picker
@react-native-community/slider	@expo/ui/community/slider
react-native-pager-view	@expo/ui/community/pager-view
@react-native-picker/picker	@expo/ui/community/picker
@react-native-segmented-control/segmented-control	@expo/ui/community/segmented-control
@react-native-masked-view/masked-view	@expo/ui/community/masked-view
@react-native-menu/menu	@expo/ui/community/menu
@gorhom/bottom-sheet	@expo/ui/community/bottom-sheet

Most migrations are simple import swaps. Some props differ because Expo UI uses SwiftUI and Jetpack Compose instead of UIKit and Android Views:

// Before
import DateTimePicker from '@react-native-community/datetimepicker';

// After
import DateTimePicker from '@expo/ui/community/datetime-picker';

Learn more about drop-in replacements.

The result: fewer dependencies, one upgrade path, consistent foundation.

Choose the right tool for each use case

Expo UI isn't a UI component library or design system. Like writing <div> and <span> in react-dom, you write Column and Row in @expo/ui. It exposes the primitives iOS and Android already provide as React components.

But you don't have to use Expo UI everywhere. The Expo framework lets you mix different approaches within the same app:

• For custom designs — brand pages, bespoke design systems, anything highly styled — use React Native **View**** / `Text**`. These styling-agnostic primitives work with CSS-style props, flexbox layout, and styling libraries like NativeWind.

• For native-feeling UI — settings screens, modals, pickers, sheets, anything users expect to "look like the OS" — use Expo UI. Inside a Host, layout uses SwiftUI/Compose primitives (HStack/VStack, Row/Column) instead of Yoga flexbox.

• For custom graphics — charts, shaders, complex animations — use react-native-skia.

• For 3D and GPU work — use react-native-webgpu and TypeGPU.

• For web ecosystem solutions (like shadcn) — use DOM components to run web code in webviews on native and directly on web.

These tools compose at the component level. You can mix React Native, Expo UI, Skia, WebGPU/TypeGPU, and DOM components in the same screen and view tree. Build experiences that are both universal and deeply platform-native.

Updated demo apps

We've updated hot-chocolate to SDK 56. The app started as SwiftUI-only but now uses universal components and runs on Android and web too.

Apple TV and Android TV support

Expo UI now works on Apple TV and Android TV, thanks largely to Douglas Lowder. Most components and APIs work on TV platforms, though some native SwiftUI and Compose APIs aren't available on TV. The ExpoUITV app demonstrates supported APIs on both TV and mobile.

Community contributions

Expo UI reached stability because of community involvement. SDK 56 was unusually community-driven. You filed issues, audited APIs, added components, and fixed crashes before we found them. Special thanks to:

2hwayoung, AKSHAY JADHAV, Axel, Benjamin Komen, Beto, Christian Wooldridge, Dennis Morello, Dylan, Eliot Gevers, fedeciancaglini, Gregory Moskaliuk, Hugo Extrat, hypnokermit, Ian Berry, Isaiah Hamilton, JeroenG, Joss Mackison, K.Dileepa Thushan Peiris, Kfir Fitousi, kimchi-developer, Leonardo E. Dominguez, Liès, Loic CHOLLIER, Louis, lucabc2000, Petr Chalupa, Pflaumenbaum, Ray, Sam Shubham, Shubh Porwal, starsky-nev, Suvesh Moza, Terijaki, ThiMal, Yousof Abouhalawa, Zhovtonizhko Dmitriy

Thanks to everyone who tested, filed issues, joined office hours, or participated in Discord discussions. Your feedback shaped this release as much as the code contributions.

Getting started

1. npx create-expo-app@latest --template default@sdk-56 — Expo UI comes with the default template, so Host, Switch, and Picker are ready to import.

2. If you have any packages from the drop-in table, try swapping one import to test the replacement.

3. Check out the demo apps: hot-chocolate and ExpoUITV.

4. Report issues, send PRs, chat with us in Discord. Stable means the foundation is solid for the next phase of building.

Expo UI is stable and ready for production. Time to build something native.

This post is based on content from the Expo blog. Follow @expo for more React Native content.