React Native FlatList display-CodePudding

I'm using a flatlist with rowNumber={4} and I want to display some elements with a Width-max.

But I got this result :

As you can see some elements protrude on the left side. How can I make it fit automatically ?

Expected result :

There is my code :

<SafeAreaView>
                    <View
                      style={{
                        height: "100%",
                        maxWidth: "100%",
                        right: "10%",
                      }}
                    >
                      <FlatList
                        style={{width: "120%"}}
                        data={brands}
                        numColumns={4}
                        keyExtractor={(_, item) => item}
                        renderItem={({item}) => (
                          <View style={styles.card} key={item["id"]}>
                            <TouchableOpacity
                              onPress={() => {
                                var index = brandId.indexOf(item["id"]);
                                if (index > -1) {
                                  brandId.splice(index, 1);
                                  cpt = cpt - 1;
                                } else {
                                  brandId.push(item["id"]);
                                  cpt = cpt   1;
                                }
                                console.log("ici ! ", cpt);
                                console.log("Il existe deja bro", brandId);
                              }}
                            >
                              <Text style={styles.text}>{item["name"]}</Text>
                            </TouchableOpacity>
                          </View>
                        )}
                      />
             </View>
     </SafeAreaView>

CSS :

card: {
    height: 30,
    justifyContent: "center",
    backgroundColor: "#E4E4E4",
    margin: 5,
    borderRadius: 10,
  },
  text: {
    paddingRight: "2%",
    textAlign: "center",
    width: "100%",
    fontSize: 12,
    color: "black",
  },

CodePudding user response：

don't use flatlist. with flatlist you will always have fixed numberOfColumns but your item widths could be diff from each other. use map instead inside scrollview.

updated code :

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

styles:

  card: {
        height: 30,
        justifyContent: "center",
        backgroundColor: "#E4E4E4",
        margin: 5,
        borderRadius: 10,
        paddingHorizontal: 5
    },

CodePudding user response：

Modify style of card:

card: {
   flex:1,
   flexDirection:"row"
   height: 30,
   justifyContent: "center",
   backgroundColor: "#E4E4E4",
   margin: 5,
   borderRadius: 10,
},

or If you don't use flatlist then below code will solve your issue:

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