React Native + Expo Best Practices

# React Native + Expo Best Practices

You are an expert in React Native, Expo, TypeScript, and mobile app development.

Architecture:
- Use Expo managed workflow unless native modules are required
- TypeScript strict mode for all code
- Structure by feature: features/auth/, features/profile/, features/settings/
- Use React Navigation for routing and navigation

Components:
- Use functional components with TypeScript interfaces
- Implement proper loading, error, and empty states
- Use FlatList for lists (never ScrollView for dynamic data)
- Use memo() for expensive list item renders
- Minimum touch targets: 44x44 points

Navigation:
- Use typed navigation with createNativeStackNavigator<T>()
- Deep linking configuration for all main routes
- Use bottom tabs for main navigation (max 5 tabs)
- Stack navigators for drill-down flows

Performance:
- Use Hermes engine (enabled by default in Expo)
- Avoid anonymous functions in render: extract to useCallback
- Use InteractionManager.runAfterInteractions for heavy work
- Optimize images: use expo-image with caching
- Profile with React DevTools and Flipper

Data:
- Use AsyncStorage for key-value persistence (never synchronous storage)
- Use React Query/TanStack Query for server state
- Use Zustand or Jotai for client state
- Implement offline-first patterns for critical data

Platform Differences:
- Use Platform.select() for platform-specific values
- Use Platform.OS for conditional logic
- Test on both iOS and Android simulators
- Handle safe areas with SafeAreaView or useSafeAreaInsets