javascriptreactjsreact-nativereact-native-image

Images source is converting into integer number while using filter in react native


I have following data in json format

const data = [
    {
        "id": 1,
        "category": "fruits",
        "title"  : "Red Apples",
        "image1": require("../assets/images/products/fruits/apple.jpg"),
        "image2": require("../assets/images/products/fruits/apple2.jpg"),
        "image3": require("../assets/images/products/fruits/apple3.jpg"),
        "price": 4.99,
        "label": "fresh",
        "qty": "200gm"
    },
    {
        "id": 2,
        "category": "fruits",
        "title"  : "Organic Banana",
        "image1": require("../assets/images/products/fruits/banana.jpg"),
        "image2": require("../assets/images/products/fruits/banana2.jpg"),
        "image3": require("../assets/images/products/fruits/banana3.jpg"),
        "price": 2.50,
        "label": "new",
        "qty": "500gm"
    },
    {
        "id": 3,
        "category": "fruits",
        "title": "Fresh Grapes",
        "image1": require("../assets/images/products/fruits/grapes.jpg"),
        "image2": require("../assets/images/products/fruits/grapes2.jpg"),
        "image3": require("../assets/images/products/fruits/grapes3.jpg"),
        "price": 10.69,
        "label": "sale",
        "qty": "1kg"
    },
 ]

and I am using filter to get the object for particular id like this

 const filterData = null;
 filterData = data.filter((item) => item.id == pro_id);
 console.log(filterData);

Filter is working fine but image source/uri is converting into number

[{"category": "fruits", "id": 1, "image1": 15, "image2": 16, "image3": 17, "label": "fresh", "price": 4.99, "qty": "200gm", "title": "Red Apples"}]

instead of image path It is showing numbers like 15,16,17 etc I don't know why it is changing

Please help THanks in advance


Solution

  • require does not return an image path. It's not a string and therefore also not in "json format". Please omit require and only store the path in "imageX" in order to get your desired output.