expo-ui-swift-ui

Name: expo-ui-swift-ui
Author: expo

github.com/expoDesign & UI3.9k295 installsUpdated 2d ago

About expo-ui-swift-ui

expo-ui-swift-ui is a skill for building interfaces with the SwiftUI-mirroring API in Expo UI. It targets Expo SDK 55 projects and explains component and modifier lookup, native rebuilding, and embedding React Native views in SwiftUI trees.

Key features

01SDK 55-specific guidance
02SwiftUI-style Expo UI API
03Component and modifier documentation lookup
04Host wrapping for SwiftUI trees
05React Native view embedding

Use cases

01Building SwiftUI-based Expo screens
02Checking component and modifier APIs
03Embedding React Native views in SwiftUI

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/expo/skills --skill expo-ui-swift-ui

After installing, type/expo-ui-swift-uiin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

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.

Comments

Markdown supported