Agent-Skills.md

Agent Skills: React Native Best Practices

Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

react-nativeexpoperformanceoptimizationprofiling
UncategorizedID: callstackincubator/agent-skills/react-native-best-practices

Repository

callstackincubator/agent-skills
callstackincubatorLicense: MIT
81140

Install this agent skill to your local

pnpm dlx add-skill https://github.com/callstackincubator/agent-skills/tree/HEAD/skills/react-native-best-practices

Skill Files

Browse the full folder contents for react-native-best-practices.

Download Skill

Loading file tree…

skills/react-native-best-practices/SKILL.md

Skill Metadata

Name
react-native-best-practices
Description
Provides React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations. Applies to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, or debugging jank and frame drops.

React Native Best Practices

Overview

Performance optimization guide for React Native applications, covering JavaScript/React, Native (iOS/Android), and bundling optimizations. Based on Callstack's "Ultimate Guide to React Native Optimization".

Skill Format

Each reference file follows a hybrid format for fast lookup and deep understanding:

  • Quick Pattern: Incorrect/Correct code snippets for immediate pattern matching
  • Quick Command: Shell commands for process/measurement skills
  • Quick Config: Configuration snippets for setup-focused skills
  • Quick Reference: Summary tables for conceptual skills
  • Deep Dive: Full context with When to Use, Prerequisites, Step-by-Step, Common Pitfalls

Impact ratings: CRITICAL (fix immediately), HIGH (significant improvement), MEDIUM (worthwhile optimization)

When to Apply

Reference these guidelines when:

  • Debugging slow/janky UI or animations
  • Investigating memory leaks (JS or native)
  • Optimizing app startup time (TTI)
  • Reducing bundle or app size
  • Writing native modules (Turbo Modules)
  • Profiling React Native performance
  • Reviewing React Native code for performance

Security Notes

  • Treat shell commands in these references as local developer operations. Review them before running, prefer version-pinned tooling, and avoid piping remote scripts directly to a shell.
  • Treat third-party libraries and plugins as dependencies that still require normal supply-chain controls: pin versions, verify provenance, and update through your standard review process.
  • Treat Re.Pack code splitting as first-party artifact delivery only. Remote chunks must come from trusted HTTPS origins you control and be pinned to the current app release.

Priority-Ordered Guidelines

| Priority | Category | Impact | Prefix | |----------|----------|--------|--------| | 1 | FPS & Re-renders | CRITICAL | js-* | | 2 | Bundle Size | CRITICAL | bundle-* | | 3 | TTI Optimization | HIGH | native-*, bundle-* | | 4 | Native Performance | HIGH | native-* | | 5 | Memory Management | MEDIUM-HIGH | js-*, native-* | | 6 | Animations | MEDIUM | js-* |

Quick Reference

Optimization Workflow

Follow this cycle for any performance issue: Measure → Optimize → Re-measure → Validate

  1. Measure: Capture baseline metrics before changes. For runtime issues, prefer commit timeline, re-render counts, slow components, heaviest-commit breakdown, and startup/TTI when available. Component tree depth or count are optional context, not substitutes.
  2. Optimize: Apply the targeted fix from the relevant reference
  3. Re-measure: Run the same measurement to get updated metrics
  4. Validate: Confirm improvement (e.g., FPS 45→60, TTI 3.2s→1.8s, bundle 2.1MB→1.6MB)

If metrics did not improve, revert and try the next suggested fix.

Review Guardrails

  • Check library versions before suggesting API-specific fixes. Example: FlashList v2 deprecates estimatedItemSize, so do not flag it as missing there.
  • Do not suggest useMemo or useCallback dependency changes unless behavior is demonstrably incorrect or profiling shows wasted work tied to that value.
  • Do not report stale closures speculatively. Show the stale read path, a repro, or profiler evidence before calling it out.
  • When profiling a flow, measure the target interaction itself. Do not treat component tree depth or component count as the main performance evidence.

Critical: FPS & Re-renders

Profile first:

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

Common fixes:

  • Replace ScrollView with FlatList/FlashList for lists
  • Use React Compiler for automatic memoization
  • Use atomic state (Jotai/Zustand) to reduce re-renders
  • Use useDeferredValue for expensive computations

Critical: Bundle Size

Analyze bundle:

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

Verify improvement after optimization:

# Record baseline size before changes
ls -lh output.js  # e.g., Before: 2.1 MB

# After applying fixes, re-bundle and compare
npx react-native bundle --entry-file index.js --bundle-output output.js \
  --platform ios --dev false --minify true
ls -lh output.js  # e.g., After: 1.6 MB  (24% reduction)

Common fixes:

  • Avoid barrel imports (import directly from source)
  • Remove unnecessary Intl polyfills only after checking Hermes API and method coverage
  • Enable tree shaking (Expo SDK 52+ or Re.Pack)
  • Enable R8 for Android native code shrinking

High: TTI Optimization

Measure TTI:

  • Use react-native-performance for markers
  • Only measure cold starts (exclude warm/hot/prewarm)

Common fixes:

  • Disable JS bundle compression on Android (enables Hermes mmap)
  • Use native navigation (react-native-screens)
  • Preload commonly-used expensive screens before navigating to them

High: Native Performance

Profile native:

  • iOS: Xcode Instruments → Time Profiler
  • Android: Android Studio → CPU Profiler

Common fixes:

  • Use background threads for heavy native work
  • Prefer async over sync Turbo Module methods
  • Use C++ for cross-platform performance-critical code

References

Full documentation with code examples in references/:

JavaScript/React (js-*)

| File | Impact | Description | |------|--------|-------------| | js-lists-flatlist-flashlist.md | CRITICAL | Replace ScrollView with virtualized lists | | js-profile-react.md | MEDIUM | React DevTools profiling | | js-measure-fps.md | HIGH | FPS monitoring and measurement | | js-memory-leaks.md | MEDIUM | JS memory leak hunting | | js-atomic-state.md | HIGH | Jotai/Zustand patterns | | js-concurrent-react.md | HIGH | useDeferredValue, useTransition | | js-react-compiler.md | HIGH | Automatic memoization | | js-animations-reanimated.md | MEDIUM | Reanimated worklets | | js-bottomsheet.md | HIGH | Bottom sheet optimization | | js-uncontrolled-components.md | HIGH | TextInput optimization |

Native (native-*)

| File | Impact | Description | |------|--------|-------------| | native-turbo-modules.md | HIGH | Building fast native modules | | native-sdks-over-polyfills.md | HIGH | Native vs JS libraries | | native-measure-tti.md | HIGH | TTI measurement setup | | native-threading-model.md | HIGH | Turbo Module threads | | native-profiling.md | MEDIUM | Xcode/Android Studio profiling | | native-platform-setup.md | MEDIUM | iOS/Android tooling guide | | native-view-flattening.md | MEDIUM | View hierarchy debugging | | native-memory-patterns.md | MEDIUM | C++/Swift/Kotlin memory | | native-memory-leaks.md | MEDIUM | Native memory leak hunting | | native-android-16kb-alignment.md | CRITICAL | Third-party library alignment for Google Play |

Bundling (bundle-*)

| File | Impact | Description | |------|--------|-------------| | bundle-barrel-exports.md | CRITICAL | Avoid barrel imports | | bundle-analyze-js.md | CRITICAL | JS bundle visualization | | bundle-tree-shaking.md | HIGH | Dead code elimination | | bundle-analyze-app.md | HIGH | App size analysis | | bundle-r8-android.md | HIGH | Android code shrinking | | bundle-hermes-mmap.md | HIGH | Disable bundle compression | | bundle-native-assets.md | HIGH | Asset catalog setup | | bundle-library-size.md | MEDIUM | Evaluate dependencies | | bundle-code-splitting.md | MEDIUM | Re.Pack code splitting |

Searching References

# Find patterns by keyword
grep -l "reanimated" references/
grep -l "flatlist" references/
grep -l "memory" references/
grep -l "profil" references/
grep -l "tti" references/
grep -l "bundle" references/

Problem → Skill Mapping

| Problem | Start With | |---------|------------| | App feels slow/janky | js-measure-fps.md → js-profile-react.md | | Too many re-renders | js-profile-react.md → js-react-compiler.md | | Slow startup (TTI) | native-measure-tti.md → bundle-analyze-js.md | | Large app size | bundle-analyze-app.md → bundle-r8-android.md | | Memory growing | js-memory-leaks.md or native-memory-leaks.md | | Animation drops frames | js-animations-reanimated.md | | Bottom sheet jank/re-renders | js-bottomsheet.md → js-animations-reanimated.md | | List scroll jank | js-lists-flatlist-flashlist.md | | TextInput lag | js-uncontrolled-components.md | | Native module slow | native-turbo-modules.md → native-threading-model.md | | Native library alignment issue | native-android-16kb-alignment.md |

Attribution

Based on "The Ultimate Guide to React Native Optimization" by Callstack.