Skip to main content
NEW · APP STORE Now on iOS · macOS · iPad Android & Windows soon GET IT
Prompts Expo SDK 55 SwiftUI Integration Guide

agent coding skill risk: low

Expo SDK 55 SwiftUI Integration Guide

Instructs the model on using @expo/ui/swift-ui to build iOS-native UI in Expo SDK 55, covering installation, component and modifier selection, Host and RNHostView usage, documentat…

SKILL 1 file

SKILL.md
---
name: antigravity-awesome-skills-expo-ui-swift-ui-3eaf81b7
description: "expo-ui-swift-ui"
---
---
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

```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.

## 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.

REQUIRED CONTEXT

  • task involving @expo/ui/swift-ui or SwiftUI views/modifiers in Expo SDK 55

OPTIONAL CONTEXT

  • specific component names
  • need to embed React Native views

ROLES & RULES

  1. When about to use a component, fetch its docs to confirm the API
  2. When unsure about a modifier's API, refer to the docs
  3. Every SwiftUI tree must be wrapped in Host
  4. Confirm with the user before extending if a required modifier or View is missing
  5. Use this skill only when the task clearly matches the scope described above
  6. Do not treat the output as a substitute for environment-specific validation, testing, or expert review
  7. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing

EXPECTED OUTPUT

Format
unknown
Constraints
  • follow provided installation steps
  • wrap SwiftUI trees in Host
  • fetch component docs before use
  • ask before extending via custom module

SUCCESS CRITERIA

  • Apply instructions only to Expo SDK 55 SwiftUI tasks
  • Wrap every SwiftUI tree in Host
  • Fetch component docs before use
  • Ask user before extending missing APIs

FAILURE MODES

  • May be applied outside SDK 55 scope
  • May skip fetching latest component docs

EXAMPLES

Includes one JSX example demonstrating RNHostView embedding a React Native Pressable inside a SwiftUI VStack wrapped by Host.

CAVEATS

Dependencies
  • Requires Expo SDK 55
  • Requires access to https://docs.expo.dev/versions/v55.0.0/sdk/ui/swift-ui/
Missing context
  • Desired output format or code style conventions
Ambiguities
  • The instruction 'When about to use a component, fetch its docs' does not specify the mechanism or whether the AI should actually perform a fetch.

QUALITY

OVERALL
0.65
CLARITY
0.80
SPECIFICITY
0.85
REUSABILITY
0.35
COMPLETENESS
0.75

IMPROVEMENT SUGGESTIONS

  • Add an explicit 'Output Format' section specifying how code examples and explanations should be structured.

USAGE

Copy the prompt above and paste it into your AI of choice — Claude, ChatGPT, Gemini, or anywhere else you're working. Replace any placeholder sections with your own context, then ask for the output.

MORE FOR AGENT