[v4] | [v2] BottomSheetFooter on top of BottomSheetFlatList items when there are a few items that don't cover entire screen

[edisoni1995]

Bug

So I have a BottomSheetFlatList which has only 2 items and I am using BottomSheetFooter to show a sticky footer.

Even though I have 2 items, I see only one item and I have to scroll to see other ones while the modal doesn't even cover half of the screen so there is enough space for the modal to expand more to show the remaining items.

If I add 3 more items for example the modal expands more and all the items are shown on the screen without the need to scroll. For users, it's very difficult to think that there is another item in there and they need to scroll.

Environment info

Library	Version
@gorhom/bottom-sheet	4.6.1
react-native	0.72.5
react-native-reanimated	3.5.4
react-native-gesture-handler	2.12.1

Describe what you expected to happen:

1.The footer should be shown and all the items should be visible in the screen since there is more than enough space.

Reproducible sample code

<BottomSheetModal
          enableDynamicSizing
          enablePanDownToClose
          index={0}
          handleIndicatorStyle={modalStyles.handleStyle}
          keyboardBlurBehavior="restore"
          keyboardBehavior={keyboardBehavior}
          android_keyboardInputMode="adjustPan"
          maxDynamicContentSize={DYNAMIC_CONTENT_MAX_HEIGHT}
          ref={bottomSheetModalRef}
          footerComponent={
            showFooter
              ? props => (
                <BottomSheetFooter {...props}>
                  <ModalFooter
                    primaryButtonProps={primaryButtonProps}
                    textButtonProps={textButtonProps}
                  />
                </BottomSheetFooter>
                )
              : undefined
          }
        >
          <BottomSheetFlatList
              keyboardShouldPersistTaps="always"
              keyboardDismissMode="interactive"
              {...flatListProps}
              contentContainerStyle={[
                modalStyle,
                onSearchText && modalStyles.flatListSearch,
              ]}
              scrollEnabled={scrollEnabled}
              data={data}
              ListHeaderComponent={headerComponent}
              enableFooterMarginAdjustment
            />
        </BottomSheetModal>

[github-actions]

@edisoni1995: hello! 👋

This issue is being automatically closed because it does not follow the issue template.

[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.

[edisoni1995]

not stale

[sudhanshu-busy]

not stale

[kuldip-simform]

same issue for me as well.
anyone has any lead on this, can you please help me?
@edisoni1995 @sudhanshu-busy any luck from your side ? do you able to resolve this ?

[kuldip-simform]

even using v5, still not solved. OnLayout. This is log of onLayout of scrollview.
It goes to 0.

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2024-09-16.at.15.31.01.mp4

@gorhom Can you please help here.

[edisoni1995]

@kuldip-simform I was not able to resolve it as I didn't have much time to check on this but what I did is a condition when there are less than x items to show a different component for the flatlist footer

[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.

[kuldip-simform]

Definitely not stale. I am still facing this issue