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
