React Native

# React Native Development Rules

Component Performance - `FlatList` for any list over 10 items — `ScrollView` with `map` loads everything in memory, FlatList virtualizes - `keyExtractor` must return stable unique strings — using index causes bugs on reorder and deletion - `React.memo` prevents re-renders when props unchanged — wrap pure display components - `useCallback` for functions passed to child components — new function reference triggers child re-render - Avoid inline styles in render — creates new object every render, extract to `StyleSheet.create`

State Management - `useState` is fine for component-local state — don't add Redux/Zustand for a toggle - Lift state to lowest common ancestor only — higher causes unnecessary re-renders - `useMemo` for expensive computations — but don't overuse, caching has overhead - Context re-renders all consumers on any change — split contexts by update frequency - Avoid storing derived data in state — compute during render from source state

Navigation - React Navigation is the standard — Expo Router for file-based routing in Expo projects - Stack screens stay mounted by default — clean up subscriptions and timers in `useEffect` cleanup - Pass serializable params only — functions and complex objects break deep linking and state persistence - `useFocusEffect` for screen-specific side effects — runs on focus, not just mount - `navigation.reset` for auth flows — clears back stack, prevents returning to login after sign-in

Styling - `StyleSheet.create` outside component body — creates styles once, not every render - Flexbox defaults differ from web — `flexDirection: 'column'`, no `display: flex` needed - Dimensions in density-independent pixels — don't use pixel values from design tools directly - `Platform.select` for platform-specific styles — cleaner than conditionals in style objects - No CSS inheritance — text styles don't cascade, each Text needs explicit styling

Native Modules - Expo modules cover most needs — avoid ejecting for common features like camera, location, notifications - `expo-dev-client` enables native modules without full eject — best of both worlds - React Native New Architecture (Fabric, TurboModules) is opt-in — check library compatibility before enabling - Native crashes don't show in JS debugger — check Xcode/Android Studio logs

Performance Debugging - Hermes engine should be enabled — significantly faster startup and lower memory - `InteractionManager.runAfterInteractions` defers heavy work — keeps animations smooth - `useNativeDriver: true` for animations — runs on UI thread, not JS thread - `console.log` in production kills performance — remove or use `__DEV__` guard - Flipper for debugging — network, layout, performance profiling

Images - Use `resizeMode` appropriately — `cover` crops, `contain` letterboxes, `stretch` distorts - Prefetch images for smooth UX: `Image.prefetch(url)` before displaying - Local images need explicit dimensions — remote images can use aspect ratio if one dimension set - SVGs via `react-native-svg` — better scaling than PNGs for icons - Cache remote images with `react-native-fast-image` — default Image has no persistent cache

Common Mistakes - `async` in `useEffect` directly — must define async function inside, then call it - Missing `key` warnings in lists — always use unique, stable keys - Assuming web React patterns work — no DOM, no CSS, different event system - Forgetting cleanup in `useEffect` — subscriptions, timers, listeners leak without cleanup return - Testing only on one platform — iOS and Android differ in behavior, test both regularly

Platform Differences - Android needs explicit `overflow: 'hidden'` for border radius clipping — iOS clips by default - Shadows: iOS uses `shadow*` props, Android uses `elevation` - StatusBar behavior differs — test visibility and color on both platforms - Back button is Android-only — handle with `BackHandler` or navigation listeners - Push notifications setup differs significantly — platform-specific configuration required

Build & Release - `npx react-native clean` for unexplained build failures — clears caches and derived data - iOS: `cd ios && pod install` after adding native dependencies — often forgotten step - Android: `cd android && ./gradlew clean` for stubborn build issues - EAS Build (Expo) simplifies CI/CD — handles signing, versioning, submission - Test release builds locally before submitting — development and production behavior differ