JavaScript is disabled. Some features may not work.
expo-ui-swift-ui — ★ 41.5K GitHub Stars — Install Guide | SkillsNav
🇺🇸 English🇨🇳 中文
SkillsNav
Home

expo-ui-swift-ui

★ 41K repoapiSafeIntermediateClaude
🤖 AI Summary

**expo-ui-swift-ui** generates native SwiftUI components from an Expo React Native project, allowing developers to replace or augment JavaScript views with high-performance SwiftUI code. It automatically bridges props, events, and styling between the React Native layer and native iOS UI.

How to Install

Claude Code:
git clone --depth 1 https://github.com/sickn33/antigravity-awesome-skills.git && cp antigravity-awesome-skills/skills/expo-ui-swift-ui ~/.claude/skills/expo-ui-swift-ui -r

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 with RNHostView.
  • 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.
  • 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. 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 Coding → api
Sourcesickn33/antigravity-awesome-skills
SKILL.mdView on GitHub →
Repo Stars★ 41.5K
Est. per Skill47 (shared across 868 skills from this repo)
DifficultyIntermediate
Risk LevelSafe

Related Skills

Works Well With

Skills from the same repository — often designed to work together