Grid list with list items of different width

Question

I'm trying to achieve this design

and so far my output looks like this

I can't figure out how to force the list item to take up the full row width

this is my code:

    <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,
   },
})

Answer 1

finally fixed it , just added flexGrow: 1 to styles.option