How do I use it for list optimization?

The skill provides immediate 'Incorrect vs Correct' patterns for replacing standard ScrollViews with virtualized lists like FlashList to maintain 60 FPS during heavy scrolling.

How does this skill improve app startup time?

It provides specific guidelines for TTI (Time to Interactive) optimization, including Hermes mmap configuration, disabling bundle compression on Android, and leveraging native navigation libraries.

Can it help with memory leaks?

Yes, the skill includes specialized references for identifying, measuring, and fixing both JavaScript and native-side memory leaks in iOS and Android environments.

Does it support the latest React Native features?

Absolutely, it covers modern architecture patterns like the React Compiler, Turbo Modules, and Concurrent React features such as useDeferredValue and useTransition.

React Native Best Practices

Name: React Native Best Practices
Author: callstackincubator

bycallstackincubator

•

670

•

Mobile Development

Optimizes React Native application performance through expert guidelines on FPS, bundle size, and native module efficiency.

This skill integrates Callstack's industry-leading optimization strategies directly into Claude, enabling developers to diagnose and resolve performance bottlenecks in React Native apps. It covers critical areas such as JavaScript thread blocking, Hermes engine optimization, TTI (Time to Interactive) reduction, and memory leak detection, providing both quick-fix patterns and deep-dive technical references for building high-performance mobile applications on iOS and Android based on the 'Ultimate Guide to React Native Optimization'.

Key Features

01Optimized list rendering patterns using FlashList and FlatList

02Performance profiling for FPS, TTI, and bundle size

03Efficient state management strategies using Jotai and Zustand

04670 GitHub stars

05Native module and Turbo Module implementation guidelines

06Advanced bundling techniques including tree shaking and R8 optimization

Use Cases

01Reducing application bundle size and improving cold start times (TTI)

02Debugging UI jank and frame drops in complex animations or long lists

03Migrating legacy components to modern, high-performance React Native patterns

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add callstackincubator/agent-skills react-native-best-practices

For use in Claude.ai and ChatGPT

Download Skill