expo

SKILL.md

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