Content is overflowing at the bottom which results in a content leak on Notch phones

[Eyesonly88]

First of all, awesome library 👏

I've come across what I think is a bug where the bottomSheet content is leaking into the SafeArea from the bottom (on notch phones like iPhone X). SafeArea is a component from react-navigation that ensures content is not overlapping outside of viewable area in notch phones.

Preview

You can see the bottom sheet content is overflowing at the bottom when it should not be.

Here's my configuration:

<BottomSheet
  snapPoints={[290, 75]}
  initialSnap={1}
  renderContent={renderInner}
  renderHeader={renderHeader}
/>

react-native info

  React Native Environment Info:
    System:
      OS: macOS 10.14.2
      CPU: x64 Intel(R) Core(TM) i7-7820HQ CPU @ 2.90GHz
      Memory: 27.74 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
      Yarn: 1.6.0 - /usr/local/bin/yarn
      npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        Build Tools: 26.0.3, 27.0.3, 28.0.2, 28.0.3
        API Levels: 21, 22, 23, 24, 25, 26, 27
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.57.8 => 0.57.8
    npmGlobalPackages:
      react-native-log-ios: 1.0.1

Things I tried

I tried setting zIndex on the SafeArea view to a high value like 9 but still, the bottom sheet is showing on top.

Any other ideas I can try to work around this?

Thanks 👋

[Eyesonly88]

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.

[osdnk]

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

[sibelius]

what is the proper solution for this?

[osdnk]

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

[turingpavan]

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

[ansarikhurshid786]

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

[dotpegaso]

any updates on this?

[lancesnider]

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.

[berkayakks]

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

[aslamanver]

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