Skip to main content

Debugging React Native Apps

· 4 min read
Beniamin Marcu
Full Stack Developer
Last updated on May 6, 2026

React Native debugging changed a lot since Flipper was the default answer. In modern React Native apps, the first tool to open is React Native DevTools. Use native tooling from Xcode and Android Studio when you need to debug the platform layer, and keep Flipper only for older apps or custom plugin workflows that still depend on it.

Quick Answer​

For current React Native apps:

  1. Start Metro with your normal command.
  2. Open the Dev Menu from the simulator or device.
  3. Choose "Open DevTools" or press j in the React Native CLI.
  4. Use React Native DevTools for console logs, breakpoints, React components, profiler, memory, and supported network inspection.
  5. Use Xcode, Android Studio, and Logcat for native crashes, permissions, signing, Gradle, pods, and platform performance.

Do not copy old Flipper Gradle and Podfile snippets into a new React Native app unless you are maintaining a legacy setup that explicitly requires Flipper.

React Native DevTools​

React Native DevTools is the modern built-in debugger for React Native. It is based on Chrome DevTools concepts, but it is shipped and supported with React Native instead of relying on an external Chrome debugging frontend.

Use it for:

  • console logs and runtime evaluation;
  • JavaScript breakpoints;
  • React component inspection;
  • React Profiler;
  • memory snapshots;
  • network inspection where supported by your React Native version.
yarn start

Then press:

j

You can also open the Dev Menu and select "Open DevTools".

Mega Bundle Sale is ON! Get ALL of our React Native codebases at 90% OFF discount 🔥

Get the Mega Bundle

Debugging Network Requests​

For API bugs, start with the Network panel when your React Native version supports it. It helps you inspect fetch, XMLHttpRequest, and image requests without adding logging code to every service call.

When the request does not appear in DevTools:

  • confirm the app is running a supported React Native and Hermes setup;
  • check whether a custom networking library bypasses the captured APIs;
  • add temporary logging around the request boundary;
  • inspect backend logs and Firebase Functions logs for server-side errors.

For Firebase-heavy apps, also check Firestore rules, Storage rules, App Check, missing indexes, and function region settings. A client-side "network failed" message often hides a backend permission or billing issue.

Debugging Native Issues​

React Native DevTools is not meant to replace native tools. Use:

  • Xcode for iOS build settings, pods, signing, native breakpoints, memory graph, and device logs;
  • Android Studio and Logcat for Gradle, permissions, native crashes, emulator state, and Java/Kotlin logs;
  • the React Native release build debugging docs when the bug only happens in a production build.

If a crash happens before the JavaScript bundle loads, DevTools will not help much. Start from the native logs.

What About Flipper?​

Flipper is still useful in some legacy React Native projects, especially when a team has custom Flipper plugins or an older app that was built around that workflow. But it should not be presented as the default setup for new React Native apps.

If you already have Flipper in an older app:

  1. Keep it isolated to debug builds.
  2. Confirm it does not block React Native upgrades.
  3. Remove obsolete Gradle and Podfile snippets when migrating to current React Native versions.
  4. Prefer React Native DevTools for JavaScript and React-level debugging after the app is upgraded.

Practical Debugging Checklist​

When a React Native screen is broken, use this order:

  1. Reproduce the bug with a clean Metro cache only if needed.
  2. Check LogBox for the first real error.
  3. Open React Native DevTools and inspect console output.
  4. Add a breakpoint at the failing code path.
  5. Check network requests and backend logs.
  6. Check native logs if the app crashes or permissions behave differently.
  7. Create a minimal repro before changing shared infrastructure.

For generated Instamobile apps, also verify that the source app, release app, and shared core code are aligned. A bug fixed only in a release folder can be overwritten the next time the generator produces a release.

Useful References​

Looking for a custom mobile application?

Our team of expert mobile developers can help you build a custom mobile app that meets your specific needs.

Get in Touch

Conclusion​

The best React Native debugging setup is simpler than it used to be. Start with React Native DevTools, use native tools for platform problems, and keep Flipper only when a legacy project has a specific reason to depend on it.