Mastering React Native

Inspecting and debugging styles

Up to this point, we have reviewed much of what React Native offers to style and layout your applications. One thing we've glossed over is how to debug your style rules in React Native. In the Web world, we often refer to this as inspecting styles (a reference to Chrome's DevTools that allow you to inspect any CSS properties applied to an element). Unfortunately, this is one area where React Native currently falls a bit short. You cannot use Chrome's inspector to edit or view each element's style properties. However, React Native does offer a built-in inspector. It's very basic when compared to Chrome's inspector, but for the moment it's one of the few tools available to developers.

Using the React Native Inspector ...