> expo-react-native-performance
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.
curl "https://skillshub.wtf/pproenca/dot-skills/expo-react-native-performance?format=md"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- Enable Hermes JavaScript enginestartup-remove-console-logs- Remove console logs in productionstartup-splash-screen-control- Control splash screen visibilitystartup-preload-assets- Preload critical assets during splashstartup-async-routes- Use async routes for code splittingstartup-cherry-pick-imports- Use direct imports instead of barrel files
2. List Virtualization (CRITICAL)
list-use-flashlist- Use FlashList instead of FlatListlist-estimated-item-size- Provide accurate estimatedItemSizelist-get-item-type- Use getItemType for mixed listslist-stable-render-item- Stabilize renderItem with useCallbacklist-get-item-layout- Provide getItemLayout for fixed heightslist-memoize-items- Memoize list item components
3. Re-render Optimization (HIGH)
rerender-use-memo-expensive- Memoize expensive computationsrerender-use-callback-handlers- Stabilize callbacks with useCallbackrerender-functional-setstate- Use functional setState updatesrerender-lazy-state-init- Use lazy state initializationrerender-split-context- Split context by update frequencyrerender-derive-state- Derive state instead of syncing
4. Animation Performance (HIGH)
anim-use-native-driver- Enable native driver for animationsanim-use-reanimated- Use Reanimated for complex animationsanim-layout-animation- Use LayoutAnimation for simple transitionsanim-transform-not-dimensions- Animate transform instead of dimensionsanim-interaction-manager- Defer heavy work during animations
5. Image & Asset Loading (MEDIUM-HIGH)
asset-use-expo-image- Use expo-image for image loadingasset-prefetch-images- Prefetch images before displayasset-optimize-image-size- Request appropriately sized imagesasset-use-webp-format- Use WebP format for imagesasset-recycling-key- Use recyclingKey in FlashList images
6. Memory Management (MEDIUM)
mem-cleanup-subscriptions- Clean up subscriptions in useEffectmem-clear-timers- Clear timers on unmountmem-abort-fetch- Abort fetch requests on unmountmem-avoid-inline-objects- Avoid inline objects in propsmem-limit-list-data- Limit list data in memory
7. Async & Data Fetching (MEDIUM)
async-parallel-fetching- Fetch independent data in parallelasync-defer-await- Defer await until value neededasync-batch-api-calls- Batch related API callsasync-cache-responses- Cache API responses locallyasync-refetch-on-focus- Refetch data on screen focus
8. Platform Optimizations (LOW-MEDIUM)
platform-android-overdraw- Reduce Android overdrawplatform-ios-text-rendering- Optimize iOS text renderingplatform-android-proguard- Enable ProGuard for Android releaseplatform-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 |
> related_skills --same-repo
> valid-skill
A valid test skill with proper formatting. This skill should pass all validations and serves as a reference for the expected format.
> too-long-skill
This skill has more than 500 lines which should fail validation.
> missing-references
This skill references rules that do not have corresponding files in the references directory.
> missing-description
missing-description skill from pproenca/dot-skills