title: FlexDirection row: Keep title in the center relative to parent, while having an icon beside it
body: <p>I am trying to achieve the following result using flexbox in react native styles:</p>
  <p><a href="https://i.stack.imgur.com/DHP3U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DHP3U.png" alt="desired result" /></a></p>
  <p>The title is in the center relative to the whole container, while being next to the icon. One thought that comes to mind is to use flexbox with flexDirection set to 'row'.
  But the effect is what you would expect. Every element has its own &quot;subview&quot; and shares a parent container, thus it is not possible to center the child relative to parent container. This is what I am getting instead of the desired result:</p>
  <p><a href="https://i.stack.imgur.com/ICzMW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ICzMW.png" alt="enter image description here" /></a></p>
  <p>Certainly, I can align the elements to the left, and eyeball it with padding, but I would rather use a method that would give me a consistent result across all device screens. Is there a way to achieve the desired result using flexbox? If no, what can I use instead?</p>
  <p>Here is the code:</p>
  <pre><code> &lt;View style={styles.phraseContainer}&gt;
     &lt;View style={styles.flagContainer}&gt;
       &lt;Flag code={'US'} style={styles.flag} /&gt;
     &lt;/View&gt;
     &lt;View style={styles.phraseTextContainer}&gt;
       &lt;Text style={styles.phraseText}&gt;
         {props.data[props.index].phrase}
       &lt;/Text&gt;
     &lt;/View&gt;
   &lt;/View&gt;
  </code></pre>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    phraseContainer: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
    },
    flagContainer: {
      flex: 1,
    },
    flag: {
      width: 30,
      height: 30,
    },
    phraseTextContainer: {
      flex: 1,
    },
    phraseText: {
      fontSize: 25,
    },
  });</code></pre>
  </div>
  </div>
  </p>