Expo React Native Performance
Apply 42 prioritized Expo React Native performance rules—from startup and lists to platform tweaks—when profiling or refactoring a sluggish app.
Overview
Expo React Native Performance is an agent skill most often used in Ship (also Build frontend) that applies 42 prioritized rules across 8 categories to optimize Expo React Native startup, lists, and bundles.
Install
npx skills add https://github.com/pproenca/dot-skills --skill expo-react-native-performanceWhat is this skill?
- 42 performance rules organized across 8 impact-ranked categories
- Critical tiers cover app startup, bundle size, and list virtualization
- Hermes, splash control, async routes, and direct-import guidance
- Incorrect vs correct examples with impact metrics per rule
- Optimized for AI agents automating Expo React Native refactors
- 42 performance rules across 8 categories
- Rules prioritized from critical startup and list virtualization to incremental platform optimizations
Adoption & trust: 783 installs on skills.sh; 157 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your Expo app feels slow at launch or in long lists and you lack a prioritized, evidence-based refactor checklist for agents to follow.
Who is it for?
Solo builders on Expo React Native who profile production builds and want agent-driven refactors tied to explicit rule priorities.
Skip if: Bare React Native without Expo, web-only React projects, or teams that only need one-line perf tips without structured rule coverage.
When should I use this skill?
Optimizing or refactoring Expo React Native apps for startup, scroll performance, or bundle size with agent-assisted changes.
What do I get? / Deliverables
You work through categorized rules with before/after patterns so startup, virtualization, and bundle optimizations land in impact order before the next release.
- Prioritized perf refactor plan aligned to 8 categories
- Code changes following documented correct patterns per rule
- Release-ready improvements to startup, lists, and bundle metrics
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Performance hardening is cataloged under Ship perf because rules target release-quality mobile UX, though several rules also guide Build-time implementation choices. Perf subphase captures startup, virtualization, and bundle optimizations that show up after features exist but before scale.
Where it fits
Choose direct imports and async routes while implementing navigation so bundle size stays controlled from the first feature.
Run the 42-rule checklist against production builds before app-store submission to cut cold-start time.
Revisit list virtualization and console-stripping rules after crash or ANR reports spike on low-end devices.
How it compares
A numbered mobile perf rulebook for agents—not a generic React web lighthouse checklist.
Common Questions / FAQ
Who is expo-react-native-performance for?
Indie mobile developers and agents maintaining Expo React Native apps who need systematic, high-impact performance guidance.
When should I use expo-react-native-performance?
Use it in Ship perf before release when measuring startup and scroll performance, and in Build frontend when choosing list patterns, imports, and routing that affect bundle size early.
Is expo-react-native-performance safe to install?
See the Security Audits panel on this Prism page; the skill is documentation-only but may steer agents toward build and config changes—review diffs before merging.
SKILL.md
READMESKILL.md - Expo React Native Performance
# Expo React Native **Version 0.1.0** Expo February 2026 > **Note:** This document is for agents and LLMs working on Expo React Native codebases. > Humans may also find it useful, but guidance here is optimized for automation > and consistency by AI-assisted workflows. --- ## Abstract Comprehensive performance optimization guide for Expo React Native applications, designed for AI agents and LLMs. Contains 42 rules across 8 categories, prioritized by impact from critical (app startup, list virtualization) to incremental (platform optimizations). Each rule includes detailed explanations, real-world examples comparing incorrect vs. correct implementations, and specific impact metrics to guide automated refactoring and code generation. --- ## Table of Contents 1. [App Startup & Bundle Size](#1-app-startup-bundle-size) — **CRITICAL** - 1.1 [Control Splash Screen Visibility](#11-control-splash-screen-visibility) - 1.2 [Enable Hermes JavaScript Engine](#12-enable-hermes-javascript-engine) - 1.3 [Preload Critical Assets During Splash](#13-preload-critical-assets-during-splash) - 1.4 [Remove Console Logs in Production](#14-remove-console-logs-in-production) - 1.5 [Use Async Routes for Code Splitting](#15-use-async-routes-for-code-splitting) - 1.6 [Use Direct Imports Instead of Barrel Files](#16-use-direct-imports-instead-of-barrel-files) 2. [List Virtualization](#2-list-virtualization) — **CRITICAL** - 2.1 [Memoize List Item Components](#21-memoize-list-item-components) - 2.2 [Provide Accurate estimatedItemSize](#22-provide-accurate-estimateditemsize) - 2.3 [Provide getItemLayout for Fixed Heights](#23-provide-getitemlayout-for-fixed-heights) - 2.4 [Stabilize renderItem with useCallback](#24-stabilize-renderitem-with-usecallback) - 2.5 [Use FlashList Instead of FlatList](#25-use-flashlist-instead-of-flatlist) - 2.6 [Use getItemType for Mixed Lists](#26-use-getitemtype-for-mixed-lists) 3. [Re-render Optimization](#3-re-render-optimization) — **HIGH** - 3.1 [Derive State Instead of Syncing](#31-derive-state-instead-of-syncing) - 3.2 [Memoize Expensive Computations with useMemo](#32-memoize-expensive-computations-with-usememo) - 3.3 [Split Context by Update Frequency](#33-split-context-by-update-frequency) - 3.4 [Stabilize Callbacks with useCallback](#34-stabilize-callbacks-with-usecallback) - 3.5 [Use Functional setState Updates](#35-use-functional-setstate-updates) - 3.6 [Use Lazy State Initialization](#36-use-lazy-state-initialization) 4. [Animation Performance](#4-animation-performance) — **HIGH** - 4.1 [Animate Transform Instead of Dimensions](#41-animate-transform-instead-of-dimensions) - 4.2 [Defer Heavy Work During Animations](#42-defer-heavy-work-during-animations) - 4.3 [Enable Native Driver for Animations](#43-enable-native-driver-for-animations) - 4.4 [Use LayoutAnimation for Simple Transitions](#44-use-layoutanimation-for-simple-transitions) - 4.5 [Use Reanimated for Complex Animations](#45-use-reanimated-for-complex-animations) 5. [Image & Asset Loading](#5-image-asset-loading) — **MEDIUM-HIGH** - 5.1 [Prefetch Images Before Display](#51-prefetch-images-before-display) - 5.2 [Request Appropriately Sized Images](#52-request-appropriately-sized-images) - 5.3 [Use expo-image for Image Loading](#53-use-expo-image-for-image-loading) - 5.4 [Use recyclingKey in FlashList Images](#54-use-recyclingkey-in-flashlist-images) - 5.5 [Use WebP Format for Images](#55-use-webp-format-for-images) 6. [Memory Management](#6-memory-management) — **MEDIUM** - 6.1 [Abort Fetch Requests on Unmount](#61-abort-fetch-requests-on-unmount) - 6.2 [Avoid Inline Objects and Arrays in Props](#62-avoid-inline-objects-and-arrays-in-props) - 6.3 [Clean Up Subscriptions in useEffect](#63-clean-up-subscriptions-in-useeffect) - 6.4 [Clear Timers on Unmount](#64-clear-timers-on-unmount) - 6.5 [Limit List Data in Memory](#65-limit-list-data-in-memory) 7. [