I am trying to render the list of items like in this image.
Items in each row will vary based on their text size. Flatlist is using for rendering items.
TagView.js
<View style={styles.tagView}>
<FlatList
scrollEventThrottle={1900}
data={this.state.interests}
numColumns={5}
renderItem={({ item }) => (
<View style={styles.tag}>
<Text>{item.tagName}</Text>
</View>
)}
keyExtractor={(item, index) => index}
contentContainerStyle={{ paddingBottom: 100 }}
/>
</View>
Style
tagView: {
flex: 1,
flexDirection: "row",
flexWrap: "wrap"
},
tag: {
borderWidth: 1,
borderRadius: 10,
borderColor: "black",
backgroundColor: "white",
padding: 3,
marginTop: 5
}
Result
But here items are not wrapping with device width. Is there any to wrap the contents?
FlatList with columnWrapperStyle
<FlatList
columnWrapperStyle={styles.tagView}
scrollEventThrottle={1900}
data={this.state.interests}
numColumns={5}
renderItem={({ item }) => (
<View style={styles.tag}>
<Text>{item.tagName}</Text>
</View>
)}
keyExtractor={(item, index) => index}
contentContainerStyle={{ paddingBottom: 100 }}
/>
Style
tagView: {
flexWrap: "wrap"
},
Add Horizontal Prop and try,
<FlatList
scrollEventThrottle={1900}
data={this.state.interests}
numColumns={5}
horizontal={false}
renderItem={({ item }) => (
<View style={styles.tag}>
<Text>{item.tagName}</Text>
</View>
)}
keyExtractor={(item, index) => index}
contentContainerStyle={{ paddingBottom: 100 }}
/>
Use ScrollView component for this purpose.
<ScrollView contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{tags.map(({ id, name }) => (
<Text key={id}>{name}</Text>
))}
</ScrollView>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With