What is the most performant way for dynamic styling in React-Native? : <p>
In React-Native, you can use <a href="https://facebook.github.io/react-native/docs/stylesheet" rel="noreferrer">Stylesheet</a> to create css-like stylesheets. The main reason of using <code>styleshee.create</code> in favor of plain js-objects is increased performance. However, you often might want to style components dynamically, often based on their props. I basically found three approaches of doing this:</p>

<p><strong><em>Note for the following examples:</strong> Consider <code>const styles ...</code> to be declared outside of the Component, as it's a common pattern and you might want to share styles between different Components. Consider everything below the tree dots as part of the render function.</em></p>

<ol>
<li><p>Using an array of styles:</p>

<pre><code>const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
return &lt;View style={[styles.viewStyle, {color: this.props.color}]} /&gt;
</code></pre></li>
<li><p>Using Stylesheet.flatten:</p>

<pre><code>const styles = StyleSheet.create({viewStyle: {backgroundColor:'red'}})
...
const flattenedStyle = StyleSheet.flatten(styles.viewStyle, {{color: this.props.color}})
return &lt;View style={flattenedStyle} /&gt;
</code></pre>

<p></p></li>
<li><p>Using a function to create the stylesheet:</p>

<pre><code>const styles = (color) =&gt; StyleSheet.create({
    viewStyle: {
        backgroundColor:'red',
        color: color
        }
    })
...
const style = styles(this.props.color).viewStyle
return &lt;View style={style} /&gt;
</code></pre></li>
</ol>

<p>I am wondering which approach is the best regarding to performance, or if there even is another, more performant way? I think Option 2 and 3 are no way to go at all, because dynamically creating new stylesheets on prop-changes undermines the whole purpose of stylesheets. I am happy for any thought or hints on this subject!</p>
