Dynamic table data rendering react native

Question

I want to achieve the data rendering in a form of table something like this:

I have a data (stored in variable 'myData') of form:

{
 "id":0,
 "name": ["wheat", "Rice", "Sugar"],
 "Quality":["Good", "good","good"],
 "Quantity":["200","200","200"]
}

I tried mapping the and together to implement this, but it renders the data horizontally in a single row.

This is what I tried to achieve so far with minimum test code.

return (
            <View style={{flexDirection:'column'}}>{myData.map( (item) => {
                return (
                    <View key={item.id}>
                        <View>
                            <Text>
                                {item.name}
                            </Text>
                        </View>
                        <View>
                            <Text >
                                {item.Quality}
                            </Text>
                        </View>
                    </View>

                )
            })}

            </View>
        )

Please help to achieve this

Answer 1

map each array into it's own View and use flexDirection: "row"

const list = myData.map(item => {
  return (
    <View style={{ flexDirection: 'row'}}>
      <View style={{ flex: 1}}>
        {item.name.map((name, i) => (
          <Text>{i + 1}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.name.map((name, i) => (
          <Text>{name}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.Quality.map((quality, i) => (
          <Text>{quality}</Text>
        ))}
      </View>
      <View style={{ flex: 1}}>
        {item.Quantity.map((quantity, i) => (
          <Text>{`${quantity} Bags`}</Text>
        ))}
      </View>
    </View>
  );
});

Answer 2

Try this,

    return (
                <View style={{flexDirection:'column'}}>{myData.name.map( (item, index) => {
                    return (
                        <View key={item.id}>
                            <View>
                                <Text>
                                    {item}
                                </Text>
                            </View>
                            <View>
                                <Text >
                                    {myData.Quality[index]}
                                </Text>
                            </View>
 <View>
                                <Text >
                                    {myData.Quantity[index]}
                                </Text>
                            </View>
                        </View>

                    )
                })}

                </View>
            )