Expo UI
arcboxlabs/linkcode
Framework (OSS). An agent skill from arcboxlabs/linkcode.
Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android.
$ npx skills add expo/skills --skill expo-ui -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install expo/skills expo-ui --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/plugins/expo/skills/expo-ui .claude/skills/expo-ui && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "expo-ui" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui into .claude/skills/expo-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-ui", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-uiType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add expo/skills --skill expo-ui -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install expo/skills expo-ui --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/plugins/expo/skills/expo-ui .agents/skills/expo-ui && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "expo-ui" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui into .agents/skills/expo-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-ui", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add expo/skills --skill expo-ui -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install expo/skills expo-ui --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/plugins/expo/skills/expo-ui .cursor/skills/expo-ui && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "expo-ui" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui into .cursor/skills/expo-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-ui", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/expo/skills.git --path plugins/expo/skills/expo-ui--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add expo/skills --skill expo-ui -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install expo/skills expo-ui --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/plugins/expo/skills/expo-ui .gemini/skills/expo-ui && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "expo-ui" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui into .gemini/skills/expo-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-ui", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install expo/skills expo-uiInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add expo/skills --skill expo-ui -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/plugins/expo/skills/expo-ui .github/skills/expo-ui && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "expo-ui" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui into .github/skills/expo-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-ui", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add expo/skills --skill expo-ui -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install expo/skills expo-ui --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/expo/skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/plugins/expo/skills/expo-ui .opencode/skills/expo-ui && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "expo-ui" agent skill from https://github.com/expo/skills/tree/main/plugins/expo/skills/expo-ui into .opencode/skills/expo-ui/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "expo-ui", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
expo-uiBuild native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android.
Expo UI is an agent skill from expo/skills, published by the product's own GitHub organization. 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…
Its SKILL.md is about 1.7k tokens, which your agent loads only when the skill is triggered. The skill folder holds 9 other files, including scripts and reference files (for example `agents/openai.yaml`, `references/drop-in-replacements.md` and `references/jetpack-compose.md`).
It sits in Mobile, covering Cross-platform mobile apps, iOS development and Android development. It works with Expo, iOS, Jetpack Compose and SwiftUI. The repository describes itself as: A collection of AI agent skills for working with Expo projects and Expo Application Services. The licence is MIT.
2 steps, taken from the first numbered list in SKILL.md.
Read from SKILL.md and the folder at commit d4f4840. It shows what the files ask for, not the result of running them.
Pre-approves these tools, so the agent can use them without asking each time:
Bash(node *expo-ui/scripts/list-components.js *)From allowed-tools in the SKILL.md frontmatter.
Ships 1 file in scripts/ (JavaScript), which the agent can run.
Shell commands in SKILL.md call:
npxFrom the folder's file list and the shell code blocks in SKILL.md.
No URLs in SKILL.md. Its commands use npx, which can reach the network depending on how they are called.
From URLs in SKILL.md, links to its own repository left out.
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Expo UI loads about 1.7k tokens when it runs, and up to ~5.9k if it reads all its reference files. Until then it costs about 206 tokens; SKILL.md has 620 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
The full file from expo/skills at commit d4f4840, republished under its MIT licence (© expo). 620 words, ~1,729 tokens.
.claude/skills/expo-ui/SKILL.md (or your agent's skills folder). This skill also uses 6 other files; get the full folder from GitHub.@expo/ui)@expo/ui renders real native UI from React: SwiftUI on iOS, Jetpack Compose on Android. 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+ and works in Expo Go — no custom build needed. 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.
npx expo install @expo/uiEvery @expo/ui tree — universal or platform-specific — must be wrapped in Host.
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. Only fall back to RN built-ins when @expo/ui is missing the component.
| Need | Use |
|---|---|
| Slide-up sheet / bottom sheet | BottomSheet from @expo/ui — not Reanimated or @gorhom/bottom-sheet |
| Grouped native list rows (settings/form-style) | List + ListItem from @expo/ui — not FlatList (see note below) |
| Toggle | Switch from @expo/ui |
| Slider | Slider from @expo/ui |
| Date/time picker | @expo/ui/community/datetimepicker |
| Menu | Menu from @expo/ui |
| Form section with label | FieldGroup from @expo/ui |
| Collapsible section | Collapsible from @expo/ui |
Listis NOT a virtualized scrolling list. It renders native grouped table rows — the visual look of an iOS Settings screen or a form section, with disclosure indicators and native row styling. EachListItemis a native node on the JS thread; rows are not recycled. For any list with large or unknown-length data (feeds, search results, catalogs), useFlatListorFlashListinstead.Listis the right choice for short, fixed-length groups: a settings screen, a detail panel's rows, a fixed menu.
BottomSheet example (use this for map pin details, action sheets, detail panels — not Reanimated):
import { Host, BottomSheet, Column, Text } from '@expo/ui';
import { useState } from 'react';
export default function MapScreen() {
const [isOpen, setIsOpen] = useState(false);
return (
<View style={{ flex: 1 }}>
<MapView onMarkerPress={() => setIsOpen(true)} />
<Host>
<BottomSheet
isPresented={isOpen}
onDismiss={() => setIsOpen(false)}
snapPoints={['half', 'full']}
>
<Column>
<Text>Café name</Text>
<Text>Address</Text>
</Column>
</BottomSheet>
</Host>
</View>
);
}BottomSheet uses isPresented/onDismiss — not isOpened, isOpen, onIsOpenedChange, or onChange (those are @gorhom/bottom-sheet props and will silently do nothing). snapPoints accepts 'half', 'full', { fraction: 0.5 }, or { height: 400 } and is optional (auto-sizes to content when omitted).
Work down this list and stop at the first layer that meets the need:
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
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-uiis iOS-only.@expo/ui/jetpack-composeis 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.tsxfiles placed incomponents/(never insideapp/— Expo Router does not support platform extensions for route files), or guard withPlatform.OSin a regular route file.Hostmust always be imported from@expo/ui(the universal package root), not from the platform-specific sub-packages. →./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
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, useNativeStateIf you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:
npx --yes submit-expo-feedback@latest --category skills --subject "expo-ui" "<actionable feedback>"Only submit when you have something specific and actionable to report. Include as much relevant context as possible. If an AI agent repeatedly failed or the user had to take over an Expo task, load the expo-skill-feedback skill and follow its eval-candidate flow instead of reusing the command above.
© expo, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
SKILL.md and 6 other files (scripts, references) in plugins/expo/skills/expo-ui of expo/skills.
Open the folder on GitHubat commit d4f4840
Expo UI next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Expo UI this skillexpo/skills | 2.7k | — | ~1.7k | Automated safety check: Pass | MIT | |
| Expo UIarcboxlabs/linkcode | 155 | — | ~1.2k | Automated safety check: Pass | MIT | |
| Expo UIsickn33/agentic-awesome-skills | 47k | 1 repos | ~1.1k | Automated safety check: Pass | MIT | |
| Developing Mobile Appstelagod/code-abyss | 244 | — | ~258 | Automated safety check: Pass | MIT | |
| Senior Mobileborghei/Claude-Skills | 891 | — | ~1.9k | Automated safety check: Pass | MIT | |
| Expo Brownfield Integrationmweinbach/agent-coworker | 156 | 2 repos | ~900 | Automated safety check: Notes | Custom licence |
arcboxlabs/linkcode
Framework (OSS). An agent skill from arcboxlabs/linkcode.
sickn33/agentic-awesome-skills
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.
telagod/code-abyss
Mobile development knowledge reference covering iOS (SwiftUI), Android (Jetpack Compose), React Native, and Flutter.
borghei/Claude-Skills
A skill your agent uses when the user asks to "build a mobile app", "scaffold React Native project", "create SwiftUI views", "set up Jetpack Compose", "optimize mobile performance", "configure Expo…
mweinbach/agent-coworker
Helps add Expo and React Native to an existing native iOS or Android app, and choose between a prebuilt AAR or XCFramework and a fully integrated build.
ioannisa/KSafe
Required before any reply that touches KSafe (by ksafe(...), ksafe.get/put, :ksafe-compose, :ksafe-biometrics), even a 'can KSafe do X?' question or a one-line change that looks like plain Kotlin.
expo/skills
Check the health of published EAS Update: crash rates, install/launch counts, unique users, payload size, and the split between embedded and OTA users per channel.
expo/skills
Helps understand and write EAS workflow YAML files for Expo projects.
expo/skills
Add an iOS App Clip target to an Expo app. An agent skill from expo/skills.
expo/skills
Evaluate Expo skills in this repo end-to-end - trigger accuracy, generated code quality, and runtime screenshots on iOS simulator and Android emulator via Expo Go (web optional).
expo/skills
Submit feedback on an Expo skill—or Expo itself—and control bundled anonymous usage telemetry (off by default / opt-in).
expo/skills
Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).
Works with
Categories
Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android. Expo UI is an agent skill from expo/skills, published by the product's own GitHub organization. Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android.
Expo UI fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve iOS development; tasks that involve Android development.
Run `npx skills add expo/skills --skill expo-ui -a claude-code`. Or copy the skill folder (plugins/expo/skills/expo-ui in expo/skills) into .claude/skills/expo-ui in your project. Claude Code loads it when a task matches its description.
Run `npx skills add expo/skills --skill expo-ui -a codex`. Or copy the skill folder (plugins/expo/skills/expo-ui in expo/skills) into .agents/skills/expo-ui in your project. Codex loads it when a task matches its description.
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add expo/skills --skill expo-ui -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/expo-ui, .gemini/skills/expo-ui, .github/skills/expo-ui and .opencode/skills/expo-ui in your project.
Going by SKILL.md and its folder, Expo UI needs JavaScript for the scripts in its folder and the command-line tools its instructions call (npx). Our summary lists: Node.js. Its frontmatter pre-approves these tools: Bash(node *expo-ui/scripts/list-components.js *).
SKILL.md contains no URLs. Its commands use npx, which can reach the network depending on how they are called. This is read from the text; nothing was executed.
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
Expo UI is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.
About 1.7k tokens (SKILL.md is roughly 6.9k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 4.2k tokens, read only when the agent opens those files.
Skills that share tags, products or a category with Expo UI: Expo UI (arcboxlabs/linkcode, 155 stars), Expo UI (sickn33/agentic-awesome-skills, 47k stars), Developing Mobile Apps (telagod/code-abyss, 244 stars) and Senior Mobile (borghei/Claude-Skills, 891 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
expo (a GitHub organization, an official publisher) maintains it in expo/skills, which has 2,685 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on October 7, 2026.
Source: expo/skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.