Set the number of rows in FlatList dynamically

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