Source ↗

expoexpo-ui

Mechanism

When It Triggers · How It Works · What It Produces

Breaks down how the skill works and what it produces, so you can quickly judge whether it fits your scenario and value.

Trigger

When adding or reviewing @expo/ui Host/RNHostView trees, building native-feeling UI where standard React Native components fall short (settings forms, menus, sheets, pickers), choosing universal vs platform-specific components, or replacing an RN community UI library with a native equivalent.

Mechanism

  • Install via npx expo install @expo/ui; wrap every tree in Host from @expo/ui root.
  • Guide the user down a decision list: universal components first, then platform-specific SwiftUI/Jetpack Compose only if needed, or drop-in replacements for community libs.
  • Reference detailed component docs in references/ for universal, swift-ui, jetpack-compose, and drop-in replacements.

Result

Correct, SDK-appropriate @expo/ui component trees that render real native UI on iOS/Android/web, with clean migration from RN community libraries and avoided platform-import crashes.

Use Cases

Two Typical Use Cases

Scenario 01

Build native settings form with @expo/ui

A developer builds a settings screen with toggles, sections, and a picker. Standard RN components feel off. They use the expo-ui skill to choose universal @expo/ui components wrapped in Host, following SDK 56+ guidance. Result: a single tree running natively on iOS/Android/web, saving dual-platform code and matching platform HIG.

Scenario 02

Migrate RN bottom-sheet to native

A team wants to drop @gorhom/bottom-sheet for a native equivalent. Using the expo-ui skill's drop-in-replacements reference, they swap to @expo/ui/community/bottom-sheet with minimal API changes. Value: removes a heavy RN dependency, gains real native sheet behavior on both platforms without rewriting UI logic.

Skill Relationships

Which Skills I Use · Which Skills Use Me

Dependency relationships read as "the upper tier points to the lower tier." The current Skill sits in the middle tier — above are Skills that depend on it, below are Skills it depends on.

Tier 1 · These Skills Use Me

Tier 2 · Current Skill

  • expo-uiStyle Guide · Workflow

Tier 3 · I Use These Skills

  • No explicit dependency on other Skills

Full Relationship Graph

Browse this skill's relationships within its skillset. Click a node to switch the side panel; use the search box to jump to any skill.

Skill File

SKILL.md

Open in GitHub ↗
SKILL.mdLoading from GitHub…