React Native · Mobile UI at native speed
How do you debug a React Native app?
Short answer
Use React Native DevTools for the JS debugger, console and React tree, plus platform tools for native logs and layout. Reproduce with a release build when the bug only appears in production.
Debugging spans two runtimes. JavaScript errors and React state live in the JS runtime, while layout, native modules and crashes live on the platform side. Knowing which side owns the symptom saves time.
Tools and what they answer
- React Native DevTools: breakpoints, console, React component tree and props
- Metro logs: bundling errors and startup failures
- Xcode console and Instruments: iOS native logs, memory and CPU
- Android Logcat and Studio profiler: native crashes, layout and threads
- Network inspection through your own request logging or a proxy
export async function loadProfile(id: string) {
if (__DEV__) {
console.time("loadProfile");
}
try {
return await api.getProfile(id);
} finally {
if (__DEV__) {
console.timeEnd("loadProfile");
}
}
}A bug that only reproduces in release is often caused by a development-only assumption: a different JS engine setting, missing __DEV__ guards, minification, or a native build configuration. Test a release build early rather than at the end of the cycle.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1How do you debug a bug that only happens in release?
- 2Where do you see native Android logs?
- 3How do you inspect network requests?
- 4What is the difference between the JS and native debuggers?
Say it in the interview
I first work out whether the issue is in JavaScript or native. JavaScript state and render problems go through React Native DevTools, Metro logs and breakpoints, while layout, crashes and native modules go through Xcode or Logcat. If it only happens in release, I reproduce with a release build, because __DEV__ differences and native configuration are common causes.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live React Native mock interview and get scored feedback on depth, clarity and confidence.