About Expo UI SwiftUI
A SwiftUI development skill for Expo SDK 55. It explains using SwiftUI-style components and modifiers through `@expo/ui`, including documentation checks and local module extensions.
Key features
- 01Use the SwiftUI API from `@expo/ui`
- 02Wrap SwiftUI trees in `Host`
- 03Consult component and modifier documentation
- 04Embed React Native components with `RNHostView`
- 05Consider local Expo module extensions for missing APIs
Use cases
- 01Build SwiftUI interfaces in an Expo app
- 02Embed React Native components in a SwiftUI tree
- 03Verify how a component or modifier is used
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/expo-ui-swiftuiin Claude Code to confirm it loaded.
Details
From the project READMEThe 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
- 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. RNHostViewis 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. Confirm with the user before extending.
Comments
Markdown supported