--- name: building-native-ui description: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs. version: 1.0.0 license: MIT --- # Expo UI Guidelines ## References Consult these resources as needed: - ./references/route-structure.md -- Route file conventions, dynamic routes, query parameters, groups, and folder organization - ./references/tabs.md -- Native tab bar with NativeTabs, migration from JS tabs, iOS 26 features - ./references/icons.md -- SF Symbols with expo-symbols, common icon names, animations, and weights - ./references/controls.md -- Native iOS controls: Switch, Slider, SegmentedControl, DateTimePicker, Picker - ./references/visual-effects.md -- Blur effects with expo-blur and liquid glass with expo-glass-effect - ./references/animations.md -- Reanimated animations: entering, exiting, layout, scroll-driven, and gestures - ./references/search.md -- Search bar integration with headers, useSearch hook, and filtering patterns - ./references/gradients.md -- CSS gradients using experimental_backgroundImage (New Architecture only) - ./references/media.md -- Media handling for Expo Router including camera, audio, video, and file saving - ./references/storage.md -- Data storage patterns including SQLite, AsyncStorage, and SecureStore - ./references/webgpu-three.md -- 3D graphics, games, and GPU-powered visualizations with WebGPU and Three.js - ./references/toolbars-and-headers.md -- Customizing stack headers and toolbar with buttons, menus, and search bars in expo-router app. Available only on iOS. ## Running the App **CRITICAL: Always try Expo Go first before creating custom builds.** Most Expo apps work in Expo Go without any custom native code. Before running `npx expo run:ios` or `npx expo run:android`: 1. **Start with Expo Go**: Run `npx expo start` and scan the QR code with Expo Go 2. **Check if features work**: Test your app thoroughly in Expo Go 3. **Only create custom builds when required** - see below ### When Custom Builds Are Required You need `npx expo run:ios/android` or `eas build` ONLY when using: - **Local Expo modules** (custom native code in `modules/`) - **Apple targets** (widgets, app clips, extensions via `@bacons/apple-targets`) - **Third-party native modules** not included in Expo Go - **Custom native configuration** that can't be expressed in `app.json` ### When Expo Go Works Expo Go supports a huge range of features out of the box: - All `expo-*` packages (camera, location, notifications, etc.) - Expo Router navigation - Most UI libraries (reanimated, gesture handler, etc.) - Push notifications, deep links, and more **If you're unsure, try Expo Go first.** Creating custom builds adds complexity, slower iteration, and requires Xcode/Android Studio setup. ## Code Style - Be cautious of unterminated strings. Ensure nested backticks are escaped; never forget to escape quotes correctly. - Always use import statements at the top of the file. - Always use kebab-case for file names, e.g. `comment-card.tsx` - Always remove old route files when moving or restructuring navigation - Never use special characters in file names - Configure tsconfig.json with path aliases, and prefer aliases over relative imports for refactors. ## Routes See `./references/route-structure.md` for detailed route conventions. - Routes belong in the `app` directory. - Never co-locate components, types, or utilities in the app directory. This is an anti-pattern. - Ensure the app always has a route that matches "/", it may be inside a group route. ## Library Preferences - Never use modules removed from React Native such as Picker, WebView, SafeAreaView, or AsyncStorage - Never use legacy expo-permissions - `expo-audio` not `expo-av` - `expo-video` not `expo-av` - `expo-symbols` not `@expo/vector-icons` - `react-native-safe-area-context` not react-native SafeAreaView - `process.env.EXPO_OS` not `Platform.OS` - `React.use` not `React.useContext` - `expo-image` Image component instead of intrinsic element `img` - `expo-glass-effect` for liquid glass backdrops ## Responsiveness - Always wrap root component in a scroll view for responsiveness - Use `` instead of `` for smarter safe area insets - `contentInsetAdjustmentBehavior="automatic"` should be applied to FlatList and SectionList as well - Use flexbox instead of Dimensions API - ALWAYS prefer `useWindowDimensions` over `Dimensions.get()` to measure screen size ## Behavior - Use expo-haptics conditionally on iOS to make more delightful experiences - Use views with built-in haptics like `` from React Native and `@react-native-community/datetimepicker` - When a route belongs to a Stack, its first child should almost always be a ScrollView with `contentInsetAdjustmentBehavior="automatic"` set - Prefer `headerSearchBarOptions` in Stack.Screen options to add a search bar - Use the `` prop on text containing data that could be copied - Consider formatting large numbers like 1.4M or 38k - Never use intrinsic elements like 'img' or 'div' unless in a webview or Expo DOM component # Styling Follow Apple Human Interface Guidelines. ## General Styling Rules - Prefer flex gap over margin and padding styles - Prefer padding over margin where possible - Always account for safe area, either with stack headers, tabs, or ScrollView/FlatList `contentInsetAdjustmentBehavior="automatic"` - Ensure both top and bottom safe area insets are accounted for - Inline styles not StyleSheet.create unless reusing styles is faster - Add entering and exiting animations for state changes - Use `{ borderCurve: 'continuous' }` for rounded corners unless creating a capsule shape - ALWAYS use a navigation stack title instead of a custom text element on the page - When padding a ScrollView, use `contentContainerStyle` padding and gap instead of padding on the ScrollView itself (reduces clipping) - CSS and Tailwind are not supported - use inline styles ## Text Styling - Add the `selectable` prop to every `` element displaying important data or error messages - Counters should use `{ fontVariant: 'tabular-nums' }` for alignment ## Shadows Use CSS `boxShadow` style prop. NEVER use legacy React Native shadow or elevation styles. ```tsx ``` 'inset' shadows are supported. # Navigation ## Link Use `` from 'expo-router' for navigation between routes. ```tsx import { Link } from 'expo-router'; // Basic link // Wrapping custom components ... ``` Whenever possible, include a `` to follow iOS conventions. Add context menus and previews frequently to enhance navigation. ## Stack - ALWAYS use `_layout.tsx` files to define stacks - Use Stack from 'expo-router/stack' for native navigation stacks ### Page Title Set the page title in Stack.Screen options: ```tsx ``` ## Context Menus Add long press context menus to Link components: ```tsx import { Link } from "expo-router"; {}} /> {}} /> ; ``` ## Link Previews Use link previews frequently to enhance navigation: ```tsx ``` Link preview can be used with context menus. ## Modal Present a screen as a modal: ```tsx ``` Prefer this to building a custom modal component. ## Sheet Present a screen as a dynamic form sheet: ```tsx ``` - Using `contentStyle: { backgroundColor: "transparent" }` makes the background liquid glass on iOS 26+. ## Common route structure A standard app layout with tabs and stacks inside each tab: ``` app/ _layout.tsx — (index,search)/ _layout.tsx — index.tsx — Main list search.tsx — Search view ``` ```tsx // app/_layout.tsx import { NativeTabs, Icon, Label } from "expo-router/unstable-native-tabs"; import { Theme } from "../components/theme"; export default function Layout() { return ( ); } ``` Create a shared group route so both tabs can push common screens: ```tsx // app/(index,search)/_layout.tsx import { Stack } from "expo-router/stack"; import { PlatformColor } from "react-native"; export default function Layout({ segment }) { const screen = segment.match(/\((.*)\)/)?.[1]!; const titles: Record = { index: "Items", search: "Search" }; return ( ); } ```