
optimising-expo-react-native-performance
Diagnose and fix measured startup, rendering, scrolling, memory, media, or network regressions in Expo React Native apps. Use for a reproducible performance problem or an explicit performance audit, not speculative library swaps or blanket memoisation.
- Installs
- 92
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/tristanmanchester/agent-skills --skill optimising-expo-react-native-performance- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads optimising-expo-react-native-performance automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Improve Expo React Native performance
Start with the user's slow flow, not a list of fashionable optimisations. Preserve behaviour, accessibility, error reporting, and data correctness while improving a measured bottleneck.
Establish the experiment
Inspect the package manager and lockfile, Expo SDK, React Native and React versions, Hermes/runtime, New Architecture, router, updates configuration, and performance-sensitive dependencies. Expo's supported React Native version is the app's constraint; do not install the newest React Native independently to match an example.
Define a repeatable scenario and one primary metric: cold-start time, input latency, dropped frames, retained memory after a navigation loop, or end-to-end request latency. Add a few guardrail metrics. Agree numerical budgets from the product and target device, not invented universal thresholds.
Record commit, build configuration, device/OS, thermal state, cache state, dataset, network conditions, repetitions, and measurement method. Separate cold from warm runs. Interleave baseline and candidate runs when drift is plausible; report the distribution and sample count, not a best run or an unsupported p95.
Diagnose, change, verify
- Reproduce and capture a release-build baseline on representative hardware. Simulators and development builds are useful for diagnosis, not substitutes for shipping-device measurements.
- Use React Native DevTools for React/JS attribution in a compatible diagnostic build; native system traces and Instruments reveal main-thread, rendering, I/O, and allocation costs. Keep these evidence types distinct. See
references/01-profiling-toolchain.md. - Form a specific hypothesis supported by a trace or counter. Change one coherent cause, not several unrelated knobs.
- Repeat the same scenario and correctness checks. Keep the change only when its benefit exceeds run-to-run variation without breaking a guardrail.
- Add a regression check proportionate to the problem. Bundle size is not a proxy for input latency; do not claim a size gate prevents all performance regressions.
Route to the bottleneck
| Evidence | Investigate | Reference |
|---|---|---|
| Long pre-interactive work or JS evaluation | Critical startup path, eager imports, asset loading, update payloads | references/02-startup-bundle-ota.md |
| Long JS tasks or repeated expensive commits | State ownership, derivations, bounded scheduling, compiler coverage | references/03-rendering-js-ui.md |
| UI stalls while JS is quiet | Layout, compositing, image decoding, native animations | references/03-rendering-js-ui.md |
| Scroll/recycling or media pressure | Row identity, list API, image size/cache, video lifecycle | references/04-lists-images-media.md |
| Retained JS heap or growing native footprint | Repeated navigation, listeners, closures, media release | references/01-profiling-toolchain.md |
| Refetch storms or blocking requests | Deduplication, cache semantics, pagination, cancellation | references/05-network-background.md |
Current API rules: use bounded requestIdleCallback work rather than removed InteractionManager APIs. Scheduling does not move CPU work off the JS thread. FlashList v2 requires the New Architecture and automatic sizing; do not add size-estimate props. Inspect whether React Compiler already runs before installing or duplicating its configuration.
Resolve SKILL_DIR to this skill's installation directory before running bundled scripts or loading templates. Pass the target project separately; its scripts/ directory is not the skill's directory.
Deliver
Use assets/templates/perf-audit-report-template.md when a report is useful. Include the observed symptom, baseline, causal evidence, exact changes, comparable before/after results, correctness checks, trade-offs, and remaining unknowns. For source-only work, deliver hypotheses and a runnable measurement plan, not fabricated timings or a claim that the app is now faster.
Use references/00-principles-and-kpis.md for metric definitions and references/06-ci-regression.md for regression-control ideas. Treat package installation and build flags in older project configurations as things to verify against the installed SDK, not universal defaults.
FAQ
What does the optimising-expo-react-native-performance skill do?
Diagnose and fix measured startup, rendering, scrolling, memory, media, or network regressions in Expo React Native apps. Use for a reproducible performance problem or an explicit performance audit, not speculative library swaps or blanket memoisation.
How do I install optimising-expo-react-native-performance?
Run npx skills add https://github.com/tristanmanchester/agent-skills --skill optimising-expo-react-native-performance in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/optimising-expo-react-native-performance/ (personal) or .claude/skills/optimising-expo-react-native-performance/ (project).
Which AI agents can use optimising-expo-react-native-performance?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is optimising-expo-react-native-performance safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains optimising-expo-react-native-performance?
It is published by tristanmanchester in tristanmanchester/agent-skills. It has 92 recorded installs.
More from tristanmanchester/agent-skills
designing-beautiful-websites
tristanmanchester/agent-skills
Design, implement, or critique website and web-app UX/UI: information structure, user flows, responsive layouts, visual systems, content, and interaction states. Use for a requested interface or visual-design change; do not expand a small component edit into an unrequested product redesign.
reddit-readonly
tristanmanchester/agent-skills
Open the skill to read its SKILL.md instructions.
animating-react-native-expo
tristanmanchester/agent-skills
Open the skill to read its SKILL.md instructions.
styling-nativewind-v4-expo
tristanmanchester/agent-skills
Open the skill to read its SKILL.md instructions.
nextjs-framer-motion-animations
tristanmanchester/agent-skills
Open the skill to read its SKILL.md instructions.
react-native-skia
tristanmanchester/agent-skills
Open the skill to read its SKILL.md instructions.
Popular mobile skills
design-mobile-apps
designed-by-ai/skills
Design mobile app screens with Sleek, edit Sleek projects, and implement their designs in React Native or HTML.
ios-design
uizze.sh
Design and review iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native. Use for mobile app design, screen redesigns, navigation flows, typography, forms, keyboard and safe-area layout, and accessibility checks. Apply Apple Human Interface Guidelines and consult real product references through the optional Uizze connection.
vercel-react-native-skills
vercel-labs/agent-skills
React Native and Expo best practices for building performant mobile apps. Use when building React Native components, optimizing list performance, implementing animations, or working with native modules. Triggers on tasks involving React Native, Expo, mobile performance, or native platform APIs.
animate-expo
emilkowalski/skills
Build animations in React Native and Expo, making the decisions in the order that determines whether they feel right — should it animate, which thread it runs on, which properties, spring or timing, how the gesture hands off, how it degrades. Writes the implementation with Reanimated, Gesture Handler, Expo Router and expo-haptics. Use when animating anything in an Expo app, adding gestures, sheets, screen transitions, press feedback or haptics, or fixing motion that stutters on device. For web animation use animate.
xcode-project-setup
firebase/agent-skills
Safely modifies Xcode projects (.pbxproj) to add Swift Packages and link files. Use this skill whenever an iOS project needs dependencies installed (e.g. Firebase, Alamofire).
firebase-remote-config-basics
firebase/agent-skills
Manages Firebase Remote Config templates, feature flags, loading strategies, and SDKs (Android, iOS). Use when downloading/deploying remoteconfig JSON templates, managing version history/feature flags, setting in-app defaults, fetchAndActivate(), real-time listeners, or SDK setup. Don't use for Firebase Hosting, Auth, Firestore, Data Connect, Crashlytics, or App Hosting.