react-native

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 Explore agent
• Build/deployment review: Use Task agent
• Code review: Delegate to code-reviewer agent

If the react-patterns skill is available, delegate React component patterns and hooks to it. If the tanstack-query skill is available, delegate data fetching and caching to it. If the zustand skill is available, delegate client-side state management to it. If the vitest-testing skill is available, delegate unit and component testing patterns to it. If the tailwind skill is available, delegate Tailwind CSS utility patterns to it (NativeWind uses Tailwind CSS syntax). If the accessibility skill 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