CODEWITHSUNDEEP
react-native
Wahyu Kurniawan
Wahyu Kurniawan

Reputation: 169

How to make multiple rows using horizontal flatlist in react native

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

Upvotes: 1

Views: 6056

Answers (2)

Sal Jeong
Sal Jeong

Reputation: 41

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

            />

Upvotes: 0

ehutchllew
ehutchllew

Reputation: 958

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

Upvotes: 2

Related Questions