How do i debug styling in react native web?

In the picture attached how do i know what is what because everything is gibbersish.

I just want to know is there a way to find the filename responsiable for the styling ??

Screenshot 2020-11-24 at 12.48.58 PM

Short answer: no, not that way.

Use the React developer tools to figure out what is being applied to what.

React Native doesn’t use CSS and React Native Wed is a direct port, so in that respect it doesn’t work like a standard HTML/CSS webapp. It’s a trade-off (imo a bad one) and it makes the element inspector fairly useless for debugging styling.

1 Like

I completely forgot that the react dev tools will also work with react native. Thanks again

You are right, styling react native for web is still a big pain. I used to hate CSS but now I really miss it.