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