Debugging React Native: Finding and Fixing Errors

Errors are part of programming – what matters is finding them quickly. This chapter covers the most important debugging tools for React Native, both in VS Code and in WebStorm/PhpStorm.

console.log() – the classic

Just like in the browser, console.log() works in React Native. Output appears in the terminal where npx expo start is running AND in the app's developer menu.

In our real screens/ProductDetailScreen.js, you could add a log call like this to watch the loading process:

function ProductDetailScreen({ route }) {
  const { productSku } = route.params;
  console.log('Opening product with SKU:', productSku);
  // ...
}

In the Expo Go app (or your development build), open the developer menu by shaking the device ("shake gesture") or, in a simulator/emulator, via keyboard shortcut: Cmd+D in the iOS Simulator, Cmd+M (Mac) or Ctrl+M (Windows/Linux) in the Android Emulator. There you'll find, among others, "Reload", "Open JS Debugger", and "Toggle Performance Monitor".

Debugging in VS Code

Have the "React Native Tools" extension installed (see chapter 2)
In the app's developer menu, choose "Open JS Debugger" – automatically opens a debug window in Chrome or VS Code
Alternatively: in VS Code, create a launch.json with type reactnative and press F5 to start directly with breakpoints in .js files
Set breakpoints the usual way by clicking left of the line number

Debugging in WebStorm/PhpStorm

Create a new configuration via Run > Edit Configurations > + > React Native
Start this configuration with the debug button (bug icon) instead of the regular run button
Set breakpoints by clicking left of the line number – works identically to PHP debugging with Xdebug, which you already know from Magento work
The "React Native Console" tab (see chapter 2) also shows all console.log() output directly in the IDE, without switching to the terminal

Common error messages and what they mean

Error message	Most common cause
"Text strings must be rendered within a <Text> component"	loose text outside a `<Text>` – see chapter 4, the most common beginner trap
"Objects are not valid as a React child"	a whole object instead of a string/number was placed inside `{{...}}` in JSX, e.g. `{{product}}` instead of `{{product.name}}`
"Network request failed"	usually a wrong API URL, no internet access on the test device, or (with local Magento) using "localhost" instead of your computer's actual IP address, since the phone would otherwise resolve "localhost" to itself
"Invariant Violation"	a generic React-Native-internal error, usually with specific extra text stating the real reason (e.g. a missing native library)

Performance Monitor

In the developer menu, "Toggle Performance Monitor" enables a small overlay showing the current frame rate (FPS) – comparable to Chrome DevTools' "Rendering" performance overlays. If the JS frame rate drops noticeably below 60 while scrolling, that's often a sign of too many simultaneously rendered list items (see FlatList, chapter 9) or overly expensive calculations directly in the render path.

Tipp: The fastest first debugging step is almost always: reload the app from the developer menu ("Reload"). Many seemingly mysterious errors after code changes are just a stale JavaScript bundle cache, which a simple reload clears up.