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, navigation, lists, images, animations, bundle optimization, or

Community Expo React Native Best Practices Comprehensive performance optimization guide for Expo React Native applications. Contains 54 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation. When to Apply Reference these guidelines when: Writing new Expo React Native components Optimizing app startup and Time to Interactive Implementing lists, images, or animations Reducing bundle size and memory usage Reviewing code for mobile performance issues Rule Categories by Priority Priority Category Impact Prefix 1 Launch Time Optimization CRITICAL launch 2 Bundle Size Optimization CRITICAL bundle 3 List Virtualization HIGH list 4 Image Optimization HIGH image 5 Data Fetching Patterns HIGH data 6 Navigation Performance MEDIUM HIGH nav 7 Re render Prevention MEDIUM rerender 8 Animation Performance MEDIUM anim 9 Memory Management LOW MEDIUM mem Quick Reference 1. Launch Time Optimization (CRITICAL) launch splash screen control Control splash screen visibility during asset loading launch preload critical assets Preload fonts and images during splash launch hermes engine Use Hermes engine for faster startup launch defer non critical Defer non critical initialization launch new architecture Enable New Architecture for synchronous native communication launch minimize root imports Minimize imports in root App component 2. Bundle Size Optimization (CRITICAL) bundle avoid barrel files Avoid barrel file imports bundle analyze size Analyze bundle size before release bundle remove unused dependencies Remove unused dependencies bundle split by architecture Generate architecture specific APKs bundle enable proguard Enable ProGuard for Android release builds bundle optimize fonts Subset custom fonts to used characters bundle use lightweight alternatives Use lightweight library alternatives 3. List Virtualization (HIGH) list use flashlist Use FlashList instead of FlatList list provide estimated size Provide accurate estimatedItemSize list avoid inline functions Avoid inline functions in renderItem list provide getitemlayout Provide getItemLayout for fixed height items list avoid key prop Avoid key prop inside FlashList items list batch rendering Configure list batch rendering list memoize item components Memoize list item components 4. Image Optimization (HIGH) image use expo image Use expo image instead of React Native Image image resize to display size Resize images to display size image use webp format Use WebP format for smaller file sizes image use placeholders Use BlurHash or ThumbHash placeholders image preload critical Preload critical above the fold images image lazy load offscreen Lazy load off screen images 5. Data Fetching Patterns (HIGH) data parallel fetching Fetch independent data in parallel data request deduplication Deduplicate concurrent requests data abort requests Abort requests on component unmount data pagination Implement efficient pagination strategies data cache strategies Use appropriate caching strategies data optimistic updates Apply optimistic updates for responsiveness 6. Navigation Performance (MEDIUM HIGH) nav use native stack Use native stack navigator nav unmount inactive screens Unmount inactive tab screens nav prefetch screen data Prefetch data before navigation nav optimize screen options Optimize screen options nav avoid deep nesting Avoid deeply nested navigators 7. Re render Prevention (MEDIUM) rerender use memo components Memoize expensive components with React.memo rerender use callback Stabilize callbacks with useCallback rerender use memo values Memoize expensive computations with useMemo rerender avoid context overuse Avoid overusing Context for frequent updates rerender split component state Split components to isolate updating state rerender use react compiler Enable React Compiler for automatic memoization rerender avoid anonymous components Avoid anonymous components in JSX 8. Animation Performance (MEDIUM) anim use reanimated Use Reanimated for UI thread animations anim use native driver Enable useNativeDriver for Animated API anim avoid layout animation Prefer transform over layout animations anim gesture handler integration Use Gesture Handler with Reanimated anim interaction manager Defer heavy work during animations 9. Memory Management (LOW MEDIUM) mem cleanup useeffect Clean up subscriptions and timers mem abort fetch requests Abort fetch requests on unmount mem avoid closure leaks Avoid closure based memory leaks mem release heavy resources Release heavy resources when not needed mem profile with tools Profile memory usage with development tools How to Use Read individual reference files for detailed explanations and code examples: [Section definitions](references/ sections.md) Category structure and impact levels [Rule template](assets/templates/ template.md) Template for adding new rules Example rules: [launch splash screen control](references/launch splash screen control.md), [list use flashlist](references/list use flashlist.md) Full Compiled Document For the complete guide with all rules expanded: AGENTS.md