title: React Native SafeAreaView background color - How to assign two different background color for top and bottom of the screen?
body: <p>
  I'm using <code>SafeAreaView</code> from React Native 0.50.1 and it's working pretty good except for the one part. I assigned the orange background color to the SafrAreaView but can't figure out to change the bottom unsafe area background to black.</p>
  
  <p>Here is the code and I included expected the result and actual result.
  What is the best way to make the bottom part of the screen black instead of orange?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    ...
    SafeAreaView
  } from 'react-native';
  class Main extends React.Component {
    render() {
      return (
        &lt;SafeAreaView style={styles.safeArea}&gt;
          &lt;App /&gt;
        &lt;/SafeAreaView&gt;
      )
    }
  }
  const styles = StyleSheet.create({
    ...,
    safeArea: {
      flex: 1,
      backgroundColor: '#FF5236'
    }
  })</code></pre>
  </div>
  </div>
  </p>
  
  
  
  <p>
  I want to have orange top and black bottom.</p>
  
  <p><img src="https://i.stack.imgur.com/BZuOw.png" width="150"></p>
  
  <p>
  But below is what I get now.</p>
  
  <p><img src="https://i.stack.imgur.com/tN8mz.png" width="150"></p>