react-native

# React Native Complete Guide

The ultimate React Native optimization guide combining:
- **Callstack** - Profiling, measurement, and native optimization (27 references)
- **Vercel** - Code patterns, UI, and best practices (36 rules)

## When to Apply

Reference these guidelines when:
- Debugging slow/janky UI or animations
- Optimizing list and scroll performance
- Investigating memory leaks (JS or native)
- Optimizing app startup time (TTI)
- Reducing bundle or app size
- Implementing animations with Reanimated
- Building UI with native components
- Working with React Compiler
- Structuring monorepo projects

## Priority-Ordered Guidelines

| Priority | Category | Impact | Source |
|----------|----------|--------|--------|
| 1 | Core Rendering | CRITICAL | Vercel |
| 2 | List Performance | CRITICAL | Both |
| 3 | FPS & Re-renders | CRITICAL | Callstack |
| 4 | Bundle Size | CRITICAL | Callstack |
| 5 | Animation | HIGH | Both |
| 6 | Navigation | HIGH | Vercel |
| 7 | TTI Optimization | HIGH | Callstack |
| 8 | UI Patterns | HIGH | Vercel |
| 9 | Native Performance | HIGH | Callstack |
| 10 | State Management | MEDIUM | Vercel |
| 11 | React Compiler | MEDIUM | Both |
| 12 | Memory Management | MEDIUM | Callstack |
| 13 | Monorepo | MEDIUM | Vercel |

---

## Quick Reference: Code Patterns (Vercel)

### Core Rendering (CRITICAL)
- `rendering-no-falsy-and` - Never use && with falsy values (crashes app)
- `rendering-text-in-text-component` - Wrap strings in Text components

### List Performance (CRITICAL)
- `list-performance-virtualize` - Use FlashList/LegendList for any list
- `list-performance-item-memo` - Memoize list item components
- `list-performance-callbacks` - Stabilize callback references
- `list-performance-inline-objects` - Avoid inline style objects
- `list-performance-function-references` - Extract functions outside render
- `list-performance-images` - Use compressed, appropriately-sized images
- `list-performance-item-expensive` - Move expensive work o