Set the number of rows in FlatList dynamically - react-native

Question

I am trying to create an horizontal list of element where the width is fix but the height is dynamic. That means if no more avatars could be fit in a row, a new row should be created.
const DATA = ["cQpBBiCQ3BwCHKXnTJeKt4yQ2", "zHYYvrVPY1edwOrQhQLt6k1", "zHYYvrVPYedwOrQhQLt6k1", "zHYYvrVPY1edwOrQhQLt6k1", "zHYYvrVPedwOrQhQLt6k1", "zHYYvrVPrQhQLt6k1", "zHYYvsdPrQhQLt6k1"];
const renderConfirmedUserAvatar = ({ item }) => {
if (users[item]) {
return (
<View
style={styles.avatarView}>
<Avatar
size={40}
source={{ width: 80, height: 80, uri: users[item].avatar }}
/>
<Text category={'c2'}>{users[item].userName}</Text>
</View>
)
}
};
<View style={styles.confirmedContainer}>
<FlatList
data={DATA}
renderItem={renderConfirmedUserAvatar}
keyExtractor={item => item}
contentContainerStyle={{ alignSelf: 'flex-start' }}
showsVerticalScrollIndicator={false}
showsHorizontalScrollIndicator={false}
horizontal={true}
/>
</View>
const styles = StyleSheet.create({
avatarView: {
alignSelf: 'flex-start',
alignItems: 'center',
margin: 7,
},
confirmedContainer:{
width: 200,
flex: 1,
}
});
With the current code the avatars are shown in one row and only three and a half of them are shown, the other are hidden because of the width.
In this case the expected result is to show the avatars in 3 rows, three avatars in the first two rows and one avatar in the last one.

Answer 1

Try adding flexWrap: 'wrap' to the styles of the view which wraps flatlist