Expo UI SwiftUI

---
name: Expo UI SwiftUI
description: '`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.'
---

> 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

```bash
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
- 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
- Every SwiftUI tree must be wrapped in `Host`.
- `RNHostView` is specifically for embedding RN components inside a SwiftUI tree. Example:

```jsx
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. Confirm with the user before extending.

More agent context in bbplayer-app/BBPlayer

24 other files this repository gives its agents.