In React Native's FlatList, setting a height of 500px allows it to shrink to the content size if smaller or take the full 500px if larger. However, in Shopify's FlashList, setting the same height doesn't shrink when content is smaller, causing UI issues.

[ManishSalesgent]

Current behavior

Expected behavior

To Reproduce

Platform:

• iOS
• Android

Environment

x.y.z

[ManishSalesgent]

<View style={{ flex: !height && 1 }}>
<SearchFilterComponent
columns={columns}
initialValues={{ filters: tableFilters?.filters }}
onSubmitFilters={onSubmitFilters}
/>
<View
style={{
height: height || Dimensions.get("screen").height - 210,
}}
>
<FlashList
data={tableData.data}
refreshing={refreshing}
onRefresh={tableData?.pageable && handleRefresh}
onEndReachedThreshold={1}
onEndReached={() => {
tableData?.pageable && fetchNextPage();
}}
ListEmptyComponent={!(isLoading || refreshing || tableData?.data?.length) && }
renderItem={({ item, index }) => }
estimatedItemSize={400}
keyExtractor={(item, index) => String(item?.id || index)}
ListFooterComponent={
<>
{!isLoading && footer && <>{footer}</>}
{isLoading && }
</>
}
/>

{onCreateAction || actions?.length ? (
<FloatingAction
showBackground={false}
actionsPaddingTopBottom={0}
actions={actions}
color="#1F62FF"
iconHeight={28}
iconWidth={28}
buttonSize={51}
floatingIcon={}
onPressBackdrop={() => null}
onPressMain={() => {
onCreateAction && onCreateAction();
}}
onPressItem={(name) => {}}
/>
) : (
<></>
)}

[ChronoByteCosmonaut]

Have had the same issue for quite some time, tried a lot of thing but nothing working as expected 🥲