React-native-reanimated-bottom-sheet: Bottom sheet snap too high causing back layout exposed at bottom

[fadhlisulaimi]

I'm not sure if I am doing this correctly, but my bottom sheet is always snapped too high when opened, resulting in the bottom part being exposed to my main layout. Is it because of safeareaview? I tried changing snapPoints[0] to a fixed number, adjusting the height, adding margins to renderInner View but it doesn't work.

renderInner = () => (
          <View style = {{
              backgroundColor: '#fff000',
              height: '100%',
          }}>
              <Text>Copy</Text>
          </View>
      )

<SafeAreaView>
<MyMainContent />
 <BottomSheet
                    ref={this.bs}
                    snapPoints = {['100%', '0%']}
                    initialSnap={1}
                    renderContent = {this.renderInner}
                />
</SafeAreaView>

[romanonthego]

You could "solve" problem for now by just setting overdragResistanceFactor to 0 :)
It's not ideal, but will solve an issue.

[itsjangles]

I had the same problem. I worked around by setting the bottom position to 0 (in line with the bottom of the screen) and setting the closed snap point to the amount I wanted the bottom sheet to be visible. Having bottom or marginBottom to offset the sheet causes this issue.

[asharafshahi]

I also had this problem when the top most container View had padding. When I removed the padding (even just paddingTop), the bottomSheet aligned with the bottom of the screen.

[mnjongerius]

I solved this by placing the BottomSheet outside of the SafeAreaView

[maguayo]

As @mnjongerius said, placing the BottomSheet outside of the SafeAreaView solves the problem