Agent skill · software engineering · aiskillstore
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.
Why this skill is useful
Provides specific performance optimization techniques and guidelines for React Native that the AI wouldn't reliably generate on its own.
What it needs
Requires expo, react-native installed locally. About 5k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
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 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. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/react-native-best-practices