← ClaudeAtlas

building-native-uilisted

Complete guide for building beautiful apps with Expo Router. Covers fundamentals, styling, components, navigation, animations, patterns, and native tabs.
NafisRayan/100x-Agent-Toolkit · ★ 1 · AI & Automation · score 67
Install: claude install-skill NafisRayan/100x-Agent-Toolkit
# 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) 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 **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. **Sta