Generate Native Expo UI Code and Guidelines
Guidelines for building native-feeling Expo Router apps - navigation, controls, animations, styling, and when a custom build is actually needed.
Why it matters
Build native-feeling Expo Router applications with confidence. This asset provides comprehensive guidelines and code generation for modern UI patterns, ensuring a consistent and high-quality user experience across platforms.
Outcomes
What it gets done
Generate code for navigation, controls, and effects.
Provide guidance on platform-specific UI decisions.
Ensure adherence to modern Expo UI and code style best practices.
Assist in determining when Expo Go is sufficient versus custom builds.
Install
Add it to your toolbox
Run in your project directory:
curl -fsSL https://spark.entire.vc/get/ag-building-native-ui | bash Overview
Expo UI Guidelines
Guidelines for building native-feeling Expo Router applications - correct library choices (expo-audio/expo-video over expo-av, expo-image SF Symbols, safe-area-context), route structure conventions, Apple HIG-aligned styling, native navigation patterns, and a clear rule for when Expo Go suffices versus when a custom native build is actually required. Use it when building navigation, controls, animations, or platform-specific UI in an Expo Router app, or when deciding whether Expo Go is enough versus needing npx expo run or eas build. Custom builds are only needed for local native modules, Apple extension targets, or unsupported third-party native modules.
What it does
Expo UI Guidelines gives an agent opinionated rules for building a native-feeling Expo Router application: which library to use for a given need, how to structure routes, how to style following Apple's Human Interface Guidelines, and - critically - whether Expo Go is sufficient or a custom native build is actually required. It's backed by dedicated reference files for animations (Reanimated), native iOS controls, form sheets, gradients, SF Symbols icons, media (camera/audio/video), route structure, search, storage, tabs, toolbars/headers, visual effects (blur, liquid glass), WebGPU/Three.js, and Apple Zoom transitions.
When to use - and when NOT to
Use it when building a native-feeling Expo Router app and deciding on navigation, controls, effects, or platform-specific UI, or specifically when deciding whether Expo Go covers the need or a custom build is required. The rule is to always try Expo Go first (npx expo start, scan the QR code) before running npx expo run:ios/android or eas build - custom builds are only actually needed for local Expo modules with custom native code, Apple targets (widgets, app clips, extensions), third-party native modules not in Expo Go, or native configuration that can't be expressed in app.json. Nearly everything else - all expo-* packages, Expo Router navigation, Reanimated, gesture handler, push notifications, deep links - works in Expo Go without added complexity.
Inputs and outputs
Concrete library preferences replace deprecated or discouraged choices: expo-audio/expo-video instead of expo-av, expo-image with source="sf:name" for SF Symbols instead of expo-symbols or vector-icon libraries, react-native-safe-area-context instead of SafeAreaView, process.env.EXPO_OS instead of Platform.OS, React.use instead of React.useContext, and never the React Native modules already removed (Picker, WebView, AsyncStorage). Routing rules require routes to live only in app/ (never co-locating components/utils there), a route matching /, and removing old route files after restructuring. Styling rules follow Apple HIG: flex gap over margin/padding, contentInsetAdjustmentBehavior="automatic" on ScrollView/FlatList/SectionList instead of SafeAreaView, useWindowDimensions over Dimensions.get(), CSS boxShadow instead of legacy shadow/elevation props, { borderCurve: 'continuous' } for rounded corners, and no CSS/Tailwind support - inline styles only. Navigation uses <Link> from expo-router (with <Link.Preview> and context menus for iOS conventions), _layout.tsx files for stacks, and Stack.Screen options for page titles.
Integrations
The reference files map directly onto specific native APIs and Expo packages - expo-blur/expo-glass-effect for visual effects, expo-haptics for iOS-conditional haptic feedback, @bacons/apple-targets for Apple extension targets, and WebGPU/Three.js for 3D graphics - so the agent consults the matching reference file rather than guessing at API shape.
Who it's for
Developers building Expo Router apps who want native-feeling iOS/Android UI without unnecessary custom native builds, following current (not deprecated) Expo library choices and Apple's Human Interface Guidelines by default.
FAQ
Common questions
Discussion
Questions & comments · 0
Sign In Sign in to leave a comment.