Most bugs are visible if you know where to look.
Direct answer
Debug React Native by reading the red error screen, adding console.log, using React DevTools and the developer menu, and restarting Metro with a cleared cache if things act strangely. Check the terminal output as well as the device.
Tools
- Logs:
console.log(value)shows in the terminal running your dev server. - Developer menu: shake the device or press
min the terminal. - React DevTools: inspect component props and state.
- Error overlay: read the top line and the first file in your code.
Common fixes
npx expo start -c # clear Metro cache
rm -rf node_modules && npm install
Frequent problems
| Problem | Likely cause |
|---|---|
| "Text strings must be rendered within Text" | a string outside a Text component |
| Blank screen | error during render, check logs |
| Cannot connect | phone and computer on different networks |
| Stale code | cache, restart Metro |
Where Teyro fits
Teyro's React Native for Beginners course turns this into short lessons you can play in a few minutes a day. It has 80 lessons, and you can start free.
The bottom line
Read the error, find your file, change one thing, reload.
