React native custom view - reactjs

Question

I am developing an app where the user adds item name, description, quantity and image url and it gets stored in AsyncStorage. I have made it ready and it looks like this:
Now i am trying to fetch it from Asyncstorage and i Get a 2D array. Here is the code:
myA1 = await AsyncStorage.getItem('key1');
var ee=JSON.parse(myA1); //ee is 2D array
It looks like this
[[imgurl1 itemname1, desc1, quantity1],
[imgurl2 itemname2, desc2, quantity3],
[imgurl3 itemname3, desc2, quantity3],
[imgurl4 itemname4, desc2, quantity3]]
How can I acheive this??
I am beginner for react native
I want to display it as follows
:

Answer 1

You van use FlatList for rendering a list of data. It has a renderItem prop that you can pass a view to render each row of data like that. Put your data in an state (data in this code). Here is an example:
makeContentItem(item) {
return (
<TouchableOpacity
onPress={() => {
//Do sth when clicking on a row
}}>
<View style={{ width: '90%', height: 140, marginBottom: 5, borderRadius: 2, backgroundColor: 'white' }}>
<View style={{ flex: 1, flexDirection: 'row' }}>
<Image style={{ width: 40, height: 40 }} source={require(item.imgurl)} />
<View>
<Text>{item.itemname}</Text>
<Text>{item.desc}</Text>
<Text>{item.quantity}</Text>
</View>
</View>
</View>
</TouchableOpacity>
);
}
render() {
return (
<FlatList
data={this.state.data}
renderItem={({ item, index }) => {
return this.makeContentItem(item)
}
/>
)
}
You can change the style to achieve what you want. also you can take a look at FlatList
I hope it will help

Answer 2

renderEditAndClose() {
return(
<View style={{flex:1, flexDirection: "row", justifyContent: "flex-end"}}>
{this.renderEditImage()}
{this.renderCloseImage()}
</View>
);
}
renderImageAndItemData(item: Object) {
return(
<View style={{flex:1, flexDirection:"row"}}>
{this.renderItemImage()}
{this.renderItemData(item)}
</View>
);
}
renderItemImage(width: number, height: number, url: string) {
return (
<Image style={{ width: width, height: height }} source={{uri: url}} />
);
}
renderItemData(item: Object) {
return(
<View>
<View style={{flex: 1, flexDirection: "row", justifyContent: "space-around"}}>
<Text>{item.name}</Text>
<Text>{item.quantity}</Text>
</View>
<Text>{item.description}</Text>
</View>
);
}
renderRow(item: Object) {
return() {
<View>
{this.renderEditAndClose()}
{this.renderImageAndItemData(item)}
</View>
}
}
render() {
return (
<FlatList data={ee}
renderItem={(item) => this.renderRow(item)} />
);
}