expo-ui-swift-ui
🤖 AI Summary
**expo-ui-swift-ui** generates native SwiftUI components from Expo/React Native props, enabling developers to render iOS-native UI elements directly within an Expo project without leaving the JavaScript ecosystem.
How to Install
This skill comes from a community source.
name: expo-ui-swift-ui
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.
When to Use
- You need to build iOS-native UI in Expo using
@expo/ui/swift-ui. - The task involves selecting SwiftUI views or modifiers, wrapping trees in
Host, or embedding React Native components withRNHostView. - You are targeting Expo SDK 55 behavior for SwiftUI integration and extension guidance.
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.
Limitations
- Use this skill only when the task clearly matches the scope described above.
- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.
- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.
Details
| Category | Frontend → framework |
| Source | community |
| SKILL.md | View on GitHub → |
| Repo Stars | N/A |
| Est. per Skill | N/A (shared across 1230 skills from this repo) |
| Difficulty | Intermediate |
| Risk Level | N/A |
Related Skills
react-native-architecture
React Native Architecture Production-ready patterns for React Native development with Expo, includin
astro
Astro Web Framework Overview Astro is a web framework designed for content-rich websites — blogs, do
social-metadata-hardening
Social Metadata Hardening Skill Fix social sharing so every important URL unfurls as a rich card acr
wiki-researcher
Wiki Researcher You are an expert software engineer and systems analyst. Your job is to deeply under
Works Well With
Skills from the same repository — often designed to work together
007
007 — Licenca para Auditar Overview Security audit, hardening, threat modeling (STRIDE/PASTA), Red/B
2d-games
2D Game Development Principles for 2D game systems. 1. Sprite Systems Sprite Organization Component
2slides-ppt-generator
2slides Presentation Generation Overview Generate professional presentations using the 2slides AI AP