[v4] 'CONTENT_HEIGHT' with limitation

[ozasadnyy]

Hey, first of all, thanks for the great library 👍

I have one use case when I want to use snapPoint={['CONTENT_HEIGHT']} but limit it to some value.
Assume I have two items and the bottom sheet will open their description:

1. with a short description (apx. 20% of the screen)
2. with a long description and some other information. Naturally, I want to limit bottom sheet to something like 100% - 200px and have scrollable content inside.

What is the best solution to implement such behaviour?

I've tried to do it like this, but it doesn't work:

const {
      animatedSnapPoints,
      animatedHandleHeight,
      animatedContentHeight,
      handleContentLayout,
    } = useBottomSheetDynamicSnapPoints(['CONTENT_HEIGHT']);
...

       <BottomSheet
          snapPoints={animatedSnapPoints}
          animationConfigs={animationConfigs}
          handleHeight={animatedHandleHeight}
          contentHeight={animatedContentHeight}
          enablePanDownToClose
        >
          <BottomSheetView onLayout={handleContentLayout}>
            <BottomSheetScrollView>
              <View style={{ height: 300, width: 400, backgroundColor: 'green' }} />
            </BottomSheetScrollView>
          </BottomSheetView>
        </BottomSheet>

[ozasadnyy]

@gorhom any ideas?

[galechus]

Hi,
try this:

const initialSnapPoints = useMemo(() => ["CONTENT_HEIGHT", "CONTENT_HEIGHT"], []);
const { animatedHandleHeight, animatedSnapPoints, animatedContentHeight, handleContentLayout } =
        useBottomSheetDynamicSnapPoints(initialSnapPoints);

but scrollView has stopped working for me ... it won't scroll...

[rajjsajnani]

I know this isn't a cool idea but I wrap my in a and I found a solution

  <FlatList
        contentContainerStyle={{ minHeight: '100%' }}
        style={{ marginBottom: 150, zIndex: 2 }}
      />

The scroll works fine as we are adding a minHeight for it scroll, adding an additional marginBottom so it can reach the end of the list smoothly (150 was according to my data)