Get CSS property values from a component's "style" prop
<p>I'm writing a React Native component for a library and I want users to be able to style it using the <code>style</code> property, just like <code>React.View</code> and other built-in components.</p>

<p>However, since my component is actually made up of a few nested views, I need to do some calculations to figure out what styling to put on the <em>inner</em> ones. For example, I might need to adjust the sizing of an image based upon the thickness of a border around it, or adjust a highlight color based upon the given text color, or in some other way infer some piece of styling from another piece of styling.</p>

<p>To do this, I need to be able to extract the actual CSS properties (like <code>borderWidth: 2</code> or <code>backgroundColor: 'pink'</code>) out of whatever gets passed as the <code>style</code> prop. This is fine as long as it comes as a plain object, but it may also be the result of a call to <a href="https://facebook.github.io/react-native/docs/stylesheet.html" rel="noreferrer"><code>React.StyleSheet.create</code></a>. This seems to be an opaque object with all selectors simply mapped to numeric IDs.</p>

<p>How can I resolve these and get the actual CSS properties, in order to do anything more complicated with them than simply passing them straight on to a <code>View</code>?</p>