Expo Native UI Builder
Build native-feeling, cross-platform interfaces with @expo/ui.
The skill restricts tooling to a specified Node component-listing script, with no visible credential access, covert exfiltration, or destructive default behavior. It requires user confirmation before extending with a local native module and warns about runtime crashes from platform-specific imports. Points are deducted because confirmation, data-flow, and rollback boundaries for installation commands, external documentation access, and project node_modules reads are incomplete, while provenance is mostly repository metadata.
The documentation provides a clear universal-first decision path, SDK boundaries, platform isolation rules, and failure warnings; the listing script reports errors and exits when the project path or @expo/ui is missing. Points are deducted because there are no tests or execution evidence for key paths, the script only parses type-definition exports rather than validating APIs against documentation or projects, and some import-safety guidance is complex or potentially ambiguous.
Audience, scenarios, platform-layer selection, and non-fit areas are clearly described across iOS, Android, web, Expo Router, and community-library migration. Points are deducted because finer trigger conditions and input/output formats are not specified, Chinese-language support is absent, and core references depend on Expo, Android, and Material documentation without evidence of reachability from mainland-China networks.
The skill uses a layered main document and reference files, covering installation, version compatibility, examples, limitations, type-definition precedence, and confirmation before extension. The repository provides an MIT license, a version field, and general CI maintenance checks. Points are deducted because there is no skill-specific changelog, named maintenance owner, or explicit skill-level update path; troubleshooting and FAQ coverage are limited, and external links are not revision-pinned.
The material can directly guide selection among universal components, SwiftUI, Jetpack Compose, and drop-in replacements, with reusable Host, layout, and platform-file examples, so the core task is plausibly completable. Points are deducted because static files provide no verified representative outputs or real-project results; users must still validate types and docs themselves, and comparative benefit over manual implementation is not evidenced.
The repository includes auditable skill files, reference documentation, and a component-enumeration script, while identifying installed package type definitions as the source of truth. Points are deducted because no committed key-path tests, CI execution results, or independent third-party corroboration are shown; external documentation is only referenced by links, and its current accuracy cannot be verified statically.
- Before use, verify the target Expo SDK, @expo/ui version, and installed .d.ts files; guidance tracking the latest SDK may change over time.
- Do not load @expo/ui/swift-ui or @expo/ui/jetpack-compose on the wrong platform; use platform files or a verified runtime branch.
- LazyColumn and List have documented JS-thread performance limits for large datasets; obtain user confirmation before extending with a native module.
- Core references depend on external overseas sites, and mainland-China reachability is not established by the submitted materials.
What does this skill do, and when should you use it?
expo-ui guides Expo and React Native developers in building native UI with @expo/ui. It starts with universal components that can be reused across iOS, Android, and web, then covers platform-specific SwiftUI and Jetpack Compose trees when the universal layer is insufficient. It also documents compatible replacements for selected React Native community UI libraries. The universal layer requires Expo SDK 56 or later, while some replacement and platform-specific layers also support SDK 55.
The skill explains how to install @expo/ui, wrap every UI tree in Host, and choose between universal components, platform-specific SwiftUI or Jetpack Compose components, and community-library replacements. It covers universal components such as Host, Column, Row, Button, Text, and List, along with replacement options for BottomSheet, DateTimePicker, Slider, and Menu. It also explains how to isolate iOS and Android implementations, avoid runtime failures caused by cross-platform imports, and optionally run the Node.js component-listing script through Bash.
- An Expo developer needs one component tree to target iOS, Android, and web, and starts with universal @expo/ui components.
- A React Native project needs grouped settings, toggles, menus, forms, or native-feeling sheets and pickers beyond standard React Native components.
- A team needs SwiftUI-specific behavior or Jetpack Compose-specific capabilities and is prepared to maintain platform-specific UI trees.
- A project already uses @gorhom/bottom-sheet or a community DateTimePicker and wants to migrate to a compatible @expo/ui replacement.
- A developer is reviewing Host, RNHostView, or native UI trees and needs guidance on when to stay universal or go platform-specific.
What are this skill's strengths and limitations?
- The universal-first approach supports a single React component tree for iOS, Android, and web.
- SwiftUI and Jetpack Compose paths are available for platform-specific behavior or optimization.
- Compatible replacements are provided for several React Native community UI libraries.
- The source clearly documents SDK requirements, Host wrapping, and cross-platform import hazards.
- Platform-specific implementations require two UI trees and either platform files or Platform.OS branching.
- The universal layer requires SDK 56 or later; support on SDK 55 is more limited.
- The source provides no test suite, performance benchmarks, or platform coverage evidence.
- The `allowed-tools` Bash(Node.js script) syntax may require adjustment when porting the skill to another agent implementation.
How do you install this skill?
The repository README documents installation of the full Expo Skills collection: npx skills@latest add expo/skills --skill '*'. The CLI asks where to install the skills; the source does not provide a command for installing only expo-ui. Restart or refresh the agent session after installation so it can discover the SKILL.md files.
How do you use this skill?
With the skill installed, give the agent a concrete task such as: “Build a native-feeling Expo settings screen with grouped sections, toggles, and menus using @expo/ui, and decide whether universal or platform-specific components are appropriate.” Start with universal components, and wrap every universal or platform-specific UI tree in Host imported from @expo/ui. Put platform-specific implementations in .ios.tsx or .android.tsx files under components/, not under Expo Router’s app/ directory.
How does this skill compare with similar options?
Compared with standard React Native UI, expo-ui is intended for interfaces where standard components do not provide enough native behavior or appearance. Compared with React Native community UI libraries, it offers compatible replacements for components such as BottomSheet, DateTimePicker, Slider, and Menu, making it relevant for dependency migration.