React Native Best Practices
Callstack's React Native performance guide: frame rate, startup time, bundle size, memory, re-renders, lists and animation.
$ npx skills add https://craftwork.design/skills/react-native-best-practices -a claude-code -y
Installs into .claude/skills/react-native-best-practices. Add -g for every project.
SKILL.md
Overview
Performance optimization guide for React Native applications, covering JavaScript/React, Native (iOS/Android), and bundling optimizations. Based on Callstack's "Ultimate Guide to React Native Optimization".
When to Apply
Reference these guidelines when:
- Debugging slow/janky UI or animations
- Investigating memory leaks (JS or native)
- Optimizing app startup time (TTI)
- Reducing bundle or app size
- Writing native modules (Turbo Modules)
- Profiling React Native performance
- Reviewing React Native code for performance
Security Notes
- Treat shell commands in these references as local developer operations. Review them before running, prefer version-pinned tooling, and avoid piping remote scripts directly to a shell.
- Treat third-party libraries and plugins as dependencies that still require normal supply-chain controls: pin versions, verify provenance, and update through your standard review process.
- Treat remote chunk loading as first-party artifact delivery only. Prefer app-bundled chunks or signed CI release manifests; hosted chunks must come from trusted HTTPS origins you control and be pinned to the current app release.
More mobile & native
- Native-Feeling Mobile Web
Concrete CSS and meta fixes that make a web app feel native on phones: stuck hover, tap flash, dvh, input zoom, safe areas and overscroll.
Emil KowalskiMobile & native45.6K - Animate Expo
Animation decisions for React Native and Expo: Reanimated or Animated, springs, keeping motion off the JS thread, press states and haptics.
Emil KowalskiMobile & native45.6K