Agent Skills: Community Expo React Native Best Practices

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