skills.rest
aadilmallick
aadilmallickCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

expo-ui

Build native iOS and Android UI with @expo/ui SwiftUI and Jetpack Compose components.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill 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 equivalents, misuse non-virtualized lists for large datasets, or crash apps by importing platform-specific modules on the wrong OS. ## Core Features & Use Cases - Universal component guidance: Directs you to cross-platform @expo/ui components (Host, Column, Row, Button, Text, List, BottomSheet, Switch, Slider, Picker, FieldGroup) that render SwiftUI on iOS and Jetpack Compose on Android from one tree. - Drop-in replacements: Maps community libraries (@gorhom/bottom-sheet, datetimepicker, pager-view, segmented-control, and more) to API-compatible @expo/ui/community imports for migration. - Platform-specific layers: Provides rules for @expo/ui/swift-ui and @expo/ui/jetpack-compose, including .ios.tsx/.android.tsx file placement outside Expo Router routes and Host wrapping requirements. - Component discovery script: Runs list-components.js against node_modules to enumerate the exact components and modifiers available in the installed @expo/ui version. - Use Case: When adding a slide-up detail sheet to a map screen, use the universal BottomSheet with isPresented/onDismiss instead of installing @gorhom/bottom-sheet. ## Quick Start Ask the agent to add a native bottom sheet, picker, or settings-style list 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. 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 are platform-only and require separate .ios.tsx or .android.tsx files, so use them only when universal components lack what you need.

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

How do I migrate from @gorhom/bottom-sheet or datetimepicker to @expo/ui?▼

Use the drop-in replacements under @expo/ui/community/<name>, which match the original library's API so migration is usually just an import path change. Check the installed package's .d.ts types for exact props on your SDK version.

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

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

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
MinhmiceMinhmice

expo-dev-client

Build and distribute custom Expo development clients for iOS and Android native testing.

Community
Intermediate
FutureAtomsFutureAtoms
1

react-native-2026-bottom-sheet

Create interactive bottom sheet modals in React Native with @gorhom/bottom-sheet.

Community
Advanced
carapace-shcarapace-sh
1.4k

elvish

Document the Elvish editor API, completion pipeline, and startup configuration.

Official
Advanced