title: React Native Flex Items Alignment
body: <p>I need to arrange three items in row one on the leftmost and two others in the center. How I can achieve that?</p>
  
  <p><a href="https://i.stack.imgur.com/e1inv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e1inv.png" alt="enter image description here"></a></p>
  
  <p>I have already tried the following:</p>
  
  <pre><code>&lt;View style={{flexDirection: 'row', justifyContent: 'center'}}&gt;
  &lt;View style={{flexDirect: 'row', justiftContent:'flex-start'}}&gt;
  &lt;Text&gt;item1&lt;/Text&gt;
  &lt;/View&gt;
  
  &lt;View&gt;
  &lt;Image source={calendar} style={{height: 30, width:30}} /&gt;
  &lt;/View&gt;
  
  &lt;View&gt;
  &lt;Text&gt;item2&lt;/Text&gt;
  &lt;/View&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p>but this code center aligns all the items, I get something like this:</p>
  
  <pre><code>     ------------------------------|
      |      item1,image,item2       |
      |                              |
      |______________________________|
  </code></pre>
  
  <p>I have tried space-between as well, but it aligns item2 on the rightmost side.</p>
  
  <pre><code>     ------------------------------   
      |item1,      image,      item2 |
      |                              |
      |______________________________|
  </code></pre>