expo-ui Skill: Build Native SwiftUI and Jetpack Compose UI in Expo

Makes your coding assistant build sheets, pickers, sliders and menus with Expo's @expo/ui native components.

Installs: 33.9K; on skills.sh
Stars: 4K; on GitHub
Files: 6; besides SKILL.md
Updated: Nov 2026; last repo commit

expo-ui is an official skill from the Expo team. It tells your assistant to reach for the @expo/ui package first for bottom sheets, pickers, sliders, toggles, menus and grouped form sections, instead of Reanimated, @gorhom/bottom-sheet or React Native built-ins. The package renders real SwiftUI on iOS and Jetpack Compose on Android.

Your project needs @expo/ui, and the skill says the universal layer needs Expo SDK 56 or newer. The List component is not a virtualized list, so the skill sends long lists to FlatList or FlashList.

Good for

Expo and React Native developers who want real SwiftUI and Jetpack Compose controls
Teams moving off @gorhom/bottom-sheet or the community date picker
Anyone building a settings screen or form that should look native on each phone

Install expo-ui

Claude Code

Copy this prompt.

Install the expo-ui skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Default to @expo/ui for sheets (BottomSheet), pickers, sliders, toggles, menus, and grouped-form sections — do NOT reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Picker/Switch; use @expo/ui instead. Fall back to RN built-ins only when @expo/ui is missing the component. NOTE: @expo/ui List renders native grouped rows like an iOS Settings screen — it is NOT a virtualized list; use FlatList/FlashList for large datasets. Covers universal components (Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker, Menu), drop-in replacements for RN community libraries, and platform-specific SwiftUI/Jetpack Compose trees. Not for Expo Router navigation, Reanimated, or data fetching.

Sections in SKILL.md

Installation
Use @expo/ui by default — don't reach for RN alternatives first
Choosing an approach
References
Submitting Feedback

Key facts

Author: Expo (the README calls these official skills from the Expo team)
Repo: expo/skills
Installs on skills.sh: 33,900 as of 2026-11-02
GitHub stars: 4,005 for the whole expo/skills repo, 2026-11-02
License: MIT (SKILL.md frontmatter)
Last commit to the repo: 2026-11-01
What is inside: 7 files including SKILL.md: 4 reference guides, 1 script (scripts/list-components.js) and agents/openai.yaml
Needs: An Expo project with @expo/ui installed; the universal layer needs SDK 56+
Part of: The expo plugin, which holds 23 skills
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass (2026-11-02)

What it includes

Maps each UI need to an @expo/ui component
BottomSheet for sheets, List and ListItem for grouped rows, Switch, Slider, Menu, FieldGroup for labelled form sections and Collapsible. Date and time pickers come from @expo/ui/community/datetimepicker. Fall back to React Native built-ins only when @expo/ui lacks the component.
Try: “Add a bottom sheet to my map screen that shows the café name and address.”
Read · Use @expo/ui first
One component tree for iOS, Android and web
Import from the @expo/ui root. Includes Host, Column, Row, Button, Text, List, BottomSheet, FieldGroup, Switch, Slider, Picker and Menu. Every @expo/ui tree must sit inside Host.
Write · Universal components
SwiftUI on iOS, Jetpack Compose on Android
@expo/ui/swift-ui is iOS-only and @expo/ui/jetpack-compose is Android-only. Importing the wrong one crashes at runtime, so the skill puts them in .ios.tsx and .android.tsx files under components/, never under app/.
Write · Platform-specific trees
API-compatible swaps for community UI libraries
Imported from @expo/ui/community/<name>, for example @gorhom/bottom-sheet and @react-native-community/datetimepicker.
Write · Drop-in replacements
Uses isPresented and onDismiss with optional snapPoints
The skill warns that isOpen, isOpened and onChange are @gorhom/bottom-sheet props and do nothing here. snapPoints accepts half, full, a fraction or a height.
Read · BottomSheet rules
Sends long or unknown-length lists to FlatList or FlashList
List renders short grouped rows like an iOS Settings screen. Rows are not recycled.
Read · List is not virtualized
Prints the components and modifiers installed in a project
Run with node and a project path, with --docs for one-line modifier notes. The script reads the installed @expo/ui package in node_modules and imports only Node's fs and path modules.
Runs code · scripts/list-components.js
Adds the package to your project
The skill lists this as the install step.
Runs code · npx expo install @expo/ui
Reports wrong or outdated skill content to Expo
npx --yes @expo/agent-cli@latest feedback --category skills --subject "expo-ui" with a specific note. Only for something actionable.
Runs code · Feedback command

From the official docs

Permissions

Low risk

This skill adds a package to your project and lets your assistant write native UI code. Run it on a branch and review the diff.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It adds a dependency to your project
The skill's install step is npx expo install @expo/ui, which edits package.json. Run it on a branch. github.com
The feedback command runs a package from npm
When something is wrong the skill tells the assistant to run npx --yes @expo/agent-cli@latest feedback with as much context as it can. Read the text before it is sent, and skip it for private projects. github.com
The bundled script reads your node_modules
scripts/list-components.js lists components from the installed @expo/ui package in a project path you give it. It imports only fs and path. github.com

Security advisories

No published security advisories as of Nov 2, 2026.

Technical details

Turning on read-only	No read-only mode. The assistant writes component code and can add a dependency.
Talks to	The npm registry, when @expo/ui is installed. Expo, if you send feedback with the npx command
Scopes	The skill pre-approves running node on its bundled list-components.js script Installs @expo/ui into your project with npx expo install

Questions

What does the expo-ui skill do?

It makes your assistant use the @expo/ui package for native sheets, pickers, sliders, toggles and menus, so you get real SwiftUI on iOS and Jetpack Compose on Android instead of JavaScript look-alikes.

How do I install expo-ui?

Use the install box at the top of this page. Your project also needs the package, which the skill installs with npx expo install @expo/ui. Restart your agent session so it finds the skill.

Which Expo SDK does it need?

The universal components need SDK 56 or newer and work in Expo Go with no custom build. The drop-in replacements and the platform-specific layers also exist on SDK 55, according to the skill.

Is expo-ui safe to use?

It changes your project: the skill adds a dependency and the assistant writes component code. It also bundles one Node script that lists installed components. Review the diff, and read any feedback text before it is sent.

Why does my List get slow with many rows?

The @expo/ui List is not virtualized. It renders native grouped rows and does not recycle them. The skill says to use FlatList or FlashList for feeds, search results and catalogs.

expo-ui or expo-native-ui?

Use expo-ui for the @expo/ui components. The expo-native-ui skill covers the surrounding screen styling and tells the assistant to check expo-ui first before picking any UI component.

Does it work in the Claude app, Codex or Cursor?

The Expo README gives a plugin for Claude Code and Codex and the skills CLI for Cursor and other agents. It does not document uploading to the Claude app.

Information

updated Nov 2, 2026

Repository: expo/skills
Folder: plugins/expo/skills/expo-ui

expo/skills skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 4

expo-ui SKILL.md · github.com
list-components.js · github.com
expo/skills README · github.com
expo-native-ui SKILL.md · github.com