React Native horizontal FlatList with multiple rows

Please do not use horizontal={true}. For this case
you should use numColumns equal to the length of data / 2, and add a <ScrollView> tag. Forcing the number of columns to be half the total will force the list to wrap to the next line.

<ScrollView
  horizontal
  showsHorizontalScrollIndicator={false}
  directionalLockEnabled={true}
  alwaysBounceVertical={false}
>
  <FlatList
    contentContainerStyle={{alignSelf: 'flex-start'}}
    numColumns={Math.ceil(listData.length / 2)}
    showsVerticalScrollIndicator={false}
    showsHorizontalScrollIndicator={false}
    data={listData}
    renderItem={({item, index}) => {
      //push your code
    }}
  />
</ScrollView>

Update 1: edit listData.length / 2 -> Math.ceil(listData.length / 2) following Alex Aung comment. Thanks @alex-aung

Update 2: edit add directionalLockEnabled={true} and alwaysBounceVertical={false} for stoping dragged vertically while dragging. following @amer-nm, Thanks Amer NM

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)