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

To give the React Native Inspector a run through, we'll need something to inspect. Fire up any React Native app in the iOS Simulator and then press Command + D on your keyboard just like you would to launch Debug JS Remotely, except this time click...