Does it support Expo projects?

Absolutely; it is designed for both standard React Native and Expo projects, including specific support for Expo SDK 52+ and Re.Pack.

Can it help reduce my app's bundle size?

Yes, it includes specific guides for tree shaking, identifying heavy dependencies, and utilizing R8 for Android native code shrinking.

How does this skill improve React Native app speed?

It provides patterns for reducing unnecessary re-renders, optimizing lists with FlashList, and configuring Hermes for faster execution and better memory management.

What tools does this skill help me use for profiling?

It provides commands and workflows for React DevTools, Xcode Instruments, Android Studio CPU Profiler, and the react-native-performance library.

React Native Performance & Best Practices

Name: React Native Performance & Best Practices
Author: Psycarlo

byPsycarlo

•

Mobile Development

Optimizes React Native and Expo applications by implementing industry-standard patterns for rendering, bundling, and native integration.

This skill provides comprehensive guidance for diagnosing and resolving performance bottlenecks in React Native applications. Based on Callstack's 'Ultimate Guide to React Native Optimization,' it offers actionable patterns for improving frame rates (FPS), reducing Time to Interactive (TTI), minimizing bundle sizes, and fixing memory leaks. Whether you are debugging UI jank, optimizing startup times with Hermes, or building high-performance Turbo Modules, this skill provides the specific configurations, shell commands, and code snippets needed to deliver a production-grade user experience.

Características Principales

01Startup time (TTI) measurement and improvement for cold starts on iOS and Android.

02FPS optimization and re-render reduction using atomic state and React Compiler patterns.

031 GitHub stars

04Native performance profiling for Turbo Modules and background threading models.

05Bundle size analysis and reduction via tree shaking, R8, and barrel export elimination.

06Memory leak detection and management strategies across both JavaScript and native layers.

Casos de Uso

01Reducing production app size and optimizing JS bundle delivery for slow networks.

02Investigating and fixing app crashes or freezes caused by memory leaks and JS thread blocking.

03Debugging sluggish animations or scroll performance in complex lists and views.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add psycarlo/expo-template react-native-best-practices

For use in Claude.ai and ChatGPT

Download Skill