React Native horizontal FlatList with multiple rows

Question

I'm trying to implement a horizontal scrolling list that has two rows. Using FlatList, the vertical scrolling list involves setting numColumns but there is no equivalent for using rows with horizontal.

I was successfully able to make it render properly, and it works flawlessly. However, a warning gets thrown saying setting flexWrap is not supported in VirtualizedList or FlatList, and to use numColumns. I cannot use numColumns as that is not meant for horizontal lists.

<FlatList     horizontal={true}     contentContainerStyle={{         flexDirection: 'column',         flexWrap: 'wrap'     }}     {...otherProps} /> 

I found the commit where this warning was added, but cannot find the reasoning behind it. There seems to be no way to make this work without a warning being thrown, at least without ditching FlatList entirely. Is there a more appropriate solution for horizontal lists with rows?

References:

• Commit adding warning: https://github.com/facebook/react-native/commit/eac399b
• FlatList Documentation: https://facebook.github.io/react-native/docs/flatlist.html

Answer 1

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

Answer 2

enhancement the first answer, that's what I did:

const listData = props.data ?? []; const numColumns = Math.ceil(listData.length / 2);         <ScrollView           horizontal           showsVerticalScrollIndicator={false}           showsHorizontalScrollIndicator={false}           contentContainerStyle={{ paddingVertical: 20 }}>           <FlatList             scrollEnabled={false}             contentContainerStyle={{               alignSelf: 'flex-start',             }}             numColumns={numColumns}             showsVerticalScrollIndicator={false}             showsHorizontalScrollIndicator={false}             data={listData}             renderItem={renderItem}           />         </ScrollView>