About
The `expo-ui` skill helps developers build truly native UI in Expo/React Native apps using the `@expo/ui` package, which renders real SwiftUI on iOS and Jetpack Compose on Android from React. It provides universal cross-platform components, drop-in replacements for popular community libraries, and access to platform-specific native trees. Use this skill when implementing native-feeling interfaces where standard React Native falls short, such as complex lists, forms, or when replacing a community UI library.
Quick Install
Claude Code
Recommendednpx skills add expo/skills -a claude-code/plugin add https://github.com/expo/skillsgit clone https://github.com/expo/skills.git ~/.claude/skills/expo-uiCopy and paste this command in Claude Code to install this skill
Documentation
Expo UI (@expo/ui)
@expo/ui renders real native UI from React: SwiftUI on iOS, Jetpack Compose on Android. Start with its universal components (one tree for iOS, Android, and web) and drop to platform-specific SwiftUI/Jetpack Compose only when the universal layer falls short. It also ships drop-in replacements for migrating off RN community UI libraries.
These instructions track the latest Expo SDK. The universal layer requires SDK 56+. Drop-in replacements and the platform-specific layers also exist on SDK 55. For component details on a specific SDK, refer to the Expo UI docs for that version.
Installation
npx expo install @expo/ui
On SDK 56, @expo/ui works in Expo Go, so npx expo start runs it directly — no custom build required. On older SDKs, build a dev client first (npx expo run:ios / npx expo run:android).
Every @expo/ui tree — universal or platform-specific — must be wrapped in Host.
Choosing an approach (read this first)
Work down this list and stop at the first layer that meets the need:
-
Universal components — start here. Import from the
@expo/uiroot. One component tree runs unmodified on iOS, Android, and web from a single source (Compose on Android, SwiftUI on iOS,react-native-web/react-domon web). No platform file splits. →./references/universal.md -
Platform-specific (SwiftUI / Jetpack Compose). Import from
@expo/ui/swift-uior@expo/ui/jetpack-compose. Use only when the universal layer is missing a component or modifier you need, or when you need platform-specific behavior or optimization. Downside: you write two trees and split them into.ios.tsx/.android.tsxfiles (or branch onPlatform.OS) — more code to maintain. →./references/swift-ui.mdand./references/jetpack-compose.md
Already using an RN community UI library? @expo/ui also ships drop-in replacements — API-compatible swaps for popular libraries (@gorhom/bottom-sheet, @react-native-community/datetimepicker, and more), imported from @expo/ui/community/<name>. This is a migration side-path for replacing an existing dependency, not a step in the universal-vs-platform decision above. → ./references/drop-in-replacements.md
References
Consult these resources as needed:
references/
universal.md Universal @expo/ui components and when to use them (SDK 56+)
drop-in-replacements.md API-compatible replacements for RN community UI libraries
swift-ui.md Platform-specific iOS UI: @expo/ui/swift-ui components, modifiers, RNHostView, useNativeState
jetpack-compose.md Platform-specific Android UI: @expo/ui/jetpack-compose components, modifiers, LazyColumn caveat, icons, useNativeState
GitHub Repository
Frequently asked questions
What is the expo-ui skill?
expo-ui is a Claude Skill by expo. Skills package instructions and resources that Claude loads on demand, so Claude can perform expo-ui-related tasks without extra prompting.
How do I install expo-ui?
Use the install commands on this page: add expo-ui to Claude Code as a plugin, or clone its repository into your skills directory, then restart Claude so it picks up the skill.
What category does expo-ui belong to?
expo-ui is in the Meta category, tagged react, design and data.
Is expo-ui free to use?
Yes. expo-ui is listed on AIMCP and free to install. It runs inside Claude, so no separate service account is required to use the skill itself.
Related Skills
This skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
This skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.
This skill helps developers create OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It provides the plugin structure, event API specifications, and implementation patterns for JavaScript/TypeScript modules. Use it when you need to intercept, monitor, or extend the OpenCode AI assistant's lifecycle with custom event-driven logic.
SGLang is a high-performance LLM serving framework that specializes in fast, structured generation for JSON, regex, and agentic workflows using its RadixAttention prefix caching. It delivers significantly faster inference, especially for tasks with repeated prefixes, making it ideal for complex, structured outputs and multi-turn conversations. Choose SGLang over alternatives like vLLM when you need constrained decoding or are building applications with extensive prefix sharing.