# Expo React Native Performance

> Expo React Native Performance Best Practices

- Skill: `comeonoliver/expo-react-native-performance` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/expo-react-native-performance`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/expo-react-native-performance/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-21
- Page: https://skillmd.com/skills/comeonoliver/expo-react-native-performance

---

# Expo React Native Performance Best Practices

Comprehensive performance optimization guide for Expo React Native applications. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

## When to Apply

Reference these guidelines when:
- Writing new React Native components or screens
- Implementing lists with FlatList or FlashList
- Adding animations or transitions
- Optimizing images and asset loading
- Reviewing code for performance issues

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | App Startup & Bundle Size | CRITICAL | `startup-` |
| 2 | List Virtualization | CRITICAL | `list-` |
| 3 | Re-render Optimization | HIGH | `rerender-` |
| 4 | Animation Performance | HIGH | `anim-` |
| 5 | Image & Asset Loading | MEDIUM-HIGH | `asset-` |
| 6 | Memory Management | MEDIUM | `mem-` |
| 7 | Async & Data Fetching | MEDIUM | `async-` |
| 8 | Platform Optimizations | LOW-MEDIUM | `platform-` |

## Quick Reference

### 1. App Startup & Bundle Size (CRITICAL)

- [`startup-enable-hermes`](references/startup-enable-hermes.md) - Enable Hermes JavaScript engine
- [`startup-remove-console-logs`](references/startup-remove-console-logs.md) - Remove console logs in production
- [`startup-splash-screen-control`](references/startup-splash-screen-control.md) - Control splash screen visibility
- [`startup-preload-assets`](references/startup-preload-assets.md) - Preload critical assets during splash
- [`startup-async-routes`](references/startup-async-routes.md) - Use async routes for code splitting
- [`startup-cherry-pick-imports`](references/startup-cherry-pick-imports.md) - Use direct imports instead of barrel files

### 2. List Virtualization (CRITICAL)

- [`list-use-flashlist`](references/list-use-flashlist.md) - Use FlashList instead of FlatList
- [`list-estimated-item-size`](references/list-estimated-item-size.md) - Provide accurate estimatedItemSize
- [`list-get-item-type`](references/list-get-item-type.md) - Use getItemType for mixed lists
- [`list-stable-render-item`](references/list-stable-render-item.md) - Stabilize renderItem with useCallback
- [`list-get-item-layout`](references/list-get-item-layout.md) - Provide getItemLayout for fixed heights
- [`list-memoize-items`](references/list-memoize-items.md) - Memoize list item components

### 3. Re-render Optimization (HIGH)

- [`rerender-use-memo-expensive`](references/rerender-use-memo-expensive.md) - Memoize expensive computations
- [`rerender-use-callback-handlers`](references/rerender-use-callback-handlers.md) - Stabilize callbacks with useCallback
- [`rerender-functional-setstate`](references/rerender-functional-setstate.md) - Use functional setState updates
- [`rerender-lazy-state-init`](references/rerender-lazy-state-init.md) - Use lazy state initialization
- [`rerender-split-context`](references/rerender-split-context.md) - Split context by update frequency
- [`rerender-derive-state`](references/rerender-derive-state.md) - Derive state instead of syncing

### 4. Animation Performance (HIGH)

- [`anim-use-native-driver`](references/anim-use-native-driver.md) - Enable native driver for animations
- [`anim-use-reanimated`](references/anim-use-reanimated.md) - Use Reanimated for complex animations
- [`anim-layout-animation`](references/anim-layout-animation.md) - Use LayoutAnimation for simple transitions
- [`anim-transform-not-dimensions`](references/anim-transform-not-dimensions.md) - Animate transform instead of dimensions
- [`anim-interaction-manager`](references/anim-interaction-manager.md) - Defer heavy work during animations

### 5. Image & Asset Loading (MEDIUM-HIGH)

- [`asset-use-expo-image`](references/asset-use-expo-image.md) - Use expo-image for image loading
- [`asset-prefetch-images`](references/asset-prefetch-images.md) - Prefetch images before display
- [`asset-optimize-image-size`](references/asset-optimize-image-size.md) - Request appropriately sized images
- [`asset-use-webp-format`](references/asset-use-webp-format.md) - Use WebP format for images
- [`asset-recycling-key`](references/asset-recycling-key.md) - Use recyclingKey in FlashList images

### 6. Memory Management (MEDIUM)

- [`mem-cleanup-subscriptions`](references/mem-cleanup-subscriptions.md) - Clean up subscriptions in useEffect
- [`mem-clear-timers`](references/mem-clear-timers.md) - Clear timers on unmount
- [`mem-abort-fetch`](references/mem-abort-fetch.md) - Abort fetch requests on unmount
- [`mem-avoid-inline-objects`](references/mem-avoid-inline-objects.md) - Avoid inline objects in props
- [`mem-limit-list-data`](references/mem-limit-list-data.md) - Limit list data in memory

### 7. Async & Data Fetching (MEDIUM)

- [`async-parallel-fetching`](references/async-parallel-fetching.md) - Fetch independent data in parallel
- [`async-defer-await`](references/async-defer-await.md) - Defer await until value needed
- [`async-batch-api-calls`](references/async-batch-api-calls.md) - Batch related API calls
- [`async-cache-responses`](references/async-cache-responses.md) - Cache API responses locally
- [`async-refetch-on-focus`](references/async-refetch-on-focus.md) - Refetch data on screen focus

### 8. Platform Optimizations (LOW-MEDIUM)

- [`platform-android-overdraw`](references/platform-android-overdraw.md) - Reduce Android overdraw
- [`platform-ios-text-rendering`](references/platform-ios-text-rendering.md) - Optimize iOS text rendering
- [`platform-android-proguard`](references/platform-android-proguard.md) - Enable ProGuard for Android release
- [`platform-conditional-render`](references/platform-conditional-render.md) - Platform-specific optimizations

## How to Use

Read individual reference files for detailed explanations and code examples:

- [Section definitions](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules

## Full Compiled Document

For the complete guide with all rules expanded, see [AGENTS.md](AGENTS.md).

## Reference Files

| File | Description |
|------|-------------|
| [AGENTS.md](AGENTS.md) | Complete compiled guide with all rules |
| [references/_sections.md](references/_sections.md) | Category definitions and ordering |
| [assets/templates/_template.md](assets/templates/_template.md) | Template for new rules |
| [metadata.json](metadata.json) | Version and reference information |