What does this skill do, and when should you use it?
This skill provides optimization guidance for React Native JavaScript/React code, native iOS and Android code, and bundling. It covers FPS, re-renders, startup time, bundle size, memory leaks, native modules, and animation jank. Its central workflow is “Measure → Optimize → Re-measure → Validate,” with recommendations ordered by impact. The material is based on Callstack’s “The Ultimate Guide to React Native Optimization.”
It directs an assistant to capture baseline metrics, then use tools such as agent-device React DevTools, React Native DevTools, Xcode Instruments, Android Studio CPU Profiler, react-native-performance, React Native bundle, and source-map-explorer. It then maps evidence to targeted changes involving list virtualization, state granularity, React Compiler, Hermes, Turbo Modules, R8, or code splitting, followed by repeat measurement and validation.
- A React Native developer is investigating dropped frames, janky animations, or unstable FPS and needs profiling of the actual interaction.
- A team sees excessive component re-renders and needs to inspect slow components, commit timelines, or cascading updates before choosing a fix.
- An app has slow cold startup and needs TTI measurement plus checks for navigation, Hermes mmap, and expensive screen initialization.
- A mobile app is too large and needs JavaScript bundle analysis, dependency review, tree shaking, or Android native shrinking.
- A developer is building Turbo Modules or other native code and needs guidance on threading, synchronous calls, memory, and cross-platform performance.
How do you install this skill?
- Before running npx, Gradle, xcodebuild, bundle-phobia, or remote chunk loading, verify versions, provenance, network access, and project configuration; example performance numbers are not universal guarantees.
- Remote JavaScript chunks create a high-risk code-execution boundary and require verified signed manifests, fixed origins, release binding, and fail-closed behavior.
- Not all referenced files were provided in the static material; validate important recommendations against the project's React Native, Expo, Hermes, and Re.Pack versions.
- Shell / CLI
- Local filesystem
Node.jsReact Nativeagent-device
Use the standalone installation command documented in the README: $skill-installer install react-native-best-practices from callstackincubator/agent-skills. Alternatively, clone the repository and copy skills/react-native-best-practices/ into a project-level .codex/skills/ or user-level ~/.codex/skills/ directory. Restart Codex afterward.
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/callstackincubator/agent-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/skills/react-native-best-practices" ~/.claude/skills/
rm -rf "$tmp"Generated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- Profile this React Native list with React DevTools first, then apply an evidence-based fix and validate the FPS improvement.
Mention $react-native-best-practices in a client that supports skill invocation, or ask: “Profile this React Native list with React DevTools first, then apply an evidence-based fix and validate the FPS improvement.” If agent-device is unavailable, use React Native DevTools from Metro or the Dev Menu as described by the skill.
What are this skill's strengths and limitations?
- Covers JavaScript, native performance, and bundling in one workflow.
- Emphasizes measurement before changes and includes concrete profiling, bundle-analysis, and validation commands.
- Provides priority-ordered references and problem-to-reference routing.
- Addresses practical topics including Hermes, FlashList, Turbo Modules, React Compiler, R8, and memory management.
- It is an instructional skill, not an automatic performance-fixing tool.
- Effective use requires a React Native project and relevant CLI or native profiling tools.
- The supplied source provides no test suite or cross-platform benchmark results.
- Several recommendations depend on checking the versions of React Native, Expo, FlashList, and related libraries.
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| React Native Performance Guide this page | 60 · Recommended | ★ 1.7k | 19d ago | MIT |
| React Native Performance Playbook | 51 · Use with care | ★ 1.7k | 19d ago | MIT |
| Expo Native UI Builder | 59 · Recommended | ★ 2.9k | 22d ago | MIT |
| Expo Brownfield Integrator | 58 · Recommended | ★ 2.9k | 22d ago | MIT |
| Expo App Structure Guide | 57 · Use with care | ★ 2.9k | 22d ago | MIT |
How did FollowSkills review this skill?
The skill explicitly requires measurement before changes, dependency review, avoiding direct remote-script execution, and strong safeguards for remote code loading such as HTTPS, signed manifests, allowlists, and fail-closed behavior. It requests no credentials or sensitive data. However, most commands are not version-pinned, and confirmation, rollback, and complete data-flow boundaries are not specified, so 7 points are deducted.
The main file, POWER.md, and reference index are broadly consistent and provide a measure-optimize-remeasure-validate cycle, version conditions, and manual fallbacks. However, there are no committed tests covering key paths, and tool availability and abnormal-input diagnostics remain uncertain. The static cap limits this to 9, with deductions for reproduction and failure feedback.
The audience, trigger scenarios, problem-to-reference routing, and applicability across Hermes, Expo, and native projects are reasonably clear. Non-fit boundaries, input/output contracts, Chinese-language support, and mainland-China network reachability are not documented; some workflows depend on local device tooling and overseas services, so 4 points are deducted.
The material is well organized across JavaScript, Native, and Bundling, with indexes, commands, examples, pitfalls, MIT licensing, and Codex metadata. Version policy, changelog, maintenance ownership, and update path are not clearly defined within the skill, and version applicability remains incomplete, so 5 points are deducted.
It covers FPS, TTI, bundle size, memory, native performance, and animations, with problem routing and directly usable command examples. Outcomes still depend on project configuration, device tooling, and human analysis, with no verified representative outputs. The static cap is 7, with deductions for limited correctness and benefit evidence.
The files provide concrete commands, measurement metrics, before/after examples, reference paths, and Callstack attribution, giving some auditability. This review did not execute anything; committed test suites, CI coverage, and independent cross-source corroboration are absent. The static cap limits this to 5, with deductions for insufficient independent reproduction evidence.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →