Bottom sheet snap too high causing back layout exposed at bottom

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>

[mnjongerius]

I solved this by placing the BottomSheet outside of the SafeAreaView

[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.