skills.rest
gmackie
gmackieCOMMUNITY
Explore all skills by this author →
Website𝕏@grahammackieGitHub

expo-ui

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

Updated Mar 27, 2026
Search Tags:#mobile#Expo#react-native#jetpack-compose#swiftui#bottom-sheet#native-ui
One-click install
npx skills add https://github.com/gmackie/agent-skills --skill expo-ui-gmackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: expo-ui
Source: https://github.com/gmackie/agent-skills/tree/main/skills/expo-ui
Command: npx skills add https://github.com/gmackie/agent-skills --skill expo-ui-gmackie

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve? Choosing the right UI approach in Expo apps is confusing: developers often reach for Reanimated, @gorhom/bottom-sheet, or React Native built-ins when @expo/ui already provides real native SwiftUI and Jetpack Compose components, and they struggle to decide between universal, drop-in replacement, and platform-specific layers. ## Core Features & Use Cases - Universal components first: Build cross-platform native UI from a single tree using Host, Column, Row, Button, Text, List, BottomSheet, Switch, Slider, Picker, Menu, and FieldGroup (SDK 56+). - Drop-in replacements: Migrate off community libraries like @gorhom/bottom-sheet or @react-native-community/datetimepicker using API-compatible swaps from @expo/ui/community/<name>. - Platform-specific layers: Write @expo/ui/swift-ui (iOS) or @expo/ui/jetpack-compose (Android) trees with correct .ios.tsx/.android.tsx file placement, modifiers, RNHostView embedding, and useNativeState worklet-driven state. - Use Case: When adding a map pin detail panel, use the universal BottomSheet with isPresented/onDismiss and snapPoints instead of pulling in Reanimated or @gorhom/bottom-sheet. ## Quick Start Ask the agent to build a settings screen or bottom sheet in your Expo app using @expo/ui universal components instead of React Native built-ins.

Frequently Asked Questions about expo-ui

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

FAQPage Schema
How do I build a bottom sheet in an Expo app?▼

Use BottomSheet from @expo/ui instead of Reanimated or @gorhom/bottom-sheet. Control it with isPresented and onDismiss props, and optionally set snapPoints to 'half', 'full', a fraction, or a fixed height. Wrap the tree in Host from the @expo/ui root.

What is the difference between @expo/ui universal components and platform-specific layers?▼

Universal components imported from the @expo/ui root run one tree on iOS, Android, and web with no platform file splits. The @expo/ui/swift-ui and @expo/ui/jetpack-compose layers are platform-only and require separate .ios.tsx and .android.tsx files, so use them only when universal is missing a component.

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

No, @expo/ui List renders native grouped rows like an iOS Settings screen and is not virtualized. Each ListItem is a native node on the JS thread, so for feeds, search results, or large datasets 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, since each is platform-only. Isolate platform trees in .ios.tsx or .android.tsx files under components/, never inside app/ route files, or guard with Platform.OS.

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

Use the drop-in replacement imported from @expo/ui/community/bottom-sheet, which matches the @gorhom/bottom-sheet API so the swap is mostly the import path. Other replacements exist for datetimepicker, picker, slider, pager-view, menu, and segmented-control.

Does @expo/ui TextInput work like React Native TextInput?▼

No, @expo/ui TextInput takes an ObservableState object from useNativeState for its value and selection props, not a plain string. This enables synchronous UI-thread updates via worklets and requires react-native-worklets to avoid flickering.

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
openridesphopenridesph
1

expo-deployment

Automate Expo app builds, signing, and submissions across iOS, Android, and web via EAS CLI.

Official
Intermediate
aranlucasaranlucas

building-native-ui

Build and refactor Expo Router UIs with native navigation, controls, and animations.

Community
Intermediate
trungenglishtrungenglish
1

expo-ui

Build native iOS and Android UI in React using @expo/ui SwiftUI and Jetpack Compose components.

Community
Intermediate