React Native with Expo
Overview
Expo is an open-source framework for building universal native apps with React Native from a single TypeScript codebase. It provides file-based routing (Expo Router), cloud build services (EAS Build/Submit/Update), and a rich set of native modules for device APIs.
When to use: Mobile apps targeting iOS and Android, universal apps with web support, projects needing OTA updates, apps requiring native device APIs (camera, notifications, haptics), teams preferring managed infrastructure over bare React Native.
When NOT to use: Apps requiring heavy custom native code incompatible with Expo Modules API, brownfield integration into existing native apps, apps with native-only CI/CD requirements.
Quick Reference
| Pattern | API | Key Points |
|---|---|---|
| Stack navigation | <Stack> from expo-router | File-based, _layout.tsx defines navigator |
| Tab navigation | <Tabs> from expo-router | (tabs) directory group with _layout.tsx |
| Drawer navigation | <Drawer> from expo-router/drawer | Requires @react-navigation/drawer |
| Typed routes | href with /(group)/route | Enable typed-routes in app.json |
| Dev build | expo-dev-client | Custom native code + dev tools |
| EAS Build | eas build --profile production | Cloud builds for app stores |
| EAS Submit | eas submit -p ios / -p android | Automated store submission |
| OTA Update | eas update --branch production | JS-only updates, no rebuild needed |
| Native module | Expo Modules API | Swift/Kotlin with expo-module.config.json |
| Platform code | Platform.select() / .ios.tsx | Per-platform logic or entire files |
| Styled lists | FlatList / FlashList | Virtualized, keyExtractor required |
| Camera | expo-camera | Permissions via useCameraPermissions() |
| Notifications | expo-notifications | Push tokens via getExpoPushTokenAsync() |
| Haptics | expo-haptics | impactAsync, notificationAsync |
| Tailwind (RN) | NativeWind v4 | className prop, Tailwind CSS in RN |
Common Mistakes
| Mistake | Correct Pattern |
|---|---|
Using react-navigation directly instead of Expo Router | Expo Router wraps React Navigation with file-based routing |
Forgetting _layout.tsx in route directories | Every directory with routes needs a layout file |
Using expo start for custom native code | Use expo start --dev-client with expo-dev-client |
Running eas update after native dependency changes | Native changes require eas build, OTA is JS-only |
Hardcoding platform checks with if | Use Platform.select() or platform-specific file extensions |
| Not requesting permissions before accessing device APIs | Always check/request permissions before camera, notifications |
Using ScrollView for long lists | Use FlatList or FlashList for virtualized rendering |
| Inline styles in render functions | Define styles with StyleSheet.create() outside component |
Missing keyExtractor on FlatList | Always provide keyExtractor for stable list rendering |
Importing from react-native for Expo-provided APIs | Prefer expo-* packages over react-native equivalents |
Delegation
- Pattern discovery: Use
Exploreagent - Build/deployment review: Use
Taskagent - Code review: Delegate to
code-revieweragent
If thereact-patternsskill is available, delegate React component patterns and hooks to it. If thetanstack-queryskill is available, delegate data fetching and caching to it. If thezustandskill is available, delegate client-side state management to it. If thevitest-testingskill is available, delegate unit and component testing patterns to it. If thetailwindskill is available, delegate Tailwind CSS utility patterns to it (NativeWind uses Tailwind CSS syntax). If theaccessibilityskill is available, delegate mobile accessibility patterns to it.
References
- Core patterns: StyleSheet, FlatList, Platform-specific code
- Expo Router navigation: stack, tabs, drawer, typed routes
- EAS Build, Submit, and Update workflows
- Dev client and native modules with Expo Modules API
- Device APIs: camera, notifications, haptics
- NativeWind Tailwind CSS integration
- App configuration and environment setup
- Performance optimization patterns