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:

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. — VolkanSahin45, Mar 20 '18 at 09:10
@VolkanSahin45 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. — Dan Leveille, Mar 20 '18 at 19:59
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. — VolkanSahin45, Mar 21 '18 at 09:38
You simply not wrapping your whole ScrollView to a SafeArea. — Istvan Orban, Dec 02 '19 at 16:54
@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 ``. — Dan Leveille, Dec 03 '19 at 17:33
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. — Istvan Orban, Dec 04 '19 at 21:36

score 28 · Answer 1 · answered Dec 04 '19 at 21:48

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>

Another classic example of the sadly inadequate 3 sentence docs from React Native that fail to mention this edge case. — fullStackChris, Apr 29 '22 at 13:13

score 12 · Answer 2 · answered Feb 20 '22 at 21:39

12

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

answered Feb 20 '22 at 21:39

anie

399
5
17

1

I could not find the documentation for `edges`, but it seems to be the best answer for me. – Kevin Amiranoff Aug 17 '22 at 17:00
1

@KevinAmiranoff you can check full documentation here https://github.com/th3rdwave/react-native-safe-area-context#edges – anie Aug 18 '22 at 18:26

score 1 · Answer 3 · answered Apr 26 '18 at 03:45

1

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

answered Apr 26 '18 at 03:45

razor1895

56
5

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. – Dan Leveille Apr 27 '18 at 00:34
3

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](https://github.com/react-community/react-native-safe-area-view) – razor1895 Apr 27 '18 at 06:23
Link is not working anymore. – Heitara Aug 18 '23 at 10:24

score 1 · Answer 4 · answered Jul 07 '22 at 18:23

1

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

answered Jul 07 '22 at 18:23

Fernando Gonçalves

21
2

3

Please read [How do I write a good answer?](https://stackoverflow.com/help/how-to-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. – Saeed Zhiany Jul 08 '22 at 06:37

score 0 · Answer 5 · answered Jul 09 '21 at 16:58

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 RN@0.51.
 */
contentInsetAdjustmentBehavior?: 'automatic' | 'scrollableAxes' | 'never' | 'always';

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

score -1 · Answer 6 · edited May 19 '21 at 16:04

-1

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

Use this in scrollView

edited May 19 '21 at 16:04

Louis Viot

3
1

answered Dec 16 '20 at 12:53

Vimal Swaroop J

135
1
10

Welcome to SO! Please read the tour [tour] and [answer] a question. If you provide more information it will be much more meaningful and also be less likely to down voted. – GoodJuJu Dec 16 '20 at 14:12

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

6 Answers6