expo-ui

Original：🇺🇸 English

Translated

Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in an Expo or React Native app. Covers universal cross-platform components (Host, Column, Row, Button, Text, List, and more imported from @expo/ui), drop-in replacements for popular React Native community libraries (BottomSheet, DateTimePicker, Slider, Menu, etc.), and platform-specific SwiftUI (@expo/ui/swift-ui) and Jetpack Compose (@expo/ui/jetpack-compose) trees and modifiers. Use when adding or reviewing @expo/ui Host/RNHostView trees, building native-feeling UI where standard React Native components fall short (lists with swipe actions and sections, settings forms with toggles, menus, sheets, pickers, sliders), choosing between universal and platform-specific components, or replacing an RN community UI library with a native @expo/ui equivalent. Not for custom native modules, Expo Router navigation, Reanimated, or data fetching.

7installs

Sourceexpo/skills

Added on2026-06-12

NPX Install

npx skill4agent add expo/skills expo-ui

SKILL.md Content

View Translation Comparison →

Expo UI (

@expo/ui

)

@expo/ui

renders real native UI from React: SwiftUI on iOS, Jetpack Compose on Android. Start with its universal components (one tree for iOS, Android, and web) and drop to platform-specific SwiftUI/Jetpack Compose only when the universal layer falls short. It also ships drop-in replacements for migrating off RN community UI libraries.

These instructions track the latest Expo SDK. The universal layer requires SDK 56+. Drop-in replacements and the platform-specific layers also exist on SDK 55. For component details on a specific SDK, refer to the Expo UI docs for that version.

Installation

bash

npx expo install @expo/ui

On SDK 56,

@expo/ui

works in Expo Go, so

npx expo start

runs it directly — no custom build required. On older SDKs, build a dev client first (

npx expo run:ios

/

npx expo run:android

).

Every

@expo/ui

tree — universal or platform-specific — must be wrapped in

Host

.

Choosing an approach (read this first)

Work down this list and stop at the first layer that meets the need:

Universal components — start here. Import from the
```
@expo/ui
```
root. One component tree runs unmodified on iOS, Android, and web from a single source (Compose on Android, SwiftUI on iOS,
```
react-native-web
```
/
```
react-dom
```
on web). No platform file splits. →
```
./references/universal.md
```
Platform-specific (SwiftUI / Jetpack Compose). Import from
```
@expo/ui/swift-ui
```
or
```
@expo/ui/jetpack-compose
```
. Use only when the universal layer is missing a component or modifier you need, or when you need platform-specific behavior or optimization. Downside: you write two trees and split them into
```
.ios.tsx
```
/
```
.android.tsx
```
files (or branch on
```
Platform.OS
```
) — more code to maintain. →
```
./references/swift-ui.md
```
and
```
./references/jetpack-compose.md
```

Already using an RN community UI library?

@expo/ui

also ships drop-in replacements — API-compatible swaps for popular libraries (

@gorhom/bottom-sheet

,

@react-native-community/datetimepicker

, and more), imported from

@expo/ui/community/<name>

. This is a migration side-path for replacing an existing dependency, not a step in the universal-vs-platform decision above. →

./references/drop-in-replacements.md

References

Consult these resources as needed:

references/
  universal.md             Universal @expo/ui components and when to use them (SDK 56+)
  drop-in-replacements.md  API-compatible replacements for RN community UI libraries
  swift-ui.md              Platform-specific iOS UI: @expo/ui/swift-ui components, modifiers, RNHostView, useNativeState
  jetpack-compose.md       Platform-specific Android UI: @expo/ui/jetpack-compose components, modifiers, LazyColumn caveat, icons, useNativeState

expo-ui

NPX Install

Tags

SKILL.md Content

Expo UI (
`@expo/ui`
)

Installation

Choosing an approach (read this first)

References

expo-ui

NPX Install

Tags

SKILL.md Content

Expo UI (@expo/ui)

Installation

Choosing an approach (read this first)

References

Expo UI (
`@expo/ui`
)