Goodbye to The Red Screen Error in React Native
New LogBox debugging experience in React Native version 0.63
If you are a react native developer, then at least once in your lifetime you have stumbled upon this google image search. Scary, isn’t it? 😱
Yes! These are the famous Red Screen Error in react native. Every mistake you made in the code will end up like these.
With the forthcoming release of React Native version 0.63, it includes tons of new features and bug fixes. But what grabbed my attention is the new debugger screen called LogBox. The earlier version had a messy looking debugger screen with all-red. But now, the UI looks way more lucid and sleek.
The team was working on it since React Native version 0.62.0.-rc.1 where the new LogBox was introduced as an opt-in feature. Anyone currently sitting on React Native version 0.62 and wants to experience this feature can add require('react-native').unstable_enableLogBox() to your index.js file.
New LogBox screen consists of various components helping you to have more streamlined debugging experience in react native.
- At the top, it consists of log navigation which helps to navigate to different warnings/errors in case we have more than one.
- Below the navigation, it has a reasonable explanation for corresponding warning/error.
- A source view shows an exact line(most of the cases) in the source code which triggers the warning/error. Tapping on file name shown below opens up it in the editor.
- Component and Call stack trace shown provides more insight into the warning/error.
- At the bottom of the screen, one button for dismissing and other for minimising the LogBox screen.
I like the source view which helps me to pinpoint, what exactly is causing the problem and directly open that file in a single tap. 👌
At the time of writing this story, React Native version 0.63 hasn’t released but, you can still have your hands on upcoming features. They have opened a release candidate to help them test it before the stable release.
Create a new project using the release candidate version.
npx react-native init RN063 --version 0.63.0-rc.0Install dependencies and run project.
Let’s use simple console.warn("I'm a warning.") and console.error("I'm an error") and see how they appear in new LogBox.
Let’s make a few more changes and see how a more detailed LogBox looks like.
I have seen a few instances where red screen error still pops out of nowhere. But I hope stable release would cater to such cases.
I would not suggest you upgrade your existing apps to this version until a stable release is out.
That’s all folks! Happy Coding!!
If you like this story, save it on medium and share among your react-native community. 👏 👏
