Expo React Native Performance

by pproencacf93c57cac89No license215 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 7 weeks ago

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.

Instructions onlySoftware Development
AI-generated overview

Guidelines for optimizing performance in Expo React Native apps, covering startup, lists, re-renders, animations, assets, memory and async.

What it does
This skill provides a prioritized set of 42 performance rules for Expo React Native applications, organized into eight categories such as app startup and bundle size, list virtualization, re-render optimization, animation performance, image and asset loading, memory management, async data fetching, and platform optimizations. Each rule is documented in a separate reference file with explanations and code examples, and a compiled guide collects all rules. It is intended to guide writing, reviewing, and refactoring of React Native code toward better performance patterns.
When to use it
Use it when writing new React Native components or screens, implementing lists with FlatList or FlashList, adding animations or transitions, optimizing images and asset loading, or reviewing code for performance issues.
Requirements
No scripts; instructions and reference documents only. The agent needs no additional tools, packages, or credentials.

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

PriorityCategoryImpactPrefix
1App Startup & Bundle SizeCRITICALstartup-
2List VirtualizationCRITICALlist-
3Re-render OptimizationHIGHrerender-
4Animation PerformanceHIGHanim-
5Image & Asset LoadingMEDIUM-HIGHasset-
6Memory ManagementMEDIUMmem-
7Async & Data FetchingMEDIUMasync-
8Platform OptimizationsLOW-MEDIUMplatform-

Quick Reference

1. App Startup & Bundle Size (CRITICAL)

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

2. List Virtualization (CRITICAL)

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

3. Re-render Optimization (HIGH)

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

4. Animation Performance (HIGH)

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

5. Image & Asset Loading (MEDIUM-HIGH)

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

6. Memory Management (MEDIUM)

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

7. Async & Data Fetching (MEDIUM)

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

8. Platform Optimizations (LOW-MEDIUM)

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

How to Use

Read individual reference files for detailed explanations and code examples:

  • Section definitions [blocked] - Category structure and impact levels
  • Rule template [blocked] - Template for adding new rules

Full Compiled Document

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

Reference Files

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

Source and attribution

Source:pproenca/dot-skillsinskills/.experimental/expo-react-native-performanceat commitcf93c57

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal