react-native-best-practices

Diagnose React Native performance issues across JavaScript, native modules, and bundle size.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/MatiasTervonen/Training-App --skill react-native-best-practices-matiastervonen
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/MatiasTervonen/Training-App/tree/main/mobile/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/MatiasTervonen/Training-App --skill react-native-best-practices-matiastervonen

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React Native applications, ensuring smoother user experiences and faster load times.

Core Features & Use Cases

  • Performance Diagnosis: Identifies issues related to FPS, TTI, bundle size, memory leaks, and re-renders.
  • Optimization Guidance: Provides actionable steps and reference materials for improving JavaScript, Native, and bundling performance.
  • Use Case: A developer notices their app feels janky during scrolling. They use this Skill to pinpoint the issue to inefficient list rendering and get guidance on using FlashList for optimization.

Quick Start

Use the react-native-best-practices skill to analyze and improve the FPS of my 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 frame drops and scrolling jank?

Fix React Native frame drops by identifying inefficient list rendering and replacing it with FlashList. This Skill provides actionable guidance to diagnose scrolling jank and resolve excessive component re-renders that cause UI stuttering.

What causes slow Time to Interactive in a React Native app?

Slow Time to Interactive in a React Native app is caused by large bundle sizes and JS thread blocking. This Skill diagnoses TTI issues and provides optimization steps for JavaScript execution and bundle size reduction.

How do I optimize Hermes performance and reduce bridge overhead in React Native?

Optimize Hermes performance by debugging JS thread blocking and minimizing bridge overhead. This Skill provides reference materials to analyze native module performance and resolve JavaScript engine inefficiencies.

How can I profile and resolve memory leaks in React Native?

Profile and resolve React Native memory leaks by diagnosing excessive component re-renders and native module inefficiencies. This Skill offers debugging guidelines to identify memory bottlenecks and optimize native code performance.

Does this React Native optimization guidance work with Expo?

Yes, this React Native optimization guidance explicitly supports Expo environments. It addresses performance bottlenecks including bundle size, JavaScript thread blocking, and general jank within Expo-based applications.

What is the best way to reduce React Native bundle size?

The best way to reduce React Native bundle size involves analyzing JavaScript bundles and optimizing native modules. This Skill helps identify bloat and provides steps to minimize load times and improve overall app performance.