react-native-best-practices

Optimize React Native app performance across FPS, TTI, bundle size, and memory leaks.

4|Updated Jan 28, 2026

Search Tags:#bundle size #performance optimization #memory leaks #react-native #performance profiling

Ready to run

npx skills add https://github.com/hwj123hwj/custom-skills --skill react-native-best-practices-hwj123hwj

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/hwj123hwj/custom-skills/tree/main/skills/react-native-best-practices
Command: npx skills add https://github.com/hwj123hwj/custom-skills --skill react-native-best-practices-hwj123hwj

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) and assets (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines for optimizing React Native applications, addressing performance bottlenecks, memory leaks, and improving the overall efficiency of your React Native apps.

Core Features & Use Cases

Performance Optimization: Offers detailed guidelines for improving FPS, TTI, bundle size, memory leaks, re-renders, and animations in React Native apps.
Security Best Practices: Provides security guardrails for safe development practices, including code signing and secure data handling.
Use Cases: Applicable to tasks involving Hermes optimization, JS thread blocking, bridge overhead, FlashList, native modules, and debugging jank and frame drops.

Quick Start

Run the 'analyze_app_bundle_size' command to measure the size of your iOS or Android app bundle using Ruler or Xcode App Thinning.

Frequently Asked Questions about react-native-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I fix frame drops and jank in my React Native app?▼

To fix React Native jank and frame drops, debug JS thread blocking and bridge overhead, optimize animations, and reduce re-renders. This Skill provides performance profiling guidelines to identify and resolve these specific UI bottlenecks.

How do I reduce my React Native bundle size for iOS and Android?▼

Reduce React Native bundle size by running the analyze_app_bundle_size command to measure iOS or Android app bundles using Ruler or Xcode App Thinning. This Skill provides guidelines for optimizing overall app efficiency and bundle output.

What is the best way to optimize Hermes and memory leaks in React Native?▼

The best way to optimize Hermes and memory leaks in React Native is applying targeted performance profiling guidelines for JS thread blocking and native modules. This Skill provides expert rules for improving FPS, TTI, and memory management.

Does this Skill require specific performance profiling tools for React Native?▼

Yes, optimizing React Native performance requires React Native and various performance profiling tools to measure TTI, FPS, and memory leaks. This Skill provides the guidelines for interpreting data and applying fixes using those external tools.

Can I use FlashList to improve React Native scrolling performance?▼

Yes, you can use FlashList to improve React Native scrolling performance by reducing bridge overhead and JS thread blocking. This Skill provides guidelines for integrating FlashList and optimizing native modules to eliminate jank.