React native custom view

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)} />
      );
  }