---
id: gh-expo-ui
name: "expo-ui"
url: https://skills.yangsir.net/skill/gh-expo-ui
author: expo
domain: mobile
tags: ["react-native", "ui-components", "mobile-development", "swiftui", "jetpack-compose"]
install_count: 31000
rating: 4.60 (120 reviews)
github: https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui
---

# expo-ui

> 此技能利用 `@expo/ui` 包，让开发者能用 React 构建真正的原生 UI，包括 iOS 上的 SwiftUI 和 Android 上的 Jetpack Compose。它提供跨平台通用组件、流行 React Native 社区库的替代品，以及平台专属的 UI 树和修饰符，极大地简化了原生应用界面的开发与维护，提升了用户体验。

**Stats**: 31,000 installs · 4.6/5 (120 reviews)

## Before / After 对比

### 开发/迁移复杂原生UI组件所需时间

**Before**:

在没有此技能之前，开发者需要花费大量时间手动编写平台特定的原生 UI 代码，或者依赖功能有限且可能不一致的第三方 React Native UI 库，导致开发效率低下，且难以实现真正的原生体验。

**After**:

该 Skill 通过提供统一的 React 接口来渲染 SwiftUI 和 Jetpack Compose，极大地简化了原生 UI 的开发。开发者可以利用通用组件快速构建，或使用其替代品无缝迁移现有库，显著提升了开发效率和应用的原生质感。

| Metric | Before | After | Change |
|---|---|---|---|
| 所需时间 | 8小时 | 2小时 | -75% |

## Readme

# 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:

1. **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`

2. **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
```


---
*Source: https://skills.yangsir.net/skill/gh-expo-ui*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-expo-ui/markdown*