skills.rest
apostolos-geyer
apostolos-geyerCOMMUNITY
Explore all skills by this author →
GitHub

react-native-best-practices

Profile and optimize React Native app performance across JavaScript, native modules, and bundle size.

Updated Jan 28, 2026
Search Tags:#performance#profiling#fps#react-native#bundle-size#optimizations#tti
One-click install
npx skills add https://github.com/apostolos-geyer/StoliStack --skill react-native-best-practices-apostolos-geyer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/apostolos-geyer/StoliStack/tree/main/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/apostolos-geyer/StoliStack --skill react-native-best-practices-apostolos-geyer

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React Native performance challenges across the JS runtime, native modules, and bundle size are common bottlenecks and this guide provides proven strategies to address them.

Core Features & Use Cases

  • FPS optimization, re-render reduction, and smoother animations.
  • TTI improvements and faster startup by optimizing JS/native bridge and bundling.
  • Reducing application size via code-splitting, native assets, and polyfill optimization.
  • Applied to projects using Hermes, FlashList, and Turbo Modules, or during profiling sessions.

Quick Start

Review the guidelines and begin profiling FPS and startup time, then implement recommended steps such as enabling tree shaking and replacing JS polyfills with native implementations.

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 improve React Native app performance and reduce slow renders?▼

Improve React Native app performance by profiling FPS and startup time, then applying re-render reduction, JavaScript bridge overhead optimization, and smoother animation tuning to resolve slow renders.

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

Reduce React Native bundle size by enabling tree shaking, applying code splitting, optimizing native assets, and replacing JavaScript polyfills with native implementations to shrink output.

How does Hermes affect React Native startup time and TTI?▼

Hermes optimizes the JavaScript runtime to improve React Native startup time and TTI by reducing bridge overhead and accelerating JS execution during profiling scenarios.

Does this optimization guide work with Turbo Modules and FlashList?▼

Yes, this optimization guide applies directly to projects using Turbo Modules and FlashList, providing strategies for FPS tuning, memory usage reduction, and native module enhancements.

Why does my React Native app have low FPS during animations?▼

Low FPS during React Native animations occurs due to excessive re-renders and JavaScript bridge overhead; profiling helps identify bottlenecks to apply re-render reduction and smoother animation tuning.

Related Skills

Explore More Software Engineering Skills→
freethinkelfreethinkel
1

react-native-best-practices

Analyze React Native performance bottlenecks and apply optimization strategies.

Community
Intermediate
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced
vitalyiegorovvitalyiegorov
7

react-native-best-practices

Analyze React Native bundle size and optimize FPS, TTI, and memory leaks.

Community
Advanced
rnavarychrnavarych
14

role-mobile:mobile-performance

Diagnose mobile performance issues in iOS and Android apps.

Community
Advanced