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

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 2

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>
  )
}