SkillRepo
Sign InSign Up
Catalog
expo/expo-ui

expo

expo-ui

Framework (OSS). Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android rendered from React in an Expo or React Native app. Covers universal cross-platform components (Host, Column, Row, Button, Text, List, and more imported from @expo/ui), drop-in replacements for popular React Native community libraries (BottomSheet, DateTimePicker, Slider, Menu, etc.), and platform-specific SwiftUI (@expo/ui/swift-ui, iOS only) and Jetpack Compose (@expo/ui/jetpack-compose, Android only) trees and modifiers. Use when adding or reviewing @expo/ui Host/RNHostView trees, building native-feeling UI where standard React Native components fall short (grouped settings forms with toggles, sections, menus, sheets, pickers, sliders), choosing between universal and platform-specific components, or replacing an RN community UI library with a native @expo/ui equivalent. Not for custom native modules, Expo Router navigation, Reanimated, or data fetching.

global
Allowed Tools
Bash(node*expo-ui/scripts/list-components.js*)
New~1.1k
v1.0Saved Jul 11, 2026

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:

  1. Universal components — start here. Import from the @expo/ui root. One component tree runs unmodified on iOS, Android, and web from a single source (Compose on Android, SwiftUI on iOS, react-native-web/react-dom on web). No platform file splits. → ./references/universal.md

  2. Platform-specific (SwiftUI / Jetpack Compose). Import from @expo/ui/swift-ui or @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.tsx files (or branch on Platform.OS) — more code to maintain.

    @expo/ui/swift-ui is iOS-only. @expo/ui/jetpack-compose is Android-only. Importing either in a file that runs on the other platform will crash at runtime with "Unable to get view config" errors. Isolate platform-specific trees in .ios.tsx / .android.tsx files placed in components/ (never inside app/ — Expo Router does not support platform extensions for route files), or guard with Platform.OS in a regular route file. Host must always be imported from @expo/ui (the universal package root), not from the platform-specific sub-packages. → ./references/swift-ui.md and ./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
Files7
7 files · 24.0 KB

Select a file to preview

Overall Score

86/100

Grade

A

Excellent

Safety

88

Quality

87

Clarity

85

Completeness

83

Summary

The Expo UI skill guides agents through building cross-platform native UIs using the @expo/ui package. It teaches a three-tier decision tree: start with universal components (iOS/Android/web), drop to platform-specific SwiftUI or Jetpack Compose only when needed, and migrate existing dependencies using drop-in replacements. The skill includes a utility script (`list-components.js`) for introspecting installed components and comprehensive reference documentation for each layer.

Detected Capabilities

file readnode script executioncode analysis via TypeScript type introspection

Trigger Keywords

Phrases that MCP clients use to match this skill to user intent.

build cross-platform uiexpo ui componentsswiftui jetpack composeplatform-specific native uimigrate community librariesnative ui stylingexpo router components

Risk Signals

INFO

Node script execution: list-components.js reads node_modules and outputs component lists

scripts/list-components.js and allowed-tools field
INFO

File system read access to node_modules @expo/ui package structure

scripts/list-components.js
WARNING

Execution of node script on user-provided project path argument

scripts/list-components.js, argument at process.argv[2]

Referenced Domains

External domains referenced in skill content, detected by static analysis.

developer.android.comdocs.expo.devfonts.google.comm3.material.io

Use Cases

  • Build cross-platform UI with universal @expo/ui components
  • Add platform-specific iOS UI using @expo/ui/swift-ui
  • Add platform-specific Android UI using @expo/ui/jetpack-compose
  • Migrate React Native community UI libraries to @expo/ui drop-in replacements
  • Review code using @expo/ui for proper import paths and file placement
  • Introspect available components and modifiers in an installed @expo/ui version
  • Guide developers on when to use universal vs platform-specific layers

Quality Notes

  • Strong hierarchical structure with clear decision tree (universal → platform-specific → drop-in replacements)
  • Comprehensive reference documentation organized by layer and topic (universal.md, swift-ui.md, jetpack-compose.md, drop-in-replacements.md)
  • Explicit security guardrails: warnings about iOS-only and Android-only imports causing crashes, proper file placement rules (.ios.tsx/.android.tsx outside app/ directory)
  • Excellent edge case coverage: LazyColumn performance caveats, TextInput state synchronization requirements, RNHostView usage patterns, ImportError prevention via Platform.OS guards
  • Practical script for introspecting installed components reduces need for manual documentation lookup
  • Clear limitations documented: skill scope excludes custom native modules, Expo Router navigation, Reanimated, and data fetching
  • Well-defined outputs: agents know exactly what files to create (.ios.tsx, .android.tsx), which imports to use, and how to validate via .d.ts files
  • TypeScript-first approach (recommends .d.ts as source of truth) is modern and practical
  • Integration with external docs clear and versioned (SDK-specific references guide agents to correct docs versions)
  • Minor: allowed-tools field is overly restrictive (only lists list-components.js) but this is conservative
Model: claude-haiku-4-5-20251001Analyzed: Jul 11, 2026

Reviews

Add this skill to your library to leave a review.

No reviews yet

Be the first to share your experience.

Add expo/expo-ui to your library

Get Started Free

Command Palette

Search for a command to run...