Official agent skill

Expo UI

by expo in expo/skills

Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android.

OfficialMITAuto-check passedMobile

Install Expo UI

skills CLI
$ npx skills add expo/skills --skill expo-ui -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install expo/skills expo-ui --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ 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-src

Use ~/.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/

Facts

Skill name
expo-ui
GitHub stars
2.7k
Token cost
~1.7k tokens
SKILL.md length
620 words
Files
7 (incl. scripts, references)
Skills in repo
26
Repo updated
First seen
Licence
MIT

At a glance

Build native UI with the @expo/ui package: real SwiftUI on iOS and Jetpack Compose on Android.

  • Works in 2 steps: Universal components — start here.… → Platform-specific (SwiftUI / Jetpack…
  • Tasks that involve Cross-platform mobile apps
  • SKILL.md covers Installation, Use @expo/ui by default —…, Choosing an approach and References, plus 1 more section
  • Runs JavaScript scripts from its folder; calls npx

What it does

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.

When your agent uses it

  • Tasks that involve Cross-platform mobile apps
  • Tasks that involve iOS development
  • Tasks that involve Android development

Example prompts

  • “/expo-ui”

Requirements

  • Node.js
  • Pre-approved tools (allowed-tools): Bash(node *expo-ui/scripts/list-components.js *)

Workflow steps

2 steps, taken from the first numbered list in SKILL.md.

  1. Universal components — start here. Import from the @expo/ui root. One component tree runs unmodified on iOS, Android, and web from a…
  2. Platform-specific (SwiftUI / Jetpack Compose). Import from @expo/ui/swift-ui or @expo/ui/jetpack-compose. Use only when the universal…

What it can do on your machine

Read from SKILL.md and the folder at commit d4f4840. It shows what the files ask for, not the result of running them.

  • Tool permissions

    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.

  • Runs code

    Ships 1 file in scripts/ (JavaScript), which the agent can run.

    Shell commands in SKILL.md call:

    • npx

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    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.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

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.

Always · name and description, kept in context so the agent knows when to use it
~206
When it runs · the whole SKILL.md, loaded when a task matches
~1.7k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~5.9k

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.

Safety

Auto-check passed

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.

SKILL.md

The full file from expo/skills at commit d4f4840, republished under its MIT licence (© expo). 620 words, ~1,729 tokens.

Download SKILL.mdSave it as .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.
name
expo-ui
description
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.
allowed-tools
Bash(node *expo-ui/scripts/list-components.js *)
version
1.0.0
license
MIT

Expo UI (@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.

Installation

bash
npx expo install @expo/ui

Every @expo/ui tree — universal or platform-specific — must be wrapped in Host.

Use @expo/ui by default — don't reach for RN alternatives first

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.

NeedUse
Slide-up sheet / bottom sheetBottomSheet 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)
ToggleSwitch from @expo/ui
SliderSlider from @expo/ui
Date/time picker@expo/ui/community/datetimepicker
MenuMenu from @expo/ui
Form section with labelFieldGroup from @expo/ui
Collapsible sectionCollapsible from @expo/ui

List is 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. Each ListItem is a native node on the JS thread; rows are not recycled. For any list with large or unknown-length data (feeds, search results, catalogs), use FlatList or FlashList instead. List is 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):

tsx
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).

Show full SKILL.md (303 more words)Show less

Choosing an approach

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

Submitting Feedback

If you encounter errors, misleading or outdated information in this skill, report it so Expo can improve:

bash
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

Files

SKILL.md and 6 other files (scripts, references) in plugins/expo/skills/expo-ui of expo/skills.

  • SKILL.md
  • agents/openai.yaml
  • references/drop-in-replacements.md
  • references/jetpack-compose.md
  • references/swift-ui.md
  • references/universal.md
  • scripts/list-components.js

Open the folder on GitHubat commit d4f4840

Compare with similar skills

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.

Expo UI compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Expo UI this skillexpo/skills2.7k—~1.7kAutomated safety check: PassMIT
Expo UIarcboxlabs/linkcode155—~1.2kAutomated safety check: PassMIT
Expo UIsickn33/agentic-awesome-skills47k1 repos~1.1kAutomated safety check: PassMIT
Developing Mobile Appstelagod/code-abyss244—~258Automated safety check: PassMIT
Senior Mobileborghei/Claude-Skills891—~1.9kAutomated safety check: PassMIT
Expo Brownfield Integrationmweinbach/agent-coworker1562 repos~900Automated safety check: NotesCustom licence

Similar skills

  • Expo UI

    arcboxlabs/linkcode

    Framework (OSS). An agent skill from arcboxlabs/linkcode.

    155 GitHub stars~1.2k tokensUpdated 12 days ago
    MobileAuto-check passed
  • Expo UI

    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.

    47k GitHub starsUsed in 1 repo~1.1k tokens
    MobileAuto-check passed
  • Developing Mobile Apps

    telagod/code-abyss

    Mobile development knowledge reference covering iOS (SwiftUI), Android (Jetpack Compose), React Native, and Flutter.

    244 GitHub stars~258 tokensUpdated 2 mo ago
    MobileAuto-check passed
  • Senior Mobile

    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…

    891 GitHub stars~1.9k tokensUpdated 3 days ago
    MobileAuto-check passed
  • Expo Brownfield Integration

    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.

    156 GitHub starsUsed in 2 repos~900 tokens
    MobileAuto-check: notes
  • Ksafe

    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.

    338 GitHub stars~17k tokensUpdated 7 days ago
    MobileAuto-check passed

More from expo/skills

All 26 skills in this repo
  • Official

    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.

    2.7k GitHub starsUsed in 4 repos~3.1k tokens
    Auto-check passed
  • Eas Workflows

    expo/skills

    Official

    Helps understand and write EAS workflow YAML files for Expo projects.

    2.7k GitHub stars~1.2k tokensUpdated 3 days ago
    Auto-check passed
  • Expo App Clip

    expo/skills

    Official

    Add an iOS App Clip target to an Expo app. An agent skill from expo/skills.

    2.7k GitHub starsUsed in 2 repos~2.4k tokens
    Auto-check passed
  • Expo Skill Eval

    expo/skills

    Official

    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).

    2.7k GitHub stars~12k tokensUpdated 3 days ago
    Auto-check passed
  • Official

    Submit feedback on an Expo skill—or Expo itself—and control bundled anonymous usage telemetry (off by default / opt-in).

    2.7k GitHub stars~1.3k tokensUpdated 3 days ago
    Auto-check passed
  • Expo Module

    expo/skills

    Official

    Guide for creating and writing Expo native modules and views using the Expo Modules API (Swift, Kotlin, TypeScript).

    2.7k GitHub starsUsed in 1 repo~1.6k tokens
    Auto-check passed

Categories

Questions about Expo UI

What does Expo UI do?

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.

When should I use Expo UI?

Expo UI fits situations like: tasks that involve Cross-platform mobile apps; tasks that involve iOS development; tasks that involve Android development.

How do I install Expo UI in Claude Code?

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.

How do I install Expo UI in Codex?

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.

Can I use Expo UI in Cursor, Gemini CLI or GitHub Copilot?

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.

What does Expo UI need to run?

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 *).

Does Expo UI access the network?

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.

Is Expo UI safe to install?

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.

What licence does Expo UI use?

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.

How many tokens does Expo UI use?

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.

What are the alternatives to Expo UI?

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.

Who maintains Expo UI?

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.