expo-ui-swift-ui

Build native SwiftUI screens in Expo projects using @expo/ui/swift-ui and RNHostView.

28|1|Updated Apr 8, 2026

Search Tags:#ios #react-native #swiftui #expo #native-ui #rnhostview

Ready to run

npx skills add https://github.com/bidah/react-native-hifi --skill expo-ui-swift-ui

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: expo-ui-swift-ui
Source: https://github.com/bidah/react-native-hifi/tree/main/skills/expo-ui-swift-ui
Command: npx skills add https://github.com/bidah/react-native-hifi --skill expo-ui-swift-ui

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

When an Expo project must feel fully native on iOS, this skill describes how to layer SwiftUI widgets over React Native, embed RN content, and avoid the mismatched look of shared components.

Core Features & Use Cases

Native SwiftUI controls such as List, Section, Label, Toggle, Picker, and Gauge provide true iOS styles for settings or detail views.
RNHostView guidance explains how to place React Native trees inside SwiftUI hierarchies and manage the layout contracts.
Platform splits and custom modules cover .ios files, inline Platform guards, and Expo Module definitions so developers can ship polished SwiftUI screens alongside JavaScript logic.

Quick Start

Ask the agent to build an iOS settings screen using @expo/ui/swift-ui List, Section, and Toggle components.

Frequently Asked Questions about expo-ui-swift-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I build native iOS screens in an Expo project using SwiftUI?▼

To build native iOS screens in an Expo project, use the @expo/ui/swift-ui package to layer SwiftUI widgets like List and Toggle over React Native, replacing cross-platform components that cannot match iOS design expectations.

Can I embed React Native views inside a SwiftUI hierarchy?▼

Yes, you can embed React Native views inside a SwiftUI hierarchy by using RNHostView bridges to place React Native trees within SwiftUI layouts and manage the platform-specific layout contracts.

How do I guard SwiftUI imports when splitting platform files in React Native?▼

Guard SwiftUI imports in React Native by using .ios file extensions and inline Platform checks to ensure SwiftUI modules load only on iOS, preventing platform mismatch errors during cross-platform compilation.

What is the best way to create native iOS settings screens in Expo?▼

The best way to create native iOS settings screens in Expo is using the @expo/ui/swift-ui package to implement native SwiftUI controls like List, Section, Label, Toggle, and Picker for true iOS styling.

Do I need custom Expo Module definitions to use SwiftUI components?▼

Yes, you need custom Expo Module definitions along with platform-split files to ship polished SwiftUI screens alongside JavaScript logic, allowing native SwiftUI controls to function properly within your React Native project.

Why do shared cross-platform components look mismatched on iOS?▼

Shared cross-platform components look mismatched on iOS because they cannot natively replicate iOS design and interaction expectations, requiring you to overlay native SwiftUI widgets to achieve a fully native feel.