title: SafeAreaView not filling the phone head area
body: <p>I am developing a react native app for iOS.  Included SafeAreaView component with a background color but the top part of the iPhone X is leaving an unfilled space with white background. </p>
  
  <p>I have removed the SafeAreaView and I still see a white area at the top edge that remains unaffected by filling with a background color except when I load a background image. Not sure why the SafeAreaView is not covering the entire SafeArea at the top of the phone; it goes only 50% way.</p>
  
  <pre><code> &lt;Fragment&gt;
  
        &lt;SafeAreaView style={{ flex: 0, backgroundColor: '#006600' }}  /&gt;
        &lt;SafeAreaView style={{ flex: 1, backgroundColor: '#006600' }} &gt; 
        &lt;StatusBar barStyle='light-content' /&gt;
        &lt;View style={styles.container}&gt;
          &lt;Header 
            headerText={'My Naija Calculator'} 
            backgroundColor = {'#006600'}
            color = { '#fff'}
            /&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/cwl6O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cwl6O.png" alt="enter image description here"></a></p>