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 - 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