How do you prevent the bottom area in a React Native SafeAreaView from overlapping over the content?

Question

I'm implementing a <SafeAreaView> on my React Native app. Most of my screens are in a ScrollView. When I add the <SafeAreaView>, 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.

How do I implement a "transparent" safe area?

Simplified example:

class ExampleScreen extends Component {
  render() {
    return (
      <SafeAreaView>
        <Scrollview>
          <Text>Example</Text>
          <Text>Example</Text>
          <Text>Example</Text>
          (etc)
        </Scrollview>
      </SafeAreaView>
    );
  }
}

Output:

Desired Output:

Answer 1

In most you do not want to have your ScrollView/FlatList have as a descendant of a SafeAreaView. Instead you only want to wrap your Header and TabBar into a SafeAreaView. Some examples:

Instead of this (WRONG EXAMPLE)

<SafeAreaView>
  <Header />
  <ScrollView>
     <Content />
  </ScrollView>
</SafeAreaView>

you only wrap the header

<View>
   <SafeAreaView>
      <Header />
   </SafeAreaView>
   <ScrollView>
     <Content />
   </ScrollView>
</View>

Also even if you do not really have a Header, you only want to avoid drawing behind the status bar, you can use the SafeAreaView as padding.

<View>
   <SafeAreaView /> // <- Now anything after this gonna be rendered after the safe zone
   <Content />
</View>