react-native-best-practices

Apply React Native performance best practices for FPS, startup time, memory, and bundle efficiency.

Updated May 29, 2025
One-click install
npx skills add https://github.com/Joel-barriosnuevo/RockaEterna --skill react-native-best-practices-joel-barriosnuevo
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/Joel-barriosnuevo/RockaEterna/tree/main/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/Joel-barriosnuevo/RockaEterna --skill react-native-best-practices-joel-barriosnuevo

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams optimize React Native apps by applying industry-standard performance best practices, reducing jank, memory usage, and startup time.

Core Features & Use Cases

  • FPS and re-renders optimization: identify and fix slow frames and excessive renders.
  • Bundle size and startup improvements: reduce app size and Time to Interactive.
  • Memory management and animations: address memory leaks and smooth animations across platforms.
  • Use Case: when building RN apps with Expo or bare RN where performance is critical in production.

Quick Start

Review the reference patterns in references/ for JS performance patterns and RN optimizations; apply the steps to a sample screen; run a profiler to measure FPS and TTI; implement changes.

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 optimize React Native FPS and fix slow animations?

Optimize React Native FPS by identifying and fixing excessive re-renders and slow frames using industry-standard performance best practices. Profile your application to measure frame rates, then implement patterns that reduce UI lag and smooth animations across platforms.

What is the best way to reduce React Native bundle size and improve startup time?

The best way to reduce React Native bundle size and improve startup time is to apply optimization patterns that minimize app size and Time to Interactive. You can implement specific steps to reduce the bundle and verify TTI improvements during production builds.

Why does my React Native app have memory leaks and how can I fix them?

React Native memory leaks occur due to poor memory management patterns and can be fixed by applying industry-standard best practices. You must profile your app's memory usage to identify leaks and implement optimizations across JS and native modules.

Can I use these React Native performance patterns with Expo and bare native modules?

Yes, you can use these React Native performance patterns with both Expo and bare native modules. The best practices are designed to apply across RN projects where performance is critical in production, addressing UI lag, bundle size, and memory issues.

How do I profile React Native apps to measure TTI and verify performance improvements?

To profile React Native apps and measure TTI, you run a profiler to measure FPS and startup time, then apply reference patterns for JS performance and RN optimizations. This process helps verify bundle improvements and resolve slow UI issues.