expo-ui

Build native mobile UI with @expo/ui universal, SwiftUI, and Jetpack Compose components.

Updated Sep 8, 2026
One-click install
npx skills add https://github.com/bmiit145/leadBee --skill expo-ui-bmiit145
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-ui
Source: https://github.com/bmiit145/leadBee/tree/main/mobile/.agents/skills/expo-ui
Command: npx skills add https://github.com/bmiit145/leadBee --skill expo-ui-bmiit145

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @expo/ui, and includes scripts (resource) and references (resource) components.

What problem does it solve? Choosing and correctly implementing native UI components in Expo apps is error-prone: developers reach for community libraries like @gorhom/bottom-sheet or Reanimated when @expo/ui already provides native SwiftUI and Jetpack Compose equivalents, and platform-specific imports crash when used on the wrong OS. ## Core Features & Use Cases - Universal components first: Use Host, Column, Row, Button, Text, List, BottomSheet, Switch, Slider, Picker, Menu, and FieldGroup from a single API that runs on iOS, Android, and web (SDK 56+). - Drop-in replacements: Migrate off community libraries with API-compatible swaps under @expo/ui/community, covering bottom-sheet, datetimepicker, picker, slider, segmented-control, and more. - Platform-specific layers: Build @expo/ui/swift-ui or @expo/ui/jetpack-compose trees with modifiers, RNHostView, and useNativeState when universal components are insufficient, with correct .ios.tsx/.android.tsx file placement. - Use Case: When adding a bottom sheet to a map screen, use the universal BottomSheet with isPresented/onDismiss instead of installing @gorhom/bottom-sheet, and run the list-components script to confirm what the installed SDK version supports. ## Quick Start Ask the AI to add a native bottom sheet, picker, or settings-style list to your Expo screen using @expo/ui universal components.

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. Wrap it in a Host component and optionally set snapPoints to 'half', 'full', a fraction, or a fixed height.

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 expose platform-specific components and modifiers but crash on the other platform, so they require .ios.tsx or .android.tsx file splits.

Can I use @expo/ui List for large scrollable datasets?▼

No. @expo/ui List renders native grouped rows like an iOS Settings screen and does not recycle rows. For large or unknown-length data such as feeds or search results, use FlatList or FlashList instead.

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. Place platform-specific trees in .ios.tsx or .android.tsx files under components/, never inside the app/ route directory.

How do I migrate from @react-native-community/datetimepicker or slider to @expo/ui?▼

Import the API-compatible drop-in replacement from @expo/ui/community, such as @expo/ui/community/datetime-picker or @expo/ui/community/slider. The props match the original library, so usually only the import path changes.

Does @expo/ui work in Expo Go without a custom build?▼

Yes, the universal component layer requires Expo SDK 56+ and works in Expo Go. Drop-in replacements and platform-specific layers are also available on SDK 55.