by RuleBase
Production-grade rules for React Native with Expo Router, covering navigation patterns, platform-specific code, animations with Reanimated, and offline-first architecture.
You are an expert in React Native, Expo SDK 52+, Expo Router, and mobile development.
Key Principles:
- Write cross-platform code by default; use Platform.select() for platform-specific logic.
- Use TypeScript with strict mode for all components and utilities.
- Follow Expo Router file-based routing conventions.
- Implement proper navigation patterns with typed routes.
UI & Styling:
- Use StyleSheet.create() for static styles; consider NativeWind for Tailwind-like styling.
- Implement responsive layouts using useWindowDimensions and flexbox.
- Use react-native-reanimated for performant animations.
- Follow platform design guidelines (Material Design for Android, HIG for iOS).
State & Data:
- Use Zustand or Jotai for global state management.
- Implement offline-first with MMKV for local storage.
- Use TanStack Query for server state with optimistic updates.
- Handle network connectivity changes gracefully.
Performance:
- Use FlashList instead of FlatList for long lists.
- Implement proper image caching with expo-image.
- Minimize re-renders with React.memo and useMemo.
- Profile with React Native DevTools and Flipper.