react-native-performance

Optimize React Native and Expo apps for 60fps performance and crash prevention.

Updated Jan 31, 2026
One-click install
npx skills add https://github.com/tuyenht/Antigravity-Core --skill react-native-performance-tuyenht
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-native-performance
Source: https://github.com/tuyenht/Antigravity-Core/tree/main/.agent/skills/react-native-performance
Command: npx skills add https://github.com/tuyenht/Antigravity-Core --skill react-native-performance-tuyenht

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses common performance bottlenecks in React Native and Expo applications, ensuring a smooth, native-like user experience and preventing crashes.

Core Features & Use Cases

  • Crash Prevention: Implements critical rules to avoid runtime errors in rendering and state management.
  • Smooth Scrolling: Optimizes list performance using virtualization, stable references, and lightweight items.
  • Fluid Animations: Ensures animations run at 60fps by leveraging GPU-accelerated properties and efficient Reanimated patterns.
  • Use Case: Refactor a janky FlatList to use FlashList and stable item references, resulting in a 5x faster scroll experience and eliminating dropped frames.

Quick Start

Apply the react-native-performance skill to optimize the list rendering in the src/components/ProductList.tsx file.

Frequently Asked Questions about react-native-performance

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix React Native FlatList jank and achieve 60fps scrolling?

To fix React Native FlatList jank and achieve 60fps scrolling, refactor lists to use FlashList with lightweight items, stable references, and virtualization. This approach eliminates dropped frames and significantly improves scroll performance in Expo applications.

Why does my React Native app crash during rendering and state management?

React Native apps crash during rendering and state management due to unstable references and improper state handling. Implementing critical crash prevention rules for rendering and state management ensures a smooth, native-like user experience without runtime errors.

What is the best way to optimize React Native animations for production?

The best way to optimize React Native animations for production is by leveraging GPU-accelerated properties and efficient Reanimated patterns. This ensures fluid animations consistently run at 60fps without dropping frames.

Does this React Native performance optimization approach work with Expo apps?

Yes, this React Native performance optimization approach works directly with Expo apps. It provides structured rules for optimizing Expo applications in production environments, covering navigation, state management, and UI patterns.

How do I prevent dropped frames in React Native scroll handling?

To prevent dropped frames in React Native scroll handling, use virtualization, stable references, and lightweight list items. Refactoring janky lists to FlashList with stable item references eliminates dropped frames and ensures smooth scrolling.