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?