React Native flex-box align icon and text
<p>In a <code>react native</code> app, I use <code>'react-native-vector-icons/MaterialIcons'</code>.</p>

<p>I try to a <code>&lt;</code> button with some text. Unfortunately, the <code>&lt;</code> icon isn't aligned center with the text. The text is on same line as the <code>&lt;</code>  but bottom-aligned instead of middle-aligned. </p>

<p>I didn't have <code>flex: 1</code>. The code has been updated.</p>

<p>My code</p>

<pre><code>    &lt;TouchableOpacity style={styles.navBarLeftButton}&gt;
       &lt;Icon name="chevron-left" /&gt;
       &lt;Text style={styles.buttonText}&gt;My Button&lt;/Text&gt;
    &lt;/TouchableOpacity&gt;
</code></pre>

<p>My styles</p>

<pre><code>    navBarLeftButton: {
      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'flex-start'
      width: 100,
      paddingLeft: 8
    }

    buttonText: {
      color: 'rgba(255,255,255,0.70)',
      fontSize: 14
    }
</code></pre>