--- name: building-native-ui description: Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs. risk: critical source: https://github.com/expo/skills/tree/main/plugins/expo/skills/building-native-ui source_repo: expo/skills source_type: official date_added: 2026-07-01 license: MIT license_source: https://github.com/expo/skills/blob/main/LICENSE --- # Expo UI Guidelines ## When to Use Use this skill when you need complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs. ## 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) visual-effects.md Blur (expo-blur) and liquid glass (expo-glass-effect) webgpu-three.md 3D graphics, games, GPU visualizations with WebGPU and Three.js zoom-transitions.md Apple Zoom: fluid zoom transitions with Link.AppleZoom (iOS 18+) ``` ## Running the App **Check required native modules before choosing Expo Go or a development build.** 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: - Many Expo packages; check each module’s Expo Go and SDK compatibility. - Expo Router navigation - Most UI libraries (reanimated, gesture handler, etc.) - Supported navigation and development features; remote push and app-specific native configuration may require a development build. **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-image` with `source="sf:name"` for SF Symbols, or version-compatible `expo-symbols`; provide Android/web icon fallbacks - `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 - `Color` from `expo-router` for native semantic colors, not raw `PlatformColor` (type-safe, auto-adapts to light/dark) - In SDK 56+, never import from `@react-navigation/*` directly — use `expo-router/react-navigation` instead (covers `@react-navigation/native`, `/core`, `/elements`, `/routers`) ## Responsiveness - Use ScrollView for bounded scrollable content and FlatList/SectionList for large collections; avoid nesting virtualized lists in same-direction ScrollViews. - 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 - When adding a `ScrollView` to the page it should almost always be the first component inside the route component - 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 ## Colors Use the `Color` API from `expo-router` for native semantic colors. It is a type-safe wrapper over `PlatformColor` that exposes iOS UIKit colors through `Color.ios.*` and Android Material 3 colors through `Color.android.material.*` (static) or `Color.android.dynamic.*` (adapts to the user's wallpaper on Android 12+). These resolve on-device and automatically adapt to light/dark mode and accessibility settings, so you no longer maintain separate light/dark hex tables or a `colors.web.ts` file. `Color` is platform-specific, so wrap each value in `Platform.select` with a `default` hex fallback for web. Centralize the palette in `theme/colors.ts` and import `colors` everywhere: ```tsx // theme/colors.ts import { Platform } from "react-native"; import { Color } from "expo-router"; export const colors = { label: Platform.select({ ios: Color.ios.label, android: Color.android.dynamic.onSurface, default: "#000000", })!, secondaryLabel: Platform.select({ ios: Color.ios.secondaryLabel, android: Color.android.dynamic.onSurfaceVariant, default: "#3c3c43", })!, separator: Platform.select({ ios: Color.ios.separator, android: Color.android.dynamic.outlineVariant, default: "#c6c6c8", })!, systemBackground: Platform.select({ ios: Color.ios.systemBackground, android: Color.android.dynamic.surface, default: "#ffffff", })!, systemBlue: Platform.select({ ios: Color.ios.systemBlue, android: Color.android.dynamic.primary, default: "#007aff", })!, }; ``` ```tsx import { colors } from "@/theme/colors"; Title ; ``` - iOS re-resolves these colors automatically when the system theme changes. On Android, call `useColorScheme()` inside any component that renders them so it re-renders when the theme flips (required when React Compiler memoizes the component). - Don't pass `Color` / `PlatformColor` values into Reanimated styles — use static colors there (see `references/animations.md`). - `Platform.select({...})!` returns `string | OpaqueColorValue`. Most React Native style props accept `ColorValue` (`string | OpaqueColorValue`) so this works fine. But some third-party props only accept `string` (e.g. `tintColor` on `expo-image`). A TypeScript cast does not convert an opaque native color to a string; use a supported ColorValue prop or resolve a concrete color for string-only APIs. ## 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 } from "expo-router/unstable-native-tabs"; import { ThemeProvider, DarkTheme, DefaultTheme } from "expo-router/react-navigation"; import { useColorScheme } from "react-native"; export default function Layout() { const colorScheme = useColorScheme(); return ( Items ); } ``` 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 { colors } from "@/theme/colors"; export default function Layout({ segment }) { const screen = segment.match(/\((.*)\)/)?.[1]!; const titles: Record = { index: "Items", search: "Search" }; return ( ); } ``` ## Limitations - Use this skill only when the task clearly matches its upstream product or API scope. - Verify commands, API behavior, pricing, quotas, credentials, and deployment effects against current official documentation before making changes. - Do not treat generated examples as a substitute for environment-specific tests, security review, or user approval for destructive or costly actions. ## Snapshot boundaries Examples mix SDK generations and abbreviated application scaffolding. Check installed Expo/Router/React Native versions, platform support and package types before copying; hooks belong inside components or custom hooks, and omitted styles/data/components must be supplied. Respect reduced motion and transparency preferences, label interactive controls, test VoiceOver/TalkBack and keyboard focus. Obtain camera/microphone/library access at the user action and explain purpose. No module installation, native generation or publication is implicit. --- Source attribution: expo/skills contributors, via Agentic Awesome Skills Original project: https://github.com/expo/skills License: MIT + CC-BY-4.0 License information: https://creativecommons.org/licenses/by/4.0/ Original upstream instructions; downloaded from Mega AI Hub. ## Upstream license notice The MIT License (MIT) Copyright (c) 2025-present 650 Industries, Inc. (aka Expo) Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. # Mega AI Hub resource metadata Creator / publisher: expo/skills contributors, via Agentic Awesome Skills Original project: https://github.com/expo/skills Attribution basis: Recorded upstream repository Fields of work: Design, Development & Engineering Roles: UI Designer, Mobile Developer Specialties: Specialty not specified Tools: Tool not specified Country applicability: Country not specified Classification basis: Dave AI task classification from package title, description, and declared metadata Instruction SHA-256: df71199e86b7d4492da9d2f9cdc6fc1f9e198186f9dd01ae32705cdfe09633d7 Metadata reviewed: 2026-10-27 This metadata supersedes earlier Mega AI Hub catalog attribution. Original instruction and supporting files are preserved.