React-native-reanimated-bottom-sheet: Strange space at the bottom when headerMode='none' with React Navigation

Created on 22 Jun 2020 · 3Comments · Source: osdnk/react-native-reanimated-bottom-sheet

Facing strange empty transparent space at the bottom when headerMode is set to 'none'. This screenshot is from the Example => Test.js file

I have tried setting height to 100% to the Animated.View used for renderContent
Can you point please me in right direction, what should I configure ?

Simulator Screen Shot - iPhone 11 Pro Max - 2020-06-22 at 09 02 45

Source

Janak-Nirmal

👍5

Most helpful comment

I got the same issue this morning.

It's not a full and complete solution, but in my case I fixed a part of the problem by putting the BottomSheet outside the SafeAreaView. The other part was related to the dimensions of the header and the footer of my page.

blixit on 22 Jun 2020

🎉1 👍1

All 3 comments

I got the same issue this morning.

blixit on 22 Jun 2020

🎉1 👍1

@blixit Thank you. Moving this outside the SafeArea It worked, like you said. Thanks as lot.

Janak-Nirmal on 23 Jun 2020

👍1

I had a similar problem. There was a huge empty space blocked (around half of the screen if the bottom sheet is opened to full screen).
The structure was like this:

<View style={{ flex: 1 }}>
  <View>
    <BottomSheet/>
    <View (with the background's content) />
  <View>
<View>

I solved this problem by removing one layer:

<View style={{ flex: 1 }}>
  <BottomSheet/>
    <View (with the background's content) />
<View>

The removed view layer did not had any styles or settings so I honestly don't know why it was breaking the sheet. Hope it will help someone in the future. 😄