title: How to use react-navigation's SafeAreaView and avoid the space on the iPhone X?
body: <p>React Native introduced a while back the <strong>SafeAreaView</strong> component and it's now available as part of the react-navigation package which works awesome and solves the issue on iPhone X leaving space for the Home Indicator (bottom bar).</p>
  
  <p>The one thing I can't figure out yet is how to change its style so it will "match" the rest of the page layout, no matter what I do it stays white and also add a bit of shadow for the element that is next to it from the top.</p>
  
  <p><strong>Here are some screenshots:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/I0eN1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/I0eN1.png" alt="SafeAreaView adds a white background"></a></p>
  
  <p><a href="https://i.stack.imgur.com/GYJQp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYJQp.png" alt="SafeAreaView adds a white background and some shadowing"></a></p>
  
  <p><strong>Here's the code I use:</strong></p>
  
  <pre><code>&lt;Provider store={store}&gt;
      &lt;SafeAreaView style={{flex: 1}} forceInset={{'top': 'never'}}&gt;
          &lt;View style={{flex: 1}}&gt;
              &lt;Navigator/&gt;
              &lt;NotificationsContainer/&gt;
          &lt;/View&gt;
      &lt;/SafeAreaView&gt;
  &lt;/Provider&gt;
  </code></pre>
  
  <p>How can I modify this behavior and UI?</p>
  
  <p>Thanks :)</p>