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