Debug React Native on a real device when you can: Metro logs, the in-app developer menu, React DevTools, and a network inspector. Redbox/yellowbox (LogBox) show JS errors. Jank usually comes from JS work, images, or non-virtualized lists — profile before rewriting the stack.
This React Native cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.
Quick reference
- Metro: The bundler terminal shows
console.logand syntax errors. - Dev menu: Shake device or Cmd/Ctrl+D / Cmd/Ctrl+M. Enable Fast Refresh.
- LogBox: Redbox is a fatal JS error. Read the first frame that is your code.
- React DevTools: Inspect props/hooks. Look for unexpected re-renders on list items.
- Network: Flipper, React Native Network Inspector, or Charles/Proxyman for TLS APIs.
- Native: Xcode/Android Studio logs for permission and Gradle/Pod failures.
- Hermes: Enable sampling profiler for JS CPU. Source maps matter for production crashes.
- Perf:
FlashList/getItemLayout, memoize items, shrink images, avoid inline styles that allocate every render if profiling says so.
Copy-paste examples
Debug-friendly error boundary pattern
Log the error once, show a retry UI, and do not swallow it in an empty catch around fetch.
export function logError(where, err) {
console.error(`[${where}]`, err?.message ?? err);
}
export async function loadOrThrow(url) {
const res = await fetch(url);
if (!res.ok) {
const err = new Error('HTTP ' + res.status);
logError('loadOrThrow', err);
throw err;
}
return res.json();
}Common mistakes
- Debugging only on an iOS simulator and shipping Android keyboard/back bugs.
- Commenting out the only
console.errorthat explained a crash. - Chasing native “performance” while a
console.logof a 10k array runs every render. - Ignoring Metro cache issues —
npx react-native start --reset-cacheis a valid step after dependency changes.
FAQ
- Why is Fast Refresh not updating? Sometimes you edited a file Metro is not watching, or a native module changed and needs a rebuild. Reload the app; rebuild if native code changed.
- Release vs debug? Release minifies JS and strips dev checks. Reproduce with a release build when the bug is “only in TestFlight.”
- How do I read a production crash? Upload source maps to your crash tool (Sentry, Crashlytics). Native crashes need symbolication in Xcode/Play.
Related React Native cheat sheets
Build with this stack
When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds mobile app development and also sells ready-made source code. Request a quote and tell us the stack.
Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.