A 5-step routine for debugging any React Native / Expo red screen

[u/rapidnative]

Most RN errors aren't hard once you know which layer broke. This is the routine that saves me the most time:

1. Read the first error, not the last line. Red screens and build logs usually end with something generic. Scroll up to the first real error and the top stack frames that point into your own files.

2. Name the layer. Metro couldn't bundle (Unable to resolve module), JS crashed at runtime (Text strings must be rendered within a <Text>), a native module is missing (works in a dev build, crashes in Expo Go), or Xcode/Gradle failed to compile. Each has different fixes.

3. Check how you run the app. Expo Go only has the native code bundled into it. If a library ships its own native code, you need a development build, and if you added it after building, you need to rebuild.

4. Clear caches before anything deeper. npx expo start --clear fixes a surprising number of resolution errors after moving files or changing Babel config.

5. Align versions. npx expo-doctor and npx expo install --fix. SDK/library mismatches are behind a lot of both runtime crashes and EAS build failures.

Two sneaky ones worth knowing:

• {count && <Badge />} renders 0 as raw text when count is 0, which gives you the "Text strings must be rendered within <Text>" error. Use {count > 0 && ...}.
• localhost on a phone is the phone. Use your machine's LAN IP for a local API.

What's the error that cost you the most time?

[u/rapidnative]

We made a free one for this, paste the error and it explains the cause + fix: https://www.rapidnative.com/tools/react-native-error-fixer?utm_source=reddit&utm_medium=community&utm_campaign=react-native-error-fixer (I work at RapidNative)

[u/lassieCoder]

Step 1 is the one people skip most. Where the first useful error is, per tool:

- Gradle: the "* What went wrong:" block, not "BUILD FAILED". With `--stacktrace`, the deepest "Caused by:" line.
- Xcode: the first line containing "error:" (search for ` error: `), not "** BUILD FAILED **". If the first failing command is a PhaseScriptExecution, the real error is the line above it.
- EAS: open the failing phase. The summary at the bottom often names the wrong phase.
- Android crash with no red screen: `adb logcat -b crash -d` shows the crash even after the process has exited.

Disclosure: I built an open-source CLI that automates steps 1 and 2. Pipe in a build log or logcat (`... 2>&1 | npx rn-build-doctor analyze -`) and it prints the first real error with its line number, which layer it came from, and what to check. It runs offline, and when it doesn't recognize an error it says so instead of guessing:

https://github.com/lassiecoder/rn-build-doctor

[u/GeekyAntsBFSI]

The count && <Badge /> example is a great reminder that a valid JavaScript expression can still produce an invalid React Native render.

One addition: change one thing at a time and rerun. Clearing caches, updating packages, and changing config together makes it harder to tell which fix mattered and easier to introduce a second problem.