Skill

Expo UI SwiftUI

Enables SwiftUI Views and modifiers in Expo apps via @expo/ui/swift-ui package. Guides SDK 55 installation, API usage mirroring SwiftUI, Host wrapping, RNHostView embedding, and extensions.

Expo

SwiftUI

React Native

iOS

mobile

npx claudepluginhub expo/skills --plugin expo-deployment

Tool Access

This skill uses the workspace's default tool permissions.

Preview

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

SKILL.md

Similar Skills

expo-ui-swift-ui

36.5k

Integrates SwiftUI views and modifiers into Expo apps using @expo/ui/swift-ui for iOS-native UI. Guides Host wrapping, RNHostView for React Native embeds, and SDK 55 extensions.

antigravity-awesome-skills

Installation

1.4k

Guides installation and usage of Expo UI SwiftUI for SDK 55, enabling SwiftUI views/modifiers in Expo apps via Host, with RNHostView for React Native embeds.

expo-app-design

expo-ui-swift-ui

Provides iOS-native SwiftUI views like List, Section, Toggle, and Picker in Expo React Native apps for authentic iOS UI, with RNHostView for embedding React Native content.

react-native-hifi

Stats

Parent Repo Stars1852

Parent Repo Forks84

Last CommitApr 10, 2026

Actions

View Source View Plugin View on GitHub View README

Help us improve

Share bugs, ideas, or general feedback.

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

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

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.