# Expo

> Community Expo React Native Best Practices

- Skill: `comeonoliver/expo` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/expo`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/expo/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

---

# 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](references/_sections.md) - Category structure and impact levels
- [Rule template](assets/templates/_template.md) - Template for adding new rules
- Example rules: [launch-splash-screen-control](references/launch-splash-screen-control.md), [list-use-flashlist](references/list-use-flashlist.md)

## Full Compiled Document

For the complete guide with all rules expanded: `AGENTS.md`