React Native Bottomsheet how to avoid bottom notch area?

Question

I have a simple page component in react native. The issue is when I try to open the bottom sheet, I cannot avoid the bottom notch area in IOS. Any ways I can get over it?

  return (
    <SafeAreaView
    <KeboardAvoidingView />
    <BottomSheet
      isOpen={isOpen}
      onClosed={onClosed}
      childComponent={...}
      options={[]}
      showTopKnob
      rounded
    />
    </SafeAreaView>
  );  

Answer 1

Now library support you can pass through props topInset and bottomInset.

Most application require react-native-safe-area-context library. you will get bottom and top value from there.

Answer 2

There is no fix yet, the workaround is;

const insets = useSafeAreaInsets();

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

Answer 3

Give some extra padding from bottom for the devices that have bottom notch.

you can specify this by using this library.

react-native-iphone-x-helper

Example

import {isIphoneX} from 'react-native-iphone-x-helper';

const BOTTO_PADDING = isIphoneX() ? 44 : 20;

I hope this will help you out.

Answer 4

We have encountered the same issue and have yet to identify a dependable solution. The hack we have been using now is adding a View inside the BottomSheet with padding = insets.bottom

function ActionSheet() {
  const insets = useSafeAreaInsets();
  return (
    <BottomSheet ...>
      ...
      <View style={{ paddingBottom: insets.bottom }}></View>
    </BottomSheet>
  )
}