BottomSheet height extends past snap points and goes full screen. Why?

[lucksp]

I am trying to keep my BottomSheet from going full screen. However, the index on the onChange callback goes past my snapPoints array. Why?

I have had to throw a hacky solution in, unless this is the correct workaround?

const snapPoints = ['15%', '50%', '85%'];

  const handleSheetChanges = useCallback((index: number) => {
    if (index > snapPoints.length - 1) {
      bottomSheetRef.current?.snapToIndex(snapPoints.length - 1);
    }
  }, []);

<BottomSheet
        enableDynamicSizing
        index={2}
        onChange={handleSheetChanges}
        ref={bottomSheetRef}
        snapPoints={snapPoints}
        style={modalStyle.modal}
      >
     {children}
</ BottomSheet>

[FlawaCLV]

Same issue here, I can't close the BottomSheet because it goes full height, behind status bar and safe area!

Any update?

[FlawaCLV]

The only thing that worked for me was setting topInset 👍🏻

[rochajulian]

If you use enableDynamicSizing, the snapPoints' max won't be respected for some reason. I set it equal to false and it worked.

<BottomSheetModal
  snapPoints={snapPoints}
  enableDynamicSizing: false
  {...}
>
  {...}
</BottomSheetModal>

I'm guessing that enableDynamicSizing's actual default is true. It also seems that this prop isn't compatible with snapPoints if you want to avoid a max of full height. Hope this helps.

[FlawaCLV]

It didn't work for me but setting topInset did the trick 👍🏻