# React Native Best Practices

Provides React Native performance optimization guidelines for FPS, TTI, bundle size...

- Repository: https://github.com/callstackincubator/agent-skills (1694 stars)
- Category: Design
- License: MIT
- Last updated: 2026-10-08
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add callstackincubator/agent-skills --skill react-native-best-practices -g -a claude-code -y`
Codex: `npx skills add callstackincubator/agent-skills --skill react-native-best-practices -g -a codex -y`
Cursor: `npx skills add callstackincubator/agent-skills --skill react-native-best-practices -g -a cursor -y`
Gemini CLI: `npx skills add callstackincubator/agent-skills --skill react-native-best-practices -g -a gemini-cli -y`
Claude Code plugin marketplace: `/plugin marketplace add callstackincubator/agent-skills`

## 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.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# 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".

## 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 remote chunk loading as first-party artifact delivery only. Prefer app-bundled chunks or signed CI release manifests; hosted 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-*` |

Impact labels are triage hints: CRITICAL first, HIGH next, MEDIUM when evidence points there.

## Quick Reference

### Optimization Workflow

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

The rest: https://github.com/callstackincubator/agent-skills/blob/HEAD/skills/react-native-best-practices/SKILL.md