debug-react-native_skill
6
GitHub Stars
1
Bundled Files
2 months ago
Catalog Refreshed
4 months ago
First Indexed
Readme & install
Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.
Installation
Preview and clipboard use veilstrat where the catalogue uses aiagentskills.
npx veilstrat add skill snakeo/claude-debug-and-refactor-skills-plugin --skill debug-react-native- SKILL.md15.5 KB
Overview
This skill helps you debug React Native issues systematically across JavaScript, native, and bundler layers. It provides a four-phase workflow: gather diagnostics, classify the error, apply targeted fixes, and verify plus prevent regressions. Use it to resolve Metro, native module, build, Hermes, bridge, and New Architecture problems quickly.
How this skill works
I inspect error patterns and collect environment data (react-native info, Metro status, device logs, pod/gradle state). I classify problems into categories like JavaScript, build, runtime/native, Metro, dependency/linking, Hermes, or New Architecture. For each class I suggest concise diagnostic commands, specific fixes (from cache resets to Pod/Gradle repairs), and a verification checklist. I finish with prevention steps to reduce reoccurrence.
When to use it
- You see a red screen with stack traces (e.g., Invariant Violation, Unable to load script).
- Metro bundler fails, port conflicts, or stale cache produce 'Unable to load script'.
- Native module errors like 'Native module cannot be null' or CocoaPods/Gradle build failures.
- Hermes bytecode or stack mapping issues appear in crash logs.
- Bridge communication or New Architecture (TurboModules/Fabric) migration problems occur.
Best practices
- Collect full stack traces and environment outputs before changing code.
- Start with npx react-native doctor and npx react-native info to baseline the environment.
- Use the 'nuclear' clean sequence only after targeted fixes fail: stop Metro, clear caches, reinstall, rebuild.
- Verify fixes on both platforms and run linter/TypeScript checks to catch regressions early.
- Lock native dependency versions, keep lockfiles in git, and document native changes for teammates.
Example use cases
- Fixing 'Unable to load script' by killing the process using port 8081 and restarting Metro with --reset-cache.
- Resolving 'Native module cannot be null' by running pod deintegrate && pod install, then rebuilding the iOS app.
- Recovering from Gradle build failures by cleaning ./gradlew clean, removing .gradle caches, and refreshing dependencies.
- Diagnosing Hermes crashes by toggling hermesEnabled, cleaning bytecode caches, and reproducing with Hermes disabled.
- Debugging New Architecture issues by confirming newArchEnabled, reinstalling pods, and checking module compatibility.
FAQ
Provide the full error message and stack trace, platform(s) affected, React Native and Node/npm versions, recent dependency updates, and whether Hermes or the New Architecture is enabled.
When is the 'nuclear' clean required?
Use it after targeted diagnostics fail or when caches, pods, and Gradle state appear corrupted; it removes node_modules, Metro caches, Pods, and Gradle caches then reinstalls everything.
