building-native-ui
Complete guide for building native Expo apps with routing, styling, components, and platform conventions.
- Covers Expo Router fundamentals, native tabs, stack navigation, modals, and form sheets with detailed route structure conventions
- Includes styling rules aligned with Apple Human Interface Guidelines: flexbox layouts, safe area handling, animations, shadows via CSS
boxShadow, and responsive design patterns - Documents library preferences (expo-image for SF Symbols, expo-audio, expo-video, expo-glass-effect) and anti-patterns to avoid (legacy modules, intrinsic HTML elements, StyleSheet over inline styles)
- Provides reference guides for animations, controls, search, storage, visual effects, WebGPU/3D graphics, and zoom transitions
- Emphasizes testing in Expo Go first before creating custom builds, with clear guidance on when native code is actually required
Expo UI Guidelines
References
Consult these resources as needed:
references/
animations.md Reanimated: entering, exiting, layout, scroll-driven, gestures
controls.md Native iOS: Switch, Slider, SegmentedControl, DateTimePicker, Picker
form-sheet.md Form sheets in expo-router: configuration, footers and background interaction.
gradients.md CSS gradients via experimental_backgroundImage (New Arch only)
icons.md SF Symbols via expo-image (sf: source), names, animations, weights
media.md Camera, audio, video, and file saving
route-structure.md Route conventions, dynamic routes, groups, folder organization
search.md Search bar with headers, useSearch hook, filtering patterns
storage.md SQLite, AsyncStorage, SecureStore
tabs.md NativeTabs, migration from JS tabs, iOS 26 features
toolbar-and-headers.md Stack headers and toolbar buttons, menus, search (iOS only)
More from expo/skills
native-data-fetching
Use when implementing or debugging ANY network request, API call, or data fetching. Covers fetch API, React Query, SWR, error handling, caching, offline support, and Expo Router data loaders (`useLoaderData`).
30.6Kexpo-tailwind-setup
Set up Tailwind CSS v4 in Expo with react-native-css and NativeWind v5 for universal styling
26.9Kupgrading-expo
Guidelines for upgrading Expo SDK versions and fixing dependency issues
26.6Kexpo-cicd-workflows
Helps understand and write EAS workflow YAML files for Expo projects. Use this skill when the user asks about CI/CD or workflows in an Expo or EAS context, mentions .eas/workflows/, or wants help with EAS build pipelines or deployment automation.
25.4Kexpo-deployment
Deploying Expo apps to iOS App Store, Android Play Store, web hosting, and API routes
24.9Kexpo-dev-client
Build and distribute Expo development clients locally or via TestFlight
24.8K