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:

Badlands

I think you can't do that. Because that is the reason of SafeAreaView. That bottom line is like Android Soft buttons and you shouldn't try to show elements at there. That are all my opinion. – Mokpo

@Mokpo But most major apps do this. Including Apple's own standard apps. For example, look at the Settings app, Reminders, Notes, etc -- none of them have a solid visible bar over the safe area. – Badlands

Yes man you are right. I dont use iphone as a personel device so i didnt know how Apple's apps are. I checked it in simulator and list appear under bottom line. – Mokpo

You simply not wrapping your whole ScrollView to a SafeArea. – Ambassadress

@IstvanOrban What do you mean? The bottom purple portion in the screenshot is the safe area. Upon further research, it's not possible to remove it from just the bottom (or make it transparent) using the native <SafeAreaView>. – Badlands

Sorry I was not more descriptive, I was on my phone and I hate to write long stuffs on it. What I mean is that in most of the cases it's doesn't makes sense to have your ScrollView/FlatList wrapped as descendant of a SafeAreaView, instead you only wrap the part what actually makes sense to wrap. – Ambassadress

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>

Ambassadress

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

Doesn't this also add a bottom padding under the header (before the content)? – Romansh

Answer 2

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>
    );
  }
}

Safari

I could not find the documentation for edges, but it seems to be the best answer for me. – Lumberman

@KevinAmiranoff you can check full documentation here github.com/th3rdwave/react-native-safe-area-context#edges – Safari

Answer 3

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

Suetonius

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. – Badlands

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 – Suetonius

Link is not working anymore. – Bothy

Answer 4

<>
 <SafeAreaView style={{ paddingTop: Platform.OS === 'android' ? 20 : 0 }} />
  <ScrollView>
   <View>
    <Text>Text</Text>
   </View>
  </ScrollView>
</>

Korella

Please read How do I write a good answer?. While this code block may answer the OP's question, this answer would be much more useful if you explain how this code is different from the code in the question, what you've changed, why you've changed it and why that solves the problem without introducing others. – Istle

Answer 5

In ScrollView, contentInsetAdjustmentBehavior controls inserting this safe area padding. Just set it as automatic

<KeyboardAwareScrollView
  contentInsetAdjustmentBehavior="automatic"
  {...otherProps}
/>

---

Docs:

/**
 * This property specifies how the safe area insets are used to modify the content area of the scroll view.
 * The default value of this property must be 'automatic'. But the default value is 'never' until [email protected].
 */
contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';

Well, even on 0.64 I had to set it manually. Whatever is up with that.

Addie

Answer 6

install :

npm i react-native-safe-area-context react-native-safe-area-view

after that write code like this:

import { SafeAreaProvider } from 'react-native-safe-area-context';
import SafeAreaView from 'react-native-safe-area-view';

  <SafeAreaProvider>
    <SafeAreaView style={{ flex: 1 }}
      forceInset={{ top: 'always', bottom: 'never' }}
    >
      {/* ... your code here */}
    </SafeAreaView>
  </SafeAreaProvider>

Galimatias

Answer 7

<ScrollView contentInsetAdjustmentBehavior="never">
  ...
</ScrollView>

Use this in scrollView

Quantifier

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. – Peppie