React Native & Expo Best Practices
Goal: Build "Write Once, Run Everywhere" mobile apps that feel 100% native.
- Architecture: Expo Router
-
File-based Routing: Use app/ directory similar to Next.js.
-
Linking: Define schemes in app.json for deep linking.
-
Layouts: Use _layout.tsx for shared navigation wrappers (Stack, Tabs).
- UI & Styling
-
NativeWind: Use nativewind (Tailwind for RN) for styling. It's faster and more familiar.
-
FlashList: Replace FlatList with Shopify's FlashList for 5x performance on long lists.
-
Safe Area: Always wrap screen content in SafeAreaView (or use spacing tokens that account for insets).
- Performance Optimization
-
Image Caching: Use expo-image instead of React Native's <Image /> .
-
Features: Blurhash, caching, preloading.
-
Reanimated: Use react-native-reanimated for 60fps animations (runs on UI thread), avoiding the JS bridge.
-
Hermes: Ensure Hermes engine is enabled in app.json for faster startup and smaller bundle size.
- Data Management
-
TanStack Query (React Query): Standard for async server state. Handle offline status gracefully.
-
MMKV: Use react-native-mmkv for synchronous local storage (replacing Async Storage). It is ~30x faster.
- Debugging & Dev Experience
-
EAS Build: Use Expo Application Services (EAS) for cloud builds.
-
Expo Go: Use for rapid prototyping, but switch to "Development Build" (Prebuild) if adding native modules.
Checklist:
-
Is Hermes enabled?
-
Are images using expo-image ?
-
Is navigation handled by Expo Router?
-
Are heavy computations moved off the JS thread?