How to view dimensions (height/width etc.) of an element

[jordanmkoncz]

I've been using react-native-debugger without any issues for a while now, but one thing I haven't been able to figure out is how to view the dimensions (height/width etc.) of an element. When I click on an element in the hierarchy, the side panel shows the element name, props, and applied styles, but I can't find any way to see the actual rendered dimensions of the element. This is something that was possible to view when using the built in react-native inspector.

React Native version: 15.4.0
Platform: iOS
Is real device of platform: No, Simulator
Operating System: macOS

[thurt]

curious about this as well. chrome devtools calls this "computed" styles when inspecting regular web css

[jhen0409]

Currently we can change this line to keep the built-in inspector contents, I may try to PR for show / hide the contents.

The goal is show the information in react-devtools, I think it's possible to make plugin for RN on here.

[jordanmkoncz]

@jhen0409 Yeah if there was some way to view the built in react-native inspector that shows this information already, that would be great.

[jhen0409]

I simply implemented it in facebook/react-devtools#590, hope this feature can be landed in the future. :)

[jordanmkoncz]

@jhen0409 Okay great, thanks for that. I guess now we just wait for your pull request to be included in an upcoming release.

[jhen0409]

Released as v0.6.4. 🎉

[jordanmkoncz]

@jhen0409 How do you view the dimensions? I've got the latest version but I'm not sure how to see the dimensions.

[jhen0409]

@jordanmkoncz you need ensure react-devtools-core version is ^2.1.0 in your RN project (use npm list react-devtools-core check it), it's dependency of react-native. (starts with v0.43)

Inspect the measurable nodes, it should shown on React Native Style Editor.

[jordanmkoncz]

@jhen0409 Ah I see, my project is currently using React Native v0.41.2. I guess I'll have to upgrade to the latest version then! Cheers.