0

I have implemented what I want with View but not with FlatList, I don't know how to pass some styles to the Flatlist.

FlatList

Flatlist output

<FlatList
      columnWrapperStyle= {{flexWrap: "wrap"}}
      numColumns = {6}
      data={vols}
      renderItem={({item}) => (
        <Text style={styles.box}>{item}</Text>
      )}
    />
  </View>

View

View output

      <View style={styles.itemslist}>
          { vols.map(vol => (
                  <Text style = {styles.box}>{ vol }</Text>
          )) }
      </View> 

Styles

    const styles = StyleSheet.create({
    itemslist: {
        marginTop: 50,
        flexDirection: 'row',
        justifyContent: 'space-between',
        flexWrap:"wrap",
        padding: 10,
    },
    box: {
      marginTop: 20,
      fontSize: 20,
      backgroundColor: 'skyblue',
      padding: 10,
    }
   });
Giannhs Ker
  • 97
  • 1
  • 8

0 Answers0