How can I get overflow errors visually displayed in React Native?

Question

I'm looking for a library in React Native that is similar to Flutter's development experience in which if an element overflows, it gives me tons of warnings along with black and yellow strips across the overflowed area.

Is there anything similar present for React Native?
Are there any 3rd party libraries/development tools that can achieve a similar thing?

I've been stuck on such an issue at least 3 times and wasted hours worth my time debugging UI overflow issues, wondering why content isn't getting rendered. It would be great to know if there are tools that I can use to prevent this mistake.

Answer 1

https://github.com/jhen0409/react-native-debugger

You can use this

Answer 2

@Kaushik, thanks for your answer. But it doesn't work well for me. It throws me this error:

WebSocket connection to 'ws://localhost:8081/debugger-proxy?role=debugger&name=Chrome' failed:

Answer 3

By visually displayed overflow error in Flutter, I mean this:
https://www.sololearn.com/post/1777490/?ref=app

Answer 4

👆 I want to know if there is something similar in React Native.

Answer 5

It's time for you to learn how to use the debugging tools in browsers. You don't need any installation as it comes along with the browsers. Learn how to add a breakpoint and use the browsers console app