CODEWITHSUNDEEP
react-nativereact-native-flatlistlistitem
Toma Radu-Petrescu
Toma Radu-Petrescu

Reputation: 2262

How to create horizontal FlatList with multiple rows and items with dynamic width?

I want to achieve something simillar to this:

enter image description here

The effect is similar to UICollectionView from Swift with self sizing cells.

How should I go implementing this in React Native?

Setting numColumns will not achieve the desired effect as I need a dynamic number of cells per row. That would limit me to the value of numColumns. There should be as many items per row as there can fit. If no more can fit on that row, then add to the next row.

Thanks!

Upvotes: 2

Views: 1540

Answers (1)

Lenoarod
Lenoarod

Reputation: 3610

you can try to use the flexWrap style. and set the text view a fixed height. the width is auto.

<View style={[{flexDirection: 'row', flexWrap: ' wrap'}]}>
         data.map(element => {
           return <Text style={{height:100}}>element.content</Text>
         })
        </View>

Upvotes: 2

Related Questions