AutoGineer
Generated banner for Expo UI Swift UI
Generated logo for Expo UI Swift UI

Expo UI Swift UI

OpenAIOfficialCreated by Expo TeamDistributed by OpenAI

  • Skill
  • Tool integration
  • Software development
  • MIT
  • No issues found
Download ZIP

From the author

`@expo/ui/swift-ui` package lets you use SwiftUI Views and modifiers in your app.
— the description by Expo Team

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

The expo-ui-swift-ui skill provides guidance on using the @expo/ui/swift-ui package to incorporate native SwiftUI components and modifiers directly into Expo-based mobile applications. It outlines the necessary installation steps, including the requirement for a native rebuild, and explains how to structure SwiftUI trees using the Host component. The skill also covers how to embed React Native components within SwiftUI structures using RNHostView and provides a path for extending functionality through local Expo modules.

What it does

  • Enables the use of native SwiftUI views and modifiers within Expo projects.
  • Provides a structured approach for wrapping SwiftUI trees using the Host component.
  • Facilitates the embedding of React Native components inside SwiftUI layouts via RNHostView.
  • Offers guidance on mapping SwiftUI API knowledge to Expo UI components.
  • Outlines the process for extending Expo UI with custom local modules when specific components are missing.

When to use it

  • When you need to leverage native SwiftUI capabilities within an Expo-managed mobile app.
  • When building complex UI layouts that benefit from native SwiftUI performance and features.
  • When you need to mix React Native components with native SwiftUI views in a single view hierarchy.
  • When you are working with Expo SDK 55.

Advantages

  • Allows for a more native look and feel by utilizing SwiftUI directly.
  • Maintains a familiar API structure for developers with existing SwiftUI experience.
  • Provides a clear mechanism for bridging React Native components into native SwiftUI trees.
  • Offers extensibility through local Expo modules for custom requirements.

Usage examples

“How do I set up a basic SwiftUI layout in my Expo app?”
The agent will guide you to install the package, perform a native rebuild, and wrap your SwiftUI components within a Host component.
“Can I put a React Native Pressable component inside a SwiftUI VStack?”
The agent will explain how to use the RNHostView component to wrap the Pressable element so it can be correctly rendered within the SwiftUI tree.

Install

  1. Download the skill as a ZIP:

    https://autogineer.com/agent-skills/openai/expo-ui-swift-ui/download

  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip expo-ui-swift-ui.zip -d .agents/skills

Documentation by Expo Team

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

npx expo install @expo/ui

A native rebuild is required after installation (npx expo run:ios).

Instructions

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>;

Files

agents/openai.yaml

interface:
  display_name: "Expo UI SwiftUI"
  short_description: "Use @expo/ui/swift-ui views and modifiers inside Expo React Native apps"
  default_prompt: "Use $expo-ui-swift-ui when adding or reviewing @expo/ui/swift-ui Host trees, SwiftUI-like components, modifiers, RNHostView usage, and local Expo-module extensions for missing SwiftUI capabilities."

Requirements and compatibility

Written for: OpenAI Codex

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs network access, Needs Node.js

Security

No issues found by our static scan· No issues found

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by
Expo Team
Publisher
OpenAI (Official)
Distributed by
OpenAI
Source
openai/plugins · plugins/expo/skills/expo-ui-swift-ui · commit d420d13
Licence
MIT License (redistribution allowed)
  • LICENSE (added by AutoGineer from plugins/expo/LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Expo Team or OpenAI.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download expo-ui-swift-ui.zip