| name | expo |
| 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, navigation, lists, images, animations, bundle optimization, or mobile performance improvements. |
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 loadinglaunch-preload-critical-assets - Preload fonts and images during splashlaunch-hermes-engine - Use Hermes engine for faster startuplaunch-defer-non-critical - Defer non-critical initializationlaunch-new-architecture - Enable New Architecture for synchronous native communicationlaunch-minimize-root-imports - Minimize imports in root App component
2. Bundle Size Optimization (CRITICAL)
bundle-avoid-barrel-files - Avoid barrel file importsbundle-analyze-size - Analyze bundle size before releasebundle-remove-unused-dependencies - Remove unused dependenciesbundle-split-by-architecture - Generate architecture-specific APKsbundle-enable-proguard - Enable ProGuard for Android release buildsbundle-optimize-fonts - Subset custom fonts to used charactersbundle-use-lightweight-alternatives - Use lightweight library alternatives
3. List Virtualization (HIGH)
list-use-flashlist - Use FlashList instead of FlatListlist-provide-estimated-size - Provide accurate estimatedItemSizelist-avoid-inline-functions - Avoid inline functions in renderItemlist-provide-getitemlayout - Provide getItemLayout for fixed-height itemslist-avoid-key-prop - Avoid key prop inside FlashList itemslist-batch-rendering - Configure list batch renderinglist-memoize-item-components - Memoize list item components
4. Image Optimization (HIGH)
image-use-expo-image - Use expo-image instead of React Native Imageimage-resize-to-display-size - Resize images to display sizeimage-use-webp-format - Use WebP format for smaller file sizesimage-use-placeholders - Use BlurHash or ThumbHash placeholdersimage-preload-critical - Preload critical above-the-fold imagesimage-lazy-load-offscreen - Lazy load off-screen images
5. Data Fetching Patterns (HIGH)
data-parallel-fetching - Fetch independent data in paralleldata-request-deduplication - Deduplicate concurrent requestsdata-abort-requests - Abort requests on component unmountdata-pagination - Implement efficient pagination strategiesdata-cache-strategies - Use appropriate caching strategiesdata-optimistic-updates - Apply optimistic updates for responsiveness
6. Navigation Performance (MEDIUM-HIGH)
nav-use-native-stack - Use native stack navigatornav-unmount-inactive-screens - Unmount inactive tab screensnav-prefetch-screen-data - Prefetch data before navigationnav-optimize-screen-options - Optimize screen optionsnav-avoid-deep-nesting - Avoid deeply nested navigators
7. Re-render Prevention (MEDIUM)
rerender-use-memo-components - Memoize expensive components with React.memorerender-use-callback - Stabilize callbacks with useCallbackrerender-use-memo-values - Memoize expensive computations with useMemorerender-avoid-context-overuse - Avoid overusing Context for frequent updatesrerender-split-component-state - Split components to isolate updating statererender-use-react-compiler - Enable React Compiler for automatic memoizationrerender-avoid-anonymous-components - Avoid anonymous components in JSX
8. Animation Performance (MEDIUM)
anim-use-reanimated - Use Reanimated for UI thread animationsanim-use-native-driver - Enable useNativeDriver for Animated APIanim-avoid-layout-animation - Prefer transform over layout animationsanim-gesture-handler-integration - Use Gesture Handler with Reanimatedanim-interaction-manager - Defer heavy work during animations
9. Memory Management (LOW-MEDIUM)
mem-cleanup-useeffect - Clean up subscriptions and timersmem-abort-fetch-requests - Abort fetch requests on unmountmem-avoid-closure-leaks - Avoid closure-based memory leaksmem-release-heavy-resources - Release heavy resources when not neededmem-profile-with-tools - Profile memory usage with development tools
How to Use
Read individual reference files for detailed explanations and code examples:
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md
