---
id: daily-expo-ui-swiftui
name: "expo-ui-swiftui"
url: https://skills.yangsir.net/skill/daily-expo-ui-swiftui
author: expo
domain: mobile
tags: ["ios-development", "swiftui", "expo"]
install_count: 3
rating: 4.00 (9 reviews)
github: https://github.com/expo/skills
---

# expo-ui-swiftui

> 为 Expo SDK 55 提供 iOS SwiftUI 原生组件集成指南，包含安装步骤和配置说明，需要重新构建原生代码

**Stats**: 3 installs · 4.0/5 (9 reviews)

## Before / After 对比

### iOS 原生组件集成

**Before**:

手动查找 iOS 原生组件文档、配置 Podfile、处理依赖冲突，集成一个组件需要 2-3 小时，容易出现版本不兼容问题

**After**:

使用 Expo UI SwiftUI 统一安装命令，自动处理依赖和原生代码配置，15 分钟完成组件集成和原生构建

| Metric | Before | After | Change |
|---|---|---|---|
| 集成时间 | 150分钟 | 15分钟 | -90% |

## Readme

# expo-ui-swiftui

The instructions in this skill apply to SDK 55 only. For other SDK versions, refer to the Expo UI SwiftUI docs for that version for the most accurate information.

## Installation

```
npx expo install @expo/ui

```

A native rebuild is required after installation (`npx expo run:ios`).

## Instructions

- Expo UI's API mirrors SwiftUI's API. Use SwiftUI knowledge to decide which components or modifiers to use.

- Components are imported from `@expo/ui/swift-ui`, modifiers from `@expo/ui/swift-ui/modifiers`.

- When about to use a component, fetch its docs to confirm the API - [https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/{component-name}/index.md](https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/%7Bcomponent-name%7D/index.md)

- When unsure about a modifier's API, refer to the docs - [https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md](https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/modifiers/index.md)

- Every SwiftUI tree must be wrapped in `Host`.

- `RNHostView` is specifically for embedding RN components inside a SwiftUI tree. Example:

```
import { Host, VStack, RNHostView } from "@expo-ui/swift-ui";
import { Pressable } from "react-native";

<Host matchContents>
  <VStack>
    <RNHostView matchContents>
      // Here, `Pressable` is an RN component so it is wrapped in `RNHostView`.
      <Pressable />
    </RNHostView>
  </VStack>
</Host>;

```

- If a required modifier or View is missing in Expo UI, it can be extended via a local Expo module. See: [https://docs.expo.dev/guides/expo-ui-swift-ui/extending/index.md](https://docs.expo.dev/guides/expo-ui-swift-ui/extending/index.md). Confirm with the user before extending.

Weekly Installs–Repository[expo/skills](https://github.com/expo/skills)GitHub Stars1.7KFirst Seen–Security Audits[Gen Agent Trust HubPass](/expo/skills/expo-ui-swiftui/security/agent-trust-hub)[SocketPass](/expo/skills/expo-ui-swiftui/security/socket)[SnykPass](/expo/skills/expo-ui-swiftui/security/snyk)

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