ahmad-ubaidillah/react-native-best-practices

React Native & Expo Best Practices

Goal: Build "Write Once, Run Everywhere" mobile apps that feel 100% native.

1. 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).

2. 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).

3. 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.

4. 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.

5. 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?