skills.rest
sombek
sombekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-ui

Build native iOS and Android UI with @expo/ui universal and platform-specific components.

Updated Sep 6, 2026
Search Tags:#swiftui#react native#jetpack compose#expo#native ui#bottom sheet#mobile components
One-click install
npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-ui-sombek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-ui
Source: https://github.com/sombek/fitness-guidance-app/tree/main/mobile/.agents/skills/expo-ui
Command: npx skills add https://github.com/sombek/fitness-guidance-app --skill expo-ui-sombek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve? Choosing the right React Native UI approach is error-prone: developers reach for Reanimated, @gorhom/bottom-sheet, or RN built-in Pickers when @expo/ui already provides real native SwiftUI and Jetpack Compose equivalents, and they misuse non-virtualized Lists or wrong BottomSheet props. This Skill guides AI agents to build correct native UI with @expo/ui across its universal, drop-in replacement, and platform-specific layers. ## Core Features & Use Cases - Universal components first: Use Host, Column, Row, Button, Text, List, BottomSheet, Switch, Slider, Picker, Menu, and FieldGroup from a single cross-platform API (SDK 56+), with correct props like isPresented/onDismiss for BottomSheet. - Drop-in replacements: Migrate off community libraries (@gorhom/bottom-sheet, datetimepicker, pager-view, slider, and more) via API-compatible imports from @expo/ui/community/<name>. - Platform-specific layers: Build @expo/ui/swift-ui (iOS) and @expo/ui/jetpack-compose (Android) trees with modifiers, RNHostView, and useNativeState, with correct .ios.tsx/.android.tsx file placement outside Expo Router's app/ directory. - Use Case: When adding a map pin detail sheet, use the universal BottomSheet with snapPoints instead of installing @gorhom/bottom-sheet, and use FlatList rather than @expo/ui List for large datasets. ## Quick Start Ask the agent to add a native bottom sheet, settings-style grouped list, or toggle to your Expo app using @expo/ui instead of community libraries.

Frequently Asked Questions about expo-ui

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add a bottom sheet in an Expo app without @gorhom/bottom-sheet?▼

Use the universal BottomSheet from @expo/ui, controlled with isPresented and onDismiss props inside a Host wrapper. The snapPoints prop accepts 'half', 'full', { fraction }, or { height }, and auto-sizes to content when omitted.

What is the difference between @expo/ui universal components and swift-ui or jetpack-compose imports?▼

Universal components from the @expo/ui root run on iOS, Android, and web from one tree. The swift-ui and jetpack-compose sub-packages are platform-only, crash on the other platform, and require .ios.tsx or .android.tsx file splits outside the app/ directory.

Can I use @expo/ui List for large datasets like feeds or search results?▼

No. @expo/ui List renders native grouped rows like an iOS Settings screen and is not virtualized; each ListItem is a node on the JS thread. For large or unknown-length data, use FlatList or FlashList instead.

Does @expo/ui work in Expo Go and which SDK version is required?▼

The universal component layer requires Expo SDK 56 or later and works in Expo Go with no custom build. Drop-in replacements and platform-specific layers also exist on SDK 55. Install with npx expo install @expo/ui.

Why does my app crash with 'Unable to get view config' when using @expo/ui?▼

This happens when @expo/ui/swift-ui code runs on Android or @expo/ui/jetpack-compose code runs on iOS. Isolate platform-specific trees in .ios.tsx or .android.tsx files under components/, or guard imports with Platform.OS checks.

How do I migrate an existing app off @gorhom/bottom-sheet or other community UI libraries?▼

@expo/ui ships API-compatible drop-in replacements under @expo/ui/community/<name>, covering bottom-sheet, datetimepicker, pager-view, picker, slider, segmented-control, menu, and masked-view. Usually only the import path changes.

Related Skills

Explore More Software Engineering Skills→
openaiopenai
5.3k

expo-ui-swift-ui

Implements SwiftUI views and modifiers in Expo React Native apps using @expo/ui.

Official
Basic
aadilmallickaadilmallick

expo-skill-feedback

Submit feedback on Expo skills and control opt-in anonymous usage telemetry.

Community
Intermediate
infinite-loop-factoryinfinite-loop-factory

building-native-ui

Build native UI with Expo Router for iOS and Android apps.

Official
Basic
CYRUS-pintoCYRUS-pinto

expo-ui

Build native iOS and Android UI with @expo/ui universal and platform-specific components.

Community
Advanced