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.
How do I install this agent skill?
npx skills add https://github.com/pproenca/dot-skills --skill expo-react-native-performanceIs this agent skill safe to install?
- Gen Agent Trust Hubpass
The skill 'expo-react-native-performance' is a legitimate performance optimization guide for Expo React Native developers. It contains no malicious code, prompt injections, or sensitive data exposure, and its external references point to reputable sources within the mobile development community.
- Socketpass
No alerts
- Snykpass
Risk: LOW · No issues
- Runlayerwarn
48/48 files flagged
- ZeroLeakspass
Score: 93/100 · 2 sections analyzed
What does this agent skill do?
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 |
How can the creator link this skill?
Add the canonical catalog link to the repository README so users can inspect current installs and available audits. The publishing guide covers the complete discovery path.
<a href="https://skillzs.dev/skills/pproenca/dot-skills/expo-react-native-performance">View expo-react-native-performance on skillZs</a>