react-native-best-practices

Provides React Native performance optimization for FPS, TTI, bundle size, memory leaks, re-renders, animations, Hermes, FlashList, native modules, and debugging jank and frame drops.

Updated Jan 17, 2026
One-click install
npx skills add https://github.com/epiphanyapps/mapyourhealth --skill react-native-best-practices-epiphanyapps
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/epiphanyapps/mapyourhealth/tree/main/apps/mobile/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/epiphanyapps/mapyourhealth --skill react-native-best-practices-epiphanyapps

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidelines and actionable steps to significantly improve the performance of React Native applications, addressing issues like slow UI, jank, and large app sizes.

Core Features & Use Cases

  • Performance Diagnosis: Identify bottlenecks in JavaScript, native code, and bundle size.
  • Optimization Strategies: Offers solutions for FPS drops, re-render issues, slow startup (TTI), memory leaks, and animation jank.
  • Use Case: A developer notices their React Native app is sluggish on older devices. They use this Skill to profile the app, identify that list scrolling is the main culprit, and apply the recommended FlashList optimization.

Quick Start

Use the react-native-best-practices skill to analyze the bundle size of a React Native application.

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 React Native jank and frame drops during list scrolling?

To fix React Native jank and frame drops, replace standard lists with FlashList and profile the JavaScript thread to identify blocking operations. This reduces bridge overhead and optimizes rendering performance for smoother scrolling.

What causes slow startup time in React Native and how can I reduce TTI?

Slow startup time in React Native is caused by large bundle sizes and inefficient Hermes initialization. Reduce TTI by analyzing your bundle size, optimizing native modules, and applying Hermes engine optimizations.

How do I stop excessive re-renders in my React Native application?

Stop excessive React Native re-renders by profiling component updates to identify unnecessary state changes. Apply memoization strategies and optimize animation execution to prevent UI thread blocking and memory leaks.

Does Hermes optimization help with React Native bundle size and JS thread blocking?

Hermes optimization helps with React Native JS thread blocking by improving bytecode execution. Combined with bundle size analysis, it minimizes memory footprint and reduces UI responsiveness issues caused by JavaScript bottlenecks.

What is the best way to profile React Native performance bottlenecks?

The best way to profile React Native performance bottlenecks is to analyze JavaScript thread execution, native bridge overhead, and memory usage. This identifies the root causes of slow startup, jank, and frame drops.