Сетчатый список с элементами списка разной ширины

Я пытаюсь достичь этого дизайна

и пока мой вывод выглядит так

Я не могу понять, как заставить элемент списка занимать всю ширину строки

это мой код:

    <View style = {styles.list}>
       {listData.map(item => {    
          return (
            <Pressable style = {styles.option}>
               <Text style = {styles.optionTxt}>{item.name}</Text>
             </Pressable>
           );
       })}
  </View>

const styles = StyleSheet.create({
  list: {
     width: '85%',
     alignSelf: 'center',
     flexWrap: 'wrap',
     flexDirection: 'row',
     justifyContent: 'flex-start',
  },
  option: {
    backgroundColor: COLORS.backgroundText,
    borderRadius: 5,
    paddingVertical: 10,
    marginBottom: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginEnd: 10,
  },
  optionTxt: {
   textAlign: 'center',
   minWidth: '30%',
   paddingHorizontal: 13.5,
   },
})