React Native
Engineering guide for React Native — best practices, pitfalls, performance, state management, native modules
React Native
Engineering knowledge for building production-grade React Native apps. Skips React/JSX basics in favor of what determines project quality: bridge cost, list virtualization, navigation lifecycle, native module authoring, and the New Architecture (Fabric + TurboModules).
Topics
Best Practices
Project structure, navigation, styling, platform-specific code, TypeScript setup
Pitfalls
Bridge serialization cost, FlatList misuse, gesture conflicts, Hermes/JSC gotchas
Native Modules
TurboModules, Fabric components, Codegen, platform channels
Performance
Re-render scope, list virtualization, image cache, startup time, JS thread vs UI thread
State Management
Redux Toolkit / Zustand / Jotai / TanStack Query selection and patterns
Debugging
React DevTools, Hermes debugger, native logs, crash reporting
Engineering Layers
React Native App
├── Presentation Screen tree / Theme / Navigation
│ ├── Screen Screen-level components, orchestrate business flow
│ ├── Component Reusable UI components, no business dependencies
│ └── Layout SafeArea, responsive layout, keyboard handling
├── State State management (Redux / Zustand / Jotai / TanStack Query)
│ ├── Store Cross-screen application state
│ ├── Query Server state cache (TanStack Query / SWR / RTK Query)
│ └── Repository Data access abstraction
├── Data Data sources
│ ├── Remote REST / GraphQL / WebSocket
│ ├── Local MMKV / SQLite / AsyncStorage
│ └── Cache Memory cache, query cache
└── Native Platform integration
├── TurboModule Sync/async typed native methods (New Architecture)
├── Fabric Native components rendered by the new renderer
└── Codegen JS↔native binding generation from TS specsRecommended Learning Path
| Stage | Focus | Key Outcome |
|---|---|---|
| Post-basics | Components, Hooks, navigation | Readable, reusable screens |
| Intermediate | State management, querying, persistence | Decoupled UI and data |
| Performance | Memoization, list virtualization, image cache | Stable 60 fps on mid-tier Android |
| Native | Native modules, gesture handler, reanimated | Bypass the bridge for animations |
| Architecture | New Architecture (Fabric + TurboModules) | Modern interop, Codegen-driven |
Flutter or React Native?
If your team already runs a React/web stack and wants code reuse, React Native lowers the entry cost. If you need pixel-identical UI across platforms and tight rendering control, Flutter has the edge. The cross-platform comparison covers this in depth.
Why Focus on Practice Over Syntax
The React docs and React Native website already cover components and APIs. What actually determines whether a React Native project ships smoothly is:
- Bridge cost awareness — every JS↔native call serializes. Animations and gestures must live on the UI thread.
- List virtualization correctness — wrong
keyExtractor/getItemLayout/removeClippedSubviewssettings tank scroll performance. - Re-render scope — Context misuse causes whole-tree re-renders; selectors and
memomatter more than in web React. - Platform behavior differences — keyboard avoidance, status bar, safe areas, back button — each has Android/iOS quirks.
These pages consolidate the production lessons usually learned only by shipping and debugging real apps.