Content is overflowing at the bottom which results in a content leak on Notch phones about react-native-reanimated-bottom-sheet HOT 10 OPEN

For future readers, a workaround is:

<SafeAreaView forceInset={{ bottom: 'never' }}/>

Overriding the zIndex doesn't seem to work even if the value is greater than 100 which is what seems to be set for this component.

from react-native-reanimated-bottom-sheet.

any updates on this?

from react-native-reanimated-bottom-sheet.

The forceInset={{ bottom: 'never' }} solution kinda defeats the purpose of SafeAreaView.

Here's my pretty hacky, hopefully temporary solution. I've added an empty SafeAreaView with a white background, which covers the part of the BottomSheet that should be hidden.

<Fragment>
  <SafeAreaView>
     <BottomSheet ... />
  </SafeAreaView>
  <SafeAreaView style={{backgroundColor: 'white'}}> 
</Fragment>

Edit: The SafeAreaView doesn't need to be wrapped in a View.

from react-native-reanimated-bottom-sheet.

Thanks, I have no opinion how to deal with now, but I'm going to figure it out soon.

from react-native-reanimated-bottom-sheet.

what is the proper solution for this?

from react-native-reanimated-bottom-sheet.

Doesn't work. Tested in iPhoneX. snapPoints percentage also gets messed up with SafeAreaView.

from react-native-reanimated-bottom-sheet.

I think that @Eyesonly88 is good. Need to dig into it a bit

from react-native-reanimated-bottom-sheet.

if you are using nativebase ui library then put bottomsheet inside component.

from react-native-reanimated-bottom-sheet.

you can use snapPoints={[100, -100]} in BottomSheet.

from react-native-reanimated-bottom-sheet.

There is no fix yet, the workaround is;

const insets = useSafeAreaInsets();

<BottomSheet
    containerStyle={{
      marginTop: insets.top,
      marginBottom: insets.bottom,
    }}
    ref={bottomSheetRef}
    snapPoints={snapPoints}
>

https://stackoverflow.com/a/77387359/5380942

from react-native-reanimated-bottom-sheet.