title: Weird behavior with Text and View
body: <p>I have a MapView, with a text above it:</p>
  
  <pre><code>&lt;View style={{ height: 310, alignItems: 'center', marginBottom: 10 }}&gt;
      &lt;MapView style={ { height: 300, width: 350, } } initialRegion= .. &gt;
  
      &lt;View style={{ height: 60, backgroundColor: 'rgba(255,255,255,0.7)' , flexDirection: 'column'}}&gt;
          &lt;View style={{flexDirection: 'row'}} &gt;
              &lt;Text style={{ fontSize: 20, color: 'black' }}&gt;  {this.state.title} &lt;/Text&gt;
          &lt;/View&gt;
          &lt;View style={{flexDirection: 'row'}}&gt;
              &lt;Text style={{ marginTop: 5, fontSize: 15, color: 'black', marginRight: 13}}&gt;  {this.state.startLoc.name} &lt;/Text&gt;
              &lt;Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}&gt;  {buildTimeString(new Date(this.state.startDate))} &lt;/Text&gt;
              &lt;Text style={{ marginTop: 5, fontSize: 15, backgroundColor: 'transparent', color: 'black' }}&gt;  {getDistanceOneToOne(this.state.startLoc, this.state.destinationLoc).distance} &lt;/Text&gt;
          &lt;/View&gt;
      &lt;/View&gt; 
  ..
  &lt;/View&gt;
  </code></pre>
  
  <p>Sometimes it displays the two texts (lines) right, but most of the times it displays them wrong (bot above each other):</p>
  
  <p><a href="https://i.stack.imgur.com/NxGrt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NxGrt.png" alt="enter image description here"></a></p>
  
  <p>What could be the issue?</p>