expo-react-native-performance

---

name: expo-react-native-performance description: Expo React Native performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Expo React Native code to ensure optimal performance patterns. Triggers on tasks involving React Native components, lists, animations, images, or performance improvements.

Expo React Native Performance Best Practices

Comprehensive performance optimization guide for Expo React Native applications. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

• Writing new React Native components or screens
• Implementing lists with FlatList or FlashList
• Adding animations or transitions
• Optimizing images and asset loading
• Reviewing code for performance issues

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	App Startup & Bundle Size	CRITICAL	startup-
2	List Virtualization	CRITICAL	list-
3	Re-render Optimization	HIGH	rerender-
4	Animation Performance	HIGH	anim-
5	Image & Asset Loading	MEDIUM-HIGH	asset-
6	Memory Management	MEDIUM	mem-
7	Async & Data Fetching	MEDIUM	async-
8	Platform Optimizations	LOW-MEDIUM	platform-

Quick Reference

1. App Startup & Bundle Size (CRITICAL)

• startup-enable-hermes - Enable Hermes JavaScript engine
• startup-remove-console-logs - Remove console logs in production
• startup-splash-screen-control - Control splash screen visibility
• startup-preload-assets - Preload critical assets during splash
• startup-async-routes - Use async routes for code splitting
• startup-cherry-pick-imports - Use direct imports instead of barrel files

2. List Virtualization (CRITICAL)

• list-use-flashlist - Use FlashList instead of FlatList
• list-estimated-item-size - Provide accurate estimatedItemSize
• list-get-item-type - Use getItemType for mixed lists
• list-stable-render-item - Stabilize renderItem with useCallback
• list-get-item-layout - Provide getItemLayout for fixed heights
• list-memoize-items - Memoize list item components

3. Re-render Optimization (HIGH)

• rerender-use-memo-expensive - Memoize expensive computations
• rerender-use-callback-handlers - Stabilize callbacks with useCallback
• rerender-functional-setstate - Use functional setState updates
• rerender-lazy-state-init - Use lazy state initialization
• rerender-split-context - Split context by update frequency
• rerender-derive-state - Derive state instead of syncing

4. Animation Performance (HIGH)

• anim-use-native-driver - Enable native driver for animations
• anim-use-reanimated - Use Reanimated for complex animations
• anim-layout-animation - Use LayoutAnimation for simple transitions
• anim-transform-not-dimensions - Animate transform instead of dimensions
• anim-interaction-manager - Defer heavy work during animations

5. Image & Asset Loading (MEDIUM-HIGH)

• asset-use-expo-image - Use expo-image for image loading
• asset-prefetch-images - Prefetch images before display
• asset-optimize-image-size - Request appropriately sized images
• asset-use-webp-format - Use WebP format for images
• asset-recycling-key - Use recyclingKey in FlashList images

6. Memory Management (MEDIUM)

• mem-cleanup-subscriptions - Clean up subscriptions in useEffect
• mem-clear-timers - Clear timers on unmount
• mem-abort-fetch - Abort fetch requests on unmount
• mem-avoid-inline-objects - Avoid inline objects in props
• mem-limit-list-data - Limit list data in memory

7. Async & Data Fetching (MEDIUM)

• async-parallel-fetching - Fetch independent data in parallel
• async-defer-await - Defer await until value needed
• async-batch-api-calls - Batch related API calls
• async-cache-responses - Cache API responses locally
• async-refetch-on-focus - Refetch data on screen focus

8. Platform Optimizations (LOW-MEDIUM)

• platform-android-overdraw - Reduce Android overdraw
• platform-ios-text-rendering - Optimize iOS text rendering
• platform-android-proguard - Enable ProGuard for Android release
• platform-conditional-render - Platform-specific optimizations

How to Use

Read individual reference files for detailed explanations and code examples:

• Section definitions - Category structure and impact levels
• Rule template - Template for adding new rules

Full Compiled Document

For the complete guide with all rules expanded, see AGENTS.md.

Reference Files

File	Description
AGENTS.md	Complete compiled guide with all rules
references/_sections.md	Category definitions and ordering
assets/templates/_template.md	Template for new rules
metadata.json	Version and reference information