React Native Modalize - cannot scroll FlatList inside Modalize

Question

I'm using react-native-modalize with flatListProps but I can't scroll the flatList, I tried panGestureEnabled={false}, or remove the height style but none of them fix it, here is my code:

<Modalize
  ref={ref}
  children={children}
  adjustToContentHeight={true}
  onOverlayPress={closeModal}
  onClosed={onCloseCallback}
  HeaderComponent={renderHeader}
  flatListProps={
    listData?.length > 0
      ? {
          data: listData,
          renderItem: renderListItem,
          ItemSeparatorComponent: renderSeparator,
          keyExtractor: listKeyExtractor,
          contentContainerStyle: dStyles.dataList,
        }
      : undefined
  }
  modalStyle={styles.borderRadius}
/>

const dStyles = StyleSheet.create({
    dataList: {
      height: 400,
    },
  });

I check the listData and the array has 63 items but the flatList only render the first 9 items.

Answer 1

Fixed by adding to flatListProps these props:

initialNumToRender: 10

maxToRenderPerBatch:10

And add to <Modalize prop disableScrollIfPossible={false}

I'm not sure why but the height is also need to be removed. So this is new code:

<Modalize
      ref={ref}
      children={children}
      adjustToContentHeight={true}
      disableScrollIfPossible={false}
      onOverlayPress={closeModal}
      onClosed={onCloseCallback}
      HeaderComponent={renderHeader}
      flatListProps={
        listData?.length > 0
          ? {
              data: listData,
              renderItem: renderListItem,
              ItemSeparatorComponent: renderSeparator,
              keyExtractor: listKeyExtractor,
              initialNumToRender: 10,
              maxToRenderPerBatch: 10,
            }
          : undefined
      }
      modalStyle={styles.borderRadius}
    />

As I mentioned, I cannot limit the FlatList height, so if the list is long enough, <Modalize will be expanded full screen, that is the limitation of this solution.

Answer 2

this issue is causing because of adjustToContentHeight={true} You can control it by doing this

adjustToContentHeight={listData?.length > 3 ? false : true}

Answer 3

The "adjustToContentHeight" prop is used to control whether a component adjusts its height dynamically based on its content. When set to false, the component's height remains fixed and does not change based on the content it holds

Example <Modalize

adjustToContentHeight={false}>

....