Question 33675 in React native Question posted in
The official React Native documentation can be found here.

React Native FlatList display

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

But I got this result :enter image description here

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

Expected result :

enter image description here

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",
  },
Tags:

2

Answers


  1. 0

    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={{height:100}}>element.content</Text>
         })
</View>
    Login or Signup to reply.
  2. 0

    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
    },
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search