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

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 outside items
• list-performance-item-types - Use item types for heterogeneous lists

Animation (HIGH)

• animation-gpu-properties - Animate only transform and opacity
• animation-derived-value - Use useDerivedValue for computed animations
• animation-gesture-detector-press - Use Gesture.Tap for press animations

Navigation (HIGH)

• navigation-native-navigators - Use native stack/tabs over JS navigators

UI Patterns (HIGH)

• ui-expo-image - Use expo-image for all images
• ui-image-gallery - Use Galeria for lightboxes
• ui-pressable - Use Pressable over TouchableOpacity
• ui-safe-area-scroll - Use contentInsetAdjustmentBehavior
• ui-scrollview-content-inset - Use contentInset for dynamic spacing
• ui-menus - Use native context menus (zeego)
• ui-native-modals - Use native modals over JS bottom sheets
• ui-measure-views - Use onLayout, not measure()
• ui-styling - Use StyleSheet.create, gap, borderCurve

State Management (MEDIUM)

• react-state-minimize - Derive values, minimize state
• react-state-dispatcher - Use dispatch updaters
• react-state-fallback - Use fallback pattern for reactive defaults
• state-ground-truth - State represents truth, derive visuals

React Compiler (MEDIUM)

• react-compiler-destructure-functions - Destructure functions early
• react-compiler-reanimated-shared-values - Use .get()/.set() not .value

Monorepo (MEDIUM)

• monorepo-native-deps-in-app - Install native deps in app package
• monorepo-single-dependency-versions - Single versions across packages

Configuration (LOW)

• fonts-config-plugin - Load fonts at build time
• imports-design-system-folder - Re-export from design system
• js-hoist-intl - Hoist Intl formatter creation

Quick Reference: Profiling & Measurement (Callstack)

FPS & Re-renders (CRITICAL)

# Open React Native DevTools
# Press 'j' in Metro, or shake device → "Open DevTools"

• js-profile-react.md - React DevTools profiling
• js-measure-fps.md - FPS monitoring
• js-react-compiler.md - Automatic memoization
• js-atomic-state.md - Jotai/Zustand patterns
• js-concurrent-react.md - useDeferredValue, useTransition

Bundle Size (CRITICAL)

npx react-native bundle \
  --entry-file index.js \
  --bundle-output output.js \
  --platform ios \
  --sourcemap-output output.js.map \
  --dev false --minify true

npx source-map-explorer output.js --no-border-checks

• bundle-barrel-exports.md - Avoid barrel imports
• bundle-analyze-js.md - JS bundle visualization
• bundle-tree-shaking.md - Dead code elimination
• bundle-r8-android.md - Android code shrinking
• bundle-hermes-mmap.md - Disable bundle compression

TTI Optimization (HIGH)

• native-measure-tti.md - TTI measurement setup
• bundle-hermes-mmap.md - Enable Hermes mmap
• Defer non-critical work with InteractionManager

Native Performance (HIGH)

• iOS: Xcode Instruments → Time Profiler
• Android: Android Studio → CPU Profiler
• native-turbo-modules.md - Building fast native modules
• native-threading-model.md - Turbo Module threads
• native-profiling.md - Platform profiling guides

Memory Management (MEDIUM)

• js-memory-leaks.md - JS memory leak hunting
• native-memory-leaks.md - Native memory leaks
• native-memory-patterns.md - C++/Swift/Kotlin memory

Animations (MEDIUM)

• js-animations-reanimated.md - Reanimated worklets

Problem → Solution Mapping

File Structure

react-native/
├── SKILL.md          # This file
├── AGENTS.md         # Full 74KB compiled Vercel guide
├── rules/            # 36 individual Vercel rule files
│   ├── list-performance-*.md
│   ├── animation-*.md
│   ├── ui-*.md
│   └── ...
└── references/       # 27 Callstack reference files
    ├── js-*.md
    ├── native-*.md
    ├── bundle-*.md
    └── images/

Attribution

Combined from:

• "The Ultimate Guide to React Native Optimization" by Callstack
• React Native Skills by Vercel