title: How do you prevent the bottom area in a React Native SafeAreaView from overlapping over the content?
body: <p>I'm implementing a <code>&lt;SafeAreaView&gt;</code> on my React Native app. Most of my screens are in a ScrollView. When I add the <code>&lt;SafeAreaView&gt;</code>, it obstructs the content. While I want this bottom area to be "safe", I'd like the user to be able to see the content behind it, otherwise, the space is wasted.</p>
  
  <p>How do I implement a "transparent" safe area?</p>
  
  <p><strong>Simplified example:</strong>
  </p>
  
  <pre><code>class ExampleScreen extends Component {
    render() {
      return (
        &lt;SafeAreaView&gt;
          &lt;Scrollview&gt;
            &lt;Text&gt;Example&lt;/Text&gt;
            &lt;Text&gt;Example&lt;/Text&gt;
            &lt;Text&gt;Example&lt;/Text&gt;
            (etc)
          &lt;/Scrollview&gt;
        &lt;/SafeAreaView&gt;
      );
    }
  }
  </code></pre>
  
  
  
  <p><strong>Output:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/GXqiJ.png" width="300" /></p>
  
  <p><strong>Desired Output:</strong></p>
  
  <p><img src="https://i.stack.imgur.com/k8rMR.png" width="300" /></p>