majiayu000 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:
- Section definitions - Category structure and impact levels
- Rule template - Template for adding new rules
- Example rules: launch-splash-screen-control, list-use-flashlist
Full Compiled Document
For the complete guide with all rules expanded: AGENTS.md