react-native-safe-area-context

react-native-safe-area-context copied to clipboard

I'm trying to cancel bottom padding on my safe View by adding edges on top, left and right only. It doesn't seems to have any effect on the view. My device is an emulated Iphone X.

The safe view is in a header in a ScrollView with an absolute position. My goal is to have a transparent header over a scrollable page that gain opacity on scroll.

<ScrollView style={style.container} stickyHeaderIndices={[0]} onScroll={onScroll}>
  <View style={style.header}>
    <View style={style.headerBackground} />
    <SafeAreaView edges={['right', 'top', 'left']} style={{ backgroundColor: 'blue' }}>
      <View style={style.headerContainer}>
        <Header onBack={navigation.goBack} />
      </View>
    </SafeAreaView>
  </View>

  ...

</ScrollView>

The result is a blue header with padding on bottom. Exactly the same with or without edges. And the same appears with bottom edges or anything.

Got a similar issue;

<SafeAreaView
        edges={['bottom']}
        style={{ backgroundColor: 'red' }}>
        <View style={styles.container}>
          <Text>It seems you are disconnected from the internet</Text>
          <Text>Parts of this app might not work as expected</Text>
        </View>
      </SafeAreaView>

No combination of edges I provide does anything. It adds the spacing regardless.

What version are you using? It works for me on RN 0.62.2 after upgrading this package to 3.0.2.

@mariuswestgaard RN 0.62.2 and this package is 3.0.2.

I don't know where I could possibly investigate the cause of this.

I've made a mistake. For unrelated reasons, this package was actually on version 1.0.0 despite me having 3.0.2 in my package.json. I corrected that and the edges prop worked properly.

This is for v3 of the library, and we're on v4. Please re-open a new issue if you're still facing issues