Bottom Sheet Performance - Related to safe area view context

[victorkvarghese]

Hi,

Would like to share some experiences i had with this awesome library.

I have using this as a reusable bottom sheet that stays above navigation.

 <BottomSheetModal
      ref={reusableBottomSheetModalRef}
      index={0}
      backdropComponent={renderBackdrop}
      snapPoints={bottomSheetProps.snapPoints}
      // handleIndicatorStyle={{ display: 'none' }}
      keyboardBehavior="interactive"
      keyboardBlurBehavior="restore"
      onChange={handleSheetChanges}>
      <Suspense fallback={<ActivityIndicator />}>
        {getBottomSheetView(bottomSheetProps.type)}
      </Suspense>
    </BottomSheetModal>

Things were working smooth, But some pages were slow to open. While others worked fine with fine animations.

i compared the components and eventually find out the root cause. I was using SafeAreaView from import { SafeAreaView } from 'react-native-safe-area-context';. This was causing issues when the bottom sheet modal was rendering.

I removed the safe area view and things went back to normal. Smooth animations. just wanted to add this here for anyone working with safe areaview.