Expo UI skill: native SwiftUI and Jetpack Compose with @expo/ui

Source: expo/skills · Maintainer: Expo · License: MIT · Checked: 24 October 2026

What is the expo-ui skill?

The expo-ui skill is Expo's official Agent Skill for the @expo/ui package, which renders real SwiftUI on iOS and Jetpack Compose on Android from React. It tells your coding agent to reach for @expo/ui first for sheets, pickers, sliders, toggles, menus and form sections, instead of Reanimated, @gorhom/bottom-sheet or React Native's built-in Picker and Switch. Install it with npx skills add https://github.com/expo/skills --skill expo-ui.

Its description starts: "Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android." It sits in the Framework (open source) group of expo/skills, next to the expo-native-ui skill, which sends component choices to this one.

As of 24 October 2026, its skills.sh page listed 31.5K installs (snapshot, 24 October 2026). skills.sh first saw it on 11 June 2026. Older skills.sh entries such as "Expo UI SwiftUI" and expo-ui-jetpack-compose point to skills that are no longer in the repo; Expo merged them into this one.

What does it do?

The skill is model-invoked, so the agent loads it when a task touches native controls in an Expo app. The SKILL.md (version 1.0.0) does four things.

Sets a default. "Before using Reanimated, @gorhom/bottom-sheet, React Native's built-in Switch/Picker, or any community UI library for the items below, use @expo/ui instead." It maps common needs to components:

React Native built-ins are the fallback only when @expo/ui is missing the component.

Prevents common mistakes. Every @expo/ui tree must be wrapped in Host. BottomSheet takes isPresented and onDismiss, and the skill warns that props borrowed from @gorhom/bottom-sheet, such as isOpen or onChange, "will silently do nothing." snapPoints accepts 'half', 'full', a fraction or a height. And List "is NOT a virtualized scrolling list": use FlatList or FlashList for long or unknown-length data.

Picks a layer. The agent works down a short list and stops at the first fit:

1. Universal components, imported from the @expo/ui root. One tree runs on iOS, Android and web.
2. Platform-specific trees, from @expo/ui/swift-ui or @expo/ui/jetpack-compose, only when the universal layer lacks a component or modifier, or you need platform-specific behavior. These mean two trees, split into .ios.tsx and .android.tsx files or branched on Platform.OS.

The skill warns that the SwiftUI import is iOS-only and the Compose import is Android-only, and that importing either on the other platform crashes at runtime. It says to keep those files in components/, never in app/, because "Expo Router does not support platform extensions for route files", and to import Host from the package root.

Covers migrations. For apps already on a community library, @expo/ui ships drop-in replacements under @expo/ui/community/<name>. The reference file lists eight, including replacements for @gorhom/bottom-sheet, @react-native-community/datetimepicker, @react-native-picker/picker, react-native-pager-view and @react-native-community/slider.

The folder holds four reference files (universal.md, drop-in-replacements.md, swift-ui.md, jetpack-compose.md), an agents/openai.yaml for Codex, and a script, scripts/list-components.js, that lists the @expo/ui components and modifiers installed in your project's node_modules. The frontmatter pre-approves running that script with allowed-tools.

How do you install it?

Expo's README recommends the plugin for Claude Code and Codex, and the skills CLI for other agents. The Expo skills docs cover the same routes.

Claude Code plugin (all Expo skills plus the Expo MCP server).

claude plugin install expo@claude-plugins-official

You can also run /plugin install expo@claude-plugins-official inside Claude Code. The plugin comes from Anthropic's official plugin marketplace; see Claude Code plugins.

Codex plugin.

codex plugin add expo@openai-curated

Just this skill, with the skills CLI. The command on skills.sh:

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

Then add the package to your app, as the skill shows:

npx expo install @expo/ui

The skills CLI puts the skill in .claude/skills/expo-ui/ for Claude Code, or ~/.claude/skills/expo-ui/ with -g, the standard Claude Code skill locations. Codex and Cursor read the same SKILL.md format; see Codex skills and Cursor skills.

How do you use it?

Ask for the control or screen you want. You don't need to name @expo/ui; the skill makes it the default.

Example prompts (suggestions, not quotes from the repo):

• Add a bottom sheet with place details when a map pin is tapped.
• Build a settings screen with grouped rows, a dark mode toggle and a font size slider.
• Replace @gorhom/bottom-sheet and @react-native-community/slider in this app with the @expo/ui drop-ins.
• Add a native date picker to the booking form that looks right on iOS and Android.
• List the @expo/ui components installed in this project and tell me which ones fit a filter menu.

For component details, the Expo UI reference is the source of truth. It describes @expo/ui as "a set of native input components that allows you to build fully native interfaces with Jetpack Compose and SwiftUI."

Tips and limits

From the SKILL.md, its references and skills.sh, not from testing:

• SDK version matters. The skill tracks the latest Expo SDK. The universal layer needs SDK 56 or later; on SDK 55 only the drop-ins and platform layers exist. Tell the agent your SDK version, and check the docs for that version.
• One path mismatch. The SKILL.md table writes the date picker import as @expo/ui/community/datetimepicker, while references/drop-in-replacements.md uses @expo/ui/community/datetime-picker. Expo's DateTimePicker drop-in docs use @expo/ui/community/datetime-picker, matching the reference file, so prefer that path and check the installed package in node_modules if an import fails.
• Not for navigation or data. The description says it is "Not for Expo Router navigation, Reanimated, or data fetching." Those belong to other Expo skills.
• Extra frontmatter field. The SKILL.md includes a version field, which is not one of the six fields (name, description, license, compatibility, metadata, allowed-tools) the Claude Code skills docs list for claude.ai skill uploads. The docs say an upload with any other field fails with an error, so remove that line before uploading it there.
• Feedback command. The skill tells the agent it can send feedback to Expo with npx --yes @expo/agent-cli@latest feedback, only when it has something specific to report. Watch for it if you don't want anything sent.
• Audits. On 24 October 2026, skills.sh showed Pass from Gen Agent Trust Hub, Socket and Snyk, all three audits dated 22 October 2026.
• License. MIT, stated in the SKILL.md frontmatter and in the LICENSE files at the repo root and in plugins/expo. Copy and change it, keeping the copyright notice.

Save it in your Kipt library

In Kipt, open Skills and paste the skill's GitHub folder link into the import box; it reads the SKILL.md, the references/ files, the script and agents/openai.yaml. Paste the repo link instead and Kipt shows a list of Expo skills to pick from, so you can add expo-native-ui alongside it. Your library stays in a private GitHub repo you own and installs into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with Expo.

Similar skills

• Expo native UI skill: Expo's screen styling skill, which checks this one before picking components.
• Expo module skill: for native views @expo/ui doesn't cover, written with the Expo Modules API.
• SwiftUI expert skill: SwiftUI guidance for native iOS apps.
• React Native skill: Vercel's React Native and Expo rules for lists, animation and native UI.
• Expo skill (expo-dev-client): development builds, for features beyond Expo Go.