[v4] Dynamic height with FlatList not scrolling.

Bug

When using the useBottomSheetDynamicSnapPoints together with BottomSheetFlatList, it’s not possible to scroll the list anymore.

https://user-images.githubusercontent.com/16881226/134593038-28bd8fc6-841c-4e91-a380-b0a231b7e70d.MP4

Environment info

Library	Version
@gorhom/bottom-sheet	4.0.3
react-native	0.64.2
react-native-reanimated	2.2.2
react-native-gesture-handler	1.10.3

Steps To Reproduce

1. add a BottomSheet with the animatedSnapPoints, animatedContentHeight and animatedHandleHeight provided by useBottomSheetDynamicSnapPoints
2. set the handleContentLayout to the child
3. add a big enough list to overflow the screen

Describe what you expected to happen:

1. it’s not possible to scroll anymore

Reproducible sample code

Here’s a Snack to reproduce: https://snack.expo.dev/@alexisloiselle/dynamic-height-with-flatlist-not-scrolling

[VyacheslavAA]

Hello @alexisloiselle !

I had the same issue with BottomSheetScrollView.

As a temporary solution you can use BottomSheetScrollView and change height property for BottomSheetScrollView using useAnimatedStyle to constraint height of BottomSheetScrollView . Also, to prevent infinity loop for handleContentLayout you need to add additional View with onLayout handler as BottomSheetScrollView child.

Here is example:

import BottomSheet, {
  BottomSheetScrollView,
  useBottomSheetDynamicSnapPoints
} from '@gorhom/bottom-sheet';
import React, { useMemo } from 'react';
import { useWindowDimensions, View } from 'react-native';
import { useAnimatedStyle } from 'react-native-reanimated';

export const YourComponent = () => {
  const { height: windowHeight } = useWindowDimensions();

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

  const scrollViewAnimatedStyles = useAnimatedStyle(() => {
    const contentHeight = animatedContentHeight.value;
    const handleHeight = animatedHandleHeight.value;
    const bottomSheetHeight = handleHeight + contentHeight;

    return {
      height:
        bottomSheetHeight > windowHeight
          ? windowHeight - handleHeight
          : bottomSheetHeight,
    };
  });

  return (
    <BottomSheet
      snapPoints={animatedSnapPoints}
      handleHeight={animatedHandleHeight}
      contentHeight={animatedContentHeight}
    >
      <BottomSheetScrollView style={scrollViewAnimatedStyles}>
        <View onLayout={handleContentLayout}>{/* Children here */}</View>
      </BottomSheetScrollView>
    </BottomSheet>
  );
};

[gorhom]

dynamic snap points currently working only with views, there are still some work to get it working with scrollables