[v4] Dynamic height with FlatList not scrolling.

[alexisloiselle]

Bug

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

RPReplay_Final1632436636.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>
  );
};

[tslater]

@VyacheslavAA Thanks for sharing your workaround. Just to make sure I understand correctly, you're using the window height? Does that mean this only works in the limited case that your bottom sheet goes full-screen?

[pronevich]

Same issue on Android
@VyacheslavAA thanks, your solution works.

[gorhom]

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

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[pronevich]

This issue still annoying) I have looked at the source code, but can't figure out how to fix it.

[hisothreed]

any updates here? Has anyone here managed to fix it or find a workaround for this issue?

[hisothreed]

actually found a workaround:

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

  const insets = useSafeAreaInsets();
  const maxHeight = heightPercentageToDP(100) - +animatedHandleHeight.value;
  const contentContainerStyle = {
    paddingBottom: insets.bottom + animatedHandleHeight.value,
  };
  const scrollStyle = {
    maxHeight,
  };
  const onLayout = e => {
    const {height} = e.nativeEvent.layout;
    if (height > maxHeight) {
      return handleContentLayout({
        nativeEvent: {
          layout: {
            height: maxHeight,
          },
        },
      });
    }
    return handleContentLayout(e);
  };

...
<BottomSheetFlatList<IBankAccount>
          onLayout={onLayout}
          style={contentContainerStyle}
          contentContainerStyle={scrollStyle}
          data={accounts}
          renderItem={renderItem}
          keyExtractor={keyExtractor}
/>
...

TL;DR: take whatever content height the list is throwing onLayout event trigger and give it to the bottom sheet hook unless the height of the list is larger than the screen height, if so then limit the height of the bottom sheet list to the height of the screen minus the height of the stuff around the flat list.

[doougui]

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>
  );
};

This only works the first time that the modal is open. If we close and re-open the modal it doesn't scroll anymore

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.