[Bug]: BottomSheetModal - Can't view bottom of BottomSheetScrollView when using snappoints

[mattmiller515]

Version

v5

Reanimated Version

v3

Gesture Handler Version

v2

Platforms

Web

What happened?

When you are using a BottomSheetScrollView with BottomSheetModal, the BottomSheetModal snappoint must be at 100% to view all of the content. If it is at anything less, say 50%, the content is cut off and you can't scroll to it (without opening the modal to 100%)

Reproduction steps

• Create a BottomSheetModal with a BottomSheetScrollView
• Populate with data (e.g. 20 records with padding)
• set snappoints to 50%
• open BottomSheetModal
• BUG - when you try and scroll down to the bottom records, you can not reach them unless you expand the modal to 100%

https://github.com/user-attachments/assets/51c61ef1-ac9b-4aaa-aace-78cc202b8c61

Reproduction sample

https://snack.expo.dev/@mattmiller515/bottomsheetmodal---cant-view-bottom-when-using-snappoints

Relevant log output

[MDSADABWASIM]

Have you found any workarounds for this @mattmiller515 ?

[mattmiller515]

@MDSADABWASIM no luck yet unfortunately

[kristian-nst]

Same :/

https://github.com/user-attachments/assets/335889d7-2597-458a-bf14-911c68a48803

[michael-pingo-ai]

found a fix, set height to 100% on the outer BottomSheetView :)

[evgeniygulyaev94]

Same. @michael-pingo-ai, could you provide a working example? We only have a BottomSheetScrollView inside a BottomSheetModal. It happens if the snapPoints have values ​​greater than 50%.

[josh-feldman]

Same. @michael-pingo-ai, could you provide a working example? We only have a BottomSheetScrollView inside a BottomSheetModal. It happens if the snapPoints have values ​​greater than 50%.

I had the same issue and was able to work around it with @michael-pingo-ai's suggestion. Wrap the bottomsheetscrollview in a bottomsheetview with a height: 100% style Note that it required the BottomSheetScrollView contentContainerStyle was not flex:

<BottomSheet  snapPoints={snapPoints} {...restOfProps}>
  <BottomSheetView style={{height: '100%'}}>
    <BottomSheetScrollView>
      {/* Content is now fully scrollable */}
    </BottomSheetScrollView>
  </BottomSheetView>
</BottomSheet>