Dynamic number of columns in flatlist

Question

In react native , I need to create a list with a number of items, but the texts are of different lengths. So, I can't determine how many items can be included in a single row. I need to calculate how many items can be included in a row and display it. As shown below on the 7th line, it can only include 2 items, so I need to display the 3rd item in the next row. How can I do that?

Answer 1

You can try to create the list using map function:

<View style={{ flexDirection: "row", flexWrap: "wrap" }}>
  {Data?.map((i, j) => <YourComponent key={j} />)}
</View>

Answer 2

If you use a FlatList you can use the prop contentContainerStyle to achieve it by adding a flexDirection to "row" and a flexWrap to "wrap".

<FlatList
  contentContainerStyle={{flexDirection : "row", flexWrap : "wrap"}}
  data={...}
  renderItem{...}
/>