How to make multiple rows using horizontal flatlist in react native

Question

I want to create horizontal flatlist with multiple rows in my app, but the output is just one row, how to make this to be multiple rows?

I've tried to make this.state.products to array and splice it with 3 size each array, but it didn't change.

constructor() {
    super();
    this.state = {
        products = products
    }
}

render() {
    var arrays = [], size = 3;
    while(this.state.products.length > 0)
        arrays.push(this.state.products.splice(0, size)
    return(
         <FlatList
             horizontal={true}
             data={arrays}
             keyExtractor={(item, index) => index.toString()}
             renderItem={({item, index}) => (
                 <Text>{item[0].name}</Text>
                 <Text>{item[0].description}</Text>
                 {item.length > 1 ?
                     <Text>{item[1].name}</Text>
                     <Text>{item[1].description}</Text>
                 : null}
                 {item.length > 2 ?
                     <Text>{item[2].name}</Text>
                     <Text>{item[2].description}</Text>
                 : null}
             )}
         />
    )
}

I want in first column has 3 rows with different data of products in each row. And if it has 3 rows it will be move to next column with 3 rows again.

The ouput that I want

You can nest FlatList. One flatList is horizontal, and anothor is vertical. Probrem is data must be nested array like below [[1,2,3,4], [1,2,3,4], [1,2,3,4]] — sonicmario, Commented Feb 7, 2019 at 3:54
@sonicmario how to nest array of object before I use FlatList? — Wahyu Kurniawan, Commented Feb 7, 2019 at 4:58
you can use reduce or fliter or map. array1 = [] array2 = [] originalArray.map(value => { if (conditionA){ array1.push(value) } else { array2.push(value) } }) array = [array1, array2] — sonicmario, Commented Feb 7, 2019 at 7:53

ehutchllew · Accepted Answer · 2019-02-07 02:18:46Z

2

Try using FlatList's numColumns property. Set horizontal to false and then specify how every many columns you'd like.

Here's the documentation: FlatList numColumns

answered Feb 7, 2019 at 2:18

ehutchllew

9588 silver badges16 bronze badges

1

I've think about that but I want the output like the image of my question above, so the numColumns is undefined until the end data of products
– Wahyu Kurniawan
Commented Feb 7, 2019 at 2:39

Add a comment |

Sal Jeong · Accepted Answer · 2020-01-15 09:08:38Z

This could be hacky, but rendering two item in one iteration do the job.

<FlatList
              keyExtractor={(item, index) => title + item.goodsNo.toString()}
              showsHorizontalScrollIndicator={false}
              horizontal
              removeClippedSubviews={true}
              contentContainerStyle={{ marginTop: 0, }}
              style={{ width: width, alignSelf: 'center', backgroundColor: '#fff' }}
              data={recentlyOpened}
              renderItem={function ({ item, index }) {
                return (

                  <View>
                    {recentlyOpened[index * 2] && recentlyOpened[(index * 2) + 1] ?
                      <View style={{ marginLeft: 16 }}>
                        <View style={{ marginBottom: 18 }}>
                          {renderSingleColumn(navigation, recentlyOpened[index * 2], this.props.getOpenedItems, index)}
                        </View >
                        {renderSingleColumn(navigation, recentlyOpened[(index * 2) + 1], this.props.getOpenedItems,index)}
                      </View>
                      :
                      null}
                  </View>

                )
              }.bind(this)}

            />

Thank you for the answer, my problem was solved using ehutchllew's answer — Wahyu Kurniawan, Commented Jan 16, 2020 at 8:40

Collectives™ on Stack Overflow

How to make multiple rows using horizontal flatlist in react native

2 Answers 2

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Related