Developer pack
Claude Skill
React Native Best Practices
Reviews React Native / Expo code against the rules that matter on mobile — list performance, animations, navigation, native modules.
What it does
Audits and improves React Native / Expo code against a prioritized rule set: list and scroll performance (the number-one mobile pain), Reanimated-based animation on the UI thread, navigation, UI patterns, and monorepo / native-module configuration. Catches the patterns that jank on a real device even when they look fine in the simulator.
When to use
- ✓Building React Native or Expo apps and want them fast by default
- ✓Lists or scrolling drop frames on device
- ✓Implementing animations or configuring native modules / fonts in a monorepo
When not to use
- ✗It's a web React app — use the React performance reviewer instead
- ✗A non-React-Native mobile stack (native Swift/Kotlin, Flutter)
Install
Download the .zip, then unzip into your Claude skills folder.
mkdir -p ~/.claude/skills
unzip ~/Downloads/react-native-best-practices.zip -d ~/.claude/skills/
# Restart Claude Code session.
# Skill is now available — Claude will use it when relevant.SKILL.md
SKILL.md
---
name: react-native-best-practices
description: Use when writing, reviewing, or optimizing React Native / Expo code. Triggers on "React Native", "Expo", "list performance", "FlatList lag", "Reanimated", "mobile animation stutter", "native module config".
---
# React Native Best Practices
Mobile performance is mostly about two things: what renders in long lists, and which thread your animations run on. Get those right and most jank disappears. And always judge performance on a real, low-end device — the simulator lies.
## Review in priority order
1. **List performance (critical).** Long lists are the number-one source of jank. Use a virtualized list built for it (e.g. FlashList) over a plain ScrollView; give items stable keys; keep per-row renders cheap and memoized; avoid inline functions/objects that re-create every render. Most "the app is slow" reports are a list rendering everything at once.
2. **Animation (high).** Run animations on the UI thread with Reanimated, not by setting state on the JS thread every frame — JS-thread animation stutters the moment the thread is busy. Drive gestures and transitions off the UI thread.
3. **Navigation (high).** Lazy-load screens; don't mount the whole stack up front; keep heavy work off the transition.
4. **UI / rendering / state (medium).** Memoize expensive subtrees, derive instead of duplicating state, and keep re-renders local.
5. **Monorepo & native config (low-medium).** Get fonts, native modules, and Metro/monorepo resolution configured correctly — these cause confusing build-time and runtime issues when wrong.
## Method
Profile on a real low-end Android device, not just iOS simulator. Fix the list path first; re-measure before touching anything lower-priority.
## Anti-patterns
- A `ScrollView` (or unvirtualized list) rendering hundreds of items
- Re-rendering every row on each state change; inline props that break memoization
- JS-thread-driven animations instead of Reanimated on the UI thread
- Judging performance only in the simulator
- Mounting every navigation screen eagerly
Example prompts
Once installed, try these prompts in Claude:
- Our RN product list drops frames when scrolling fast. Review it for list-performance issues and fix them.
- These Expo screen animations stutter on Android. Review them and tell me what to change.