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:

Solution 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>

Solution 2

You could try react-navigation's SafeAreaView. Just set it's forceInset prop to { bottom: 'never' } and you'll see it behaves as your expectation.

Example: https://github.com/react-navigation/react-navigation/blob/master/examples/SafeAreaExample/App.js

Solution 3

Maybe this late answer but you can easily use

 class ExampleScreen extends Component {
  render() {
    return (
      <SafeAreaView edges={['right', 'left', 'top']} >
        <Scrollview>
          <Text>Example</Text>
          <Text>Example</Text>
          <Text>Example</Text>
          (etc)
        </Scrollview>
      </SafeAreaView>
    );
  }
}

Comments

[Dan Leveille]

Have you gotten forceInset to actually work? I tried countless times and it would never actually affect the SafeAreaView -- it was as if it wasn't implemented, even on the latest version of RN.

[razor1895]

Yes, it wasn't implemented on RN's SafeAreaView, forceInset only works on react-naviagtion's SafeAreaView, if you're not using react-navigation, you could just use independent SafeAreaView

[GoodJuJu]

Welcome to SO! Please read the tour tour and How to Answer a question. If you provide more information it will be much more meaningful and also be less likely to down voted.

[fullStackChris]

Another classic example of the sadly inadequate 3 sentence docs from React Native that fail to mention this edge case.