debug:react-native

Diagnose React Native issues across iOS and Android with a four-phase workflow.

9|1|Updated Jan 12, 2026
One-click install
npx skills add https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin --skill debug-react-native
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: debug:react-native
Source: https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin/tree/main/plugins/debug-and-refactor/skills/debug-react-native
Command: npx skills add https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin --skill debug-react-native

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a systematic, repeatable approach to diagnosing and fixing React Native issues that block mobile app development across iOS and Android.

Core Features & Use Cases

  • Four-Phase Debugging Workflow: Information gathering, error classification, targeted resolution strategies, and verification.
  • Platform Coverage: Applies to iOS and Android build errors, red screen crashes, Metro bundler failures, native module linking, and Hermes bytecode issues.
  • Tooling Guidance: Recommends commands and checks (RN doctor, RN info, starting Metro, running builds) to quickly isolate root causes.
  • Use Case: Imagine a failing RN app with a red screen and a Metro port conflict; follow the workflow to identify whether the issue is a mislinked native module or a cache problem, then apply the recommended fixes and re-test on both platforms.

Quick Start

Run the RN debugging workflow:

  • Check environment health with npx react-native doctor
  • Gather version and environment details with npx react-native info
  • Verify bundler and cache with lsof -i :8081 and npx react-native start --reset-cache
  • Build and run on iOS and Android with npx react-native run-ios and npx react-native run-android

Frequently Asked Questions about debug:react-native

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug a React Native red screen crash or Metro bundler failure?

Diagnose React Native native module linking problems by running `npx react-native doctor` to check environment health and `npx react-native info` to gather version details, systematically isolating whether the issue stems from mislinked modules or platform configuration errors.

How do I fix Hermes bytecode issues in my React Native application?

Fix Hermes bytecode issues by following a structured diagnosis workflow that classifies the error and applies targeted resolution strategies, utilizing commands like `npx react-native start --reset-cache` to clear corrupted bytecode and verify correct bundler execution.

What is the best way to diagnose cross-platform build failures in React Native?

Resolve React Native Metro port conflicts by checking the bundler status with `lsof -i :8081` and restarting with `npx react-native start --reset-cache`, allowing the structured debugging workflow to identify if the root cause is a cache problem or a mislinked native module.

Does this React Native debugging workflow support both iOS and Android environments?

Yes, the React Native debugging workflow supports both iOS and Android environments, providing platform coverage for build errors, native module linking, and red screen crashes to ensure repeatable diagnosis and resolution across mobile platforms.