react-native-best-practices

Optimize React Native performance for FPS, TTI, bundle size, and animations.

10|1|Updated Apr 2, 2020
One-click install
npx skills add https://github.com/marcosmoura/dotfiles --skill react-native-best-practices-marcosmoura
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-best-practices
Source: https://github.com/marcosmoura/dotfiles/tree/main/home/.agents/skills/react-native-best-practices
Command: npx skills add https://github.com/marcosmoura/dotfiles --skill react-native-best-practices-marcosmoura

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 jank, slow startup, and large bundle sizes.

Core Features & Use Cases

  • Performance Optimization: Offers best practices for FPS, TTI, bundle size, memory leaks, and animations.
  • Debugging Tools: Guides on using profiling tools like React DevTools, Xcode Instruments, and Android Studio Profiler.
  • Use Case: A developer notices their React Native app is sluggish on older devices. They can use this Skill to identify performance bottlenecks, such as inefficient list rendering or excessive re-renders, and apply the recommended solutions to achieve a smooth 60+ FPS experience.

Quick Start

Apply React Native best practices to optimize app performance by reviewing the provided guidelines.

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 frame drops and jank in my React Native app?

Fix React Native jank by profiling JS thread blocking and bridge overhead, then optimizing list rendering with FlashList to achieve a smooth 60+ FPS experience. This Skill provides actionable guidelines to identify and resolve these specific frame drop bottlenecks.

Why does my React Native app have a slow startup time?

React Native slow startup is often caused by large bundle sizes and inefficient TTI. You can improve startup time by applying Hermes optimization and reviewing bundle size reduction guidelines provided by this Skill to minimize initial load overhead.

What's the best way to profile memory leaks in React Native?

The best way to profile React Native memory leaks is using debugging tools like React DevTools, Xcode Instruments, and Android Studio Profiler. This Skill guides you through using these profiling tools to detect and resolve memory leak issues.

Can I use FlashList to optimize list rendering performance?

Yes, you can use FlashList to optimize list rendering performance in React Native. This Skill recommends FlashList as a solution for inefficient list rendering, helping you avoid excessive re-renders and maintain responsive scrolling on older devices.

How do I reduce bridge overhead when using native modules?

Reduce React Native bridge overhead by optimizing native modules and minimizing JS thread blocking. This Skill provides best practices for managing native module interactions and animations to enhance overall application responsiveness.