expo-react-native-performance

Original：🇺🇸 English

Translated

Expo React Native performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring Expo React Native code to ensure optimal performance patterns. Triggers on tasks involving React Native components, lists, animations, images, or performance improvements.

2installs

Sourcepproenca/dot-skills

Added on2026-02-10

NPX Install

npx skill4agent add pproenca/dot-skills expo-react-native-performance

SKILL.md Content

View Translation Comparison →

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


startup-
list-
rerender-
anim-
asset-
mem-
async-
platform-

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
```
- Enable Hermes JavaScript engine
```
startup-remove-console-logs
```
- Remove console logs in production
```
startup-splash-screen-control
```
- Control splash screen visibility
```
startup-preload-assets
```
- Preload critical assets during splash
```
startup-async-routes
```
- Use async routes for code splitting
```
startup-cherry-pick-imports
```
- Use direct imports instead of barrel files

2. List Virtualization (CRITICAL)

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

3. Re-render Optimization (HIGH)

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

4. Animation Performance (HIGH)

```
anim-use-native-driver
```
- Enable native driver for animations
```
anim-use-reanimated
```
- Use Reanimated for complex animations
```
anim-layout-animation
```
- Use LayoutAnimation for simple transitions
```
anim-transform-not-dimensions
```
- Animate transform instead of dimensions
```
anim-interaction-manager
```
- Defer heavy work during animations

5. Image & Asset Loading (MEDIUM-HIGH)

```
asset-use-expo-image
```
- Use expo-image for image loading
```
asset-prefetch-images
```
- Prefetch images before display
```
asset-optimize-image-size
```
- Request appropriately sized images
```
asset-use-webp-format
```
- Use WebP format for images
```
asset-recycling-key
```
- Use recyclingKey in FlashList images

6. Memory Management (MEDIUM)

```
mem-cleanup-subscriptions
```
- Clean up subscriptions in useEffect
```
mem-clear-timers
```
- Clear timers on unmount
```
mem-abort-fetch
```
- Abort fetch requests on unmount
```
mem-avoid-inline-objects
```
- Avoid inline objects in props
```
mem-limit-list-data
```
- Limit list data in memory

7. Async & Data Fetching (MEDIUM)

```
async-parallel-fetching
```
- Fetch independent data in parallel
```
async-defer-await
```
- Defer await until value needed
```
async-batch-api-calls
```
- Batch related API calls
```
async-cache-responses
```
- Cache API responses locally
```
async-refetch-on-focus
```
- Refetch data on screen focus

8. Platform Optimizations (LOW-MEDIUM)

```
platform-android-overdraw
```
- Reduce Android overdraw
```
platform-ios-text-rendering
```
- Optimize iOS text rendering
```
platform-android-proguard
```
- Enable ProGuard for Android release
```
platform-conditional-render
```
- Platform-specific optimizations

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

Full Compiled Document

For the complete guide with all rules expanded, see AGENTS.md.

Reference Files

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