react-native-best-practices

Identify and optimize React Native performance bottlenecks across FPS, startup time, and bundle size.

1|Updated Jan 11, 2026
One-click install
npx skills add https://github.com/Psycarlo/expo-template --skill react-native-best-practices-psycarlo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/Psycarlo/expo-template/tree/main/.cursor/skills/react-native-best-practices
Command: npx skills add https://github.com/Psycarlo/expo-template --skill react-native-best-practices-psycarlo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides comprehensive React Native performance optimization guidelines to help teams identify and address bottlenecks across FPS, startup time (TTI), bundle size, memory leaks, re-renders, and animations.

Core Features & Use Cases

  • Reference-guided patterns for JS-thread optimization, native modules, and bridge overhead.
  • Profiling, measurement, and step-by-step best practices to improve startup time, scrolling performance, and animation smoothness.
  • Real-world guidance for Hermes optimization, FlashList usage, and native modules with concrete references and patterns.

Quick Start

Audit a React Native project against the guidelines to identify slow patterns and apply recommended optimizations.

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 identify and fix React Native performance bottlenecks?

To fix React Native performance bottlenecks, audit your project against structured profiling steps targeting FPS, startup time, and memory leaks. This Skill provides reference patterns and measurable benchmarks to apply targeted optimizations like memoization and JS-thread improvements.

What's the best way to improve React Native startup time and TTI?

Improve React Native startup time and TTI by profiling initialization steps and applying best practices for bundle size reduction and Hermes optimization. This Skill offers step-by-step measurement guidance and reference patterns to accelerate time to interactive.

Why does my React Native app have low FPS and how can I optimize scrolling performance?

Low FPS in React Native often stems from bridge overhead or excessive re-renders. Optimize scrolling performance by profiling JS-thread bottlenecks and applying patterns like FlashList usage and memoization provided in this Skill's reference guidelines.

Does this React Native optimization guidance work with Hermes and native modules?

Yes, this React Native optimization guidance applies directly to projects using Hermes, heavy JS work, and native modules. It provides real-world reference patterns to reduce bridge overhead and optimize native module interactions effectively.

How do I stop unnecessary re-renders and memory leaks in React Native?

Stop unnecessary re-renders and memory leaks in React Native by profiling your application state and applying memoization techniques. This Skill outlines measurement steps and targeted optimization patterns to eliminate slow rendering behaviors.