title: Why are these React components overlapping?
body: <p>I rendered two similar components. Each component has an icon and text, and each of them should not be overlapping. What's wrong with my styling?</p>
  
  <pre><code>    import Icon from "react-native-elements/src/icons/Icon";
  
  &lt;TouchableOpacity onPress={_ =&gt; playSound(audio)} style={{
    flexDirection: 'row',
    flexGrow:1,
    flex: 1
  }}&gt;
    &lt;View&gt;
      &lt;Icon name="volume-up" color={PRIMARY_BG} size={24}/&gt;
    &lt;/View&gt;
    &lt;View&gt;
      &lt;Text style={{
        flexGrow: 1,
        fontSize: 8, 
        backgroundColor: GRAY
     }}&gt;
       [{locale}]{this.props.pronunciation[locale][0]}
      &lt;/Text&gt;
    &lt;/View&gt;
  &lt;/TouchableOpacity&gt;
  </code></pre>
  
  <p>Here's the output:</p>
  
  <p><img src="https://i.imgur.com/fFO6aGc.png=300x" alt="inline" title="Title"></p>
  
  <h1>Parent container style</h1>
  
  <pre><code>headItemContent: {
      flex: 3,
      flexDirection: 'row',
      justifyContent: 'space-between'
  },
  </code></pre>