React native Question posted in
The official React Native documentation can be found here.

React native – Dynamic number of columns in flatlist

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?

7 th line

Tags:

2

Answers


  1. 0

    You can try to create the list using map function:

    <View style={{ flexDirection: "row", flexWrap: "wrap" }}>
  {Data?.map((i, j) => <YourComponent key={j} />)}
</View>
    Login or Signup to reply.
  2. 0

    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{...}
/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search