react-nativeflatlist

How to make adjustable Flatlist render Item in React native?


enter image description here

here I'm using Flat list and provided column 3 because I want to display the view in 3 columns when my text is small then it's working fine but for long text, it's destroying my view is there any way to resolve this issue please do let me know Thank you.


Solution

  • You can't achieve that from flatlist, If you do not want to fix the column then use map instead of flatlist.

    ex.

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

    above code automatically adjust the number of column based on the width of the content(text).

    and if you want to fix column 3 then try the below code:

     <View style={[{ flexDirection: 'row', flexWrap: 'wrap' }]}>
            {DATA.map(element => {
              return <View style={{ flexBasis: '33.333%'}}>
                <Text>{element.title}</Text>
              </View>
            })
            }
    </View>
    

    but I recommend you to not fix the column first solution is best.