Agent-Skills.md

Agent Skills: React Native Performance

Optimize React Native rendering for smooth 60fps mobile experiences. Use when optimizing React Native app performance, reducing re-renders, or fixing frame drops. (triggers: **/*.tsx, **/*.ts, FlatList, memo, useMemo, useCallback, performance, optimization)

UncategorizedID: hoangnguyen0403/agent-skills-standard/react-native-performance

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/react-native/react-native-performance

Skill Files

Browse the full folder contents for react-native-performance.

Download Skill

Loading file tree…

skills/react-native/react-native-performance/SKILL.md

Skill Metadata

Name
react-native-performance
Description
"Optimize React Native rendering for smooth 60fps mobile experiences. Use when optimizing React Native app performance, reducing re-renders, or fixing frame drops. (triggers: **/*.tsx, **/*.ts, FlatList, memo, useMemo, useCallback, performance, optimization)"

React Native Performance

Priority: P0 (CRITICAL)

Tune FlatList for 60fps

  • windowSize: Reduce to 5-10 for memory-heavy lists (default 21). initialNumToRender should cover the first viewport.
  • getItemLayout: Provide for fixed-height items. Skips runtime measurement.
  • removeClippedSubviews: Enable for Android (default true) to offload clipped items.
  • maxToRenderPerBatch: Limit to 5-10 items per frame to prevent JS thread blockage.
  • keyExtractor: Use stable unique IDs, never array index.

See optimization guide for FlatList configuration examples with getItemLayout, windowSize, and memoization patterns.

Accelerate Core Rendering

  • The Engine: Ensure Hermes engine is enabled (default in 0.7x). Verify via global.HermesInternal.
  • Animations: Use Native Driver (useNativeDriver: true) or Reanimated 3 for GPU-accelerated 60fps animations.
  • Re-renders: Use React.memo and useMemo for expensive props. Profile via Flipper (React DevTools) for flamegraphs.
  • Network: Batch API calls. Use React Query/Zustand to prevent unnecessary screen refreshes.
  • Images: Use react-native-fast-image for caching and priority. Avoid large PNGs; use WebP.

Reduce Bundle and Startup Time

  • Hermes: Enable for faster startup (default in RN 0.70+).
  • Tree Shaking: Remove unused imports.
  • ProGuard/R8: Enable code shrinking on Android.
  • Lazy Screens: Use lazy prop for stack screens (enabled by default).

Anti-Patterns

  • No ScrollView for Large Lists: Use FlatList.
  • No Inline Styles: Use StyleSheet.create (optimized).
  • No console.log in Production: Strip with babel plugin.

References

See references/optimization-guide.md for FlatList configuration, memoization rules, and bundle analysis.