I have an array of local images I need to push only those images into another array that matches category id. I able to add the images into array but instead giving proper path it's giving number like 445
that's my array of images
pieImages: [
require('../assets/images/otherbcateWhite.png'),
require('../assets/images/non_alcoholicWhite.png'),
require('../assets/images/alcoholicWhite.png'),
require('../assets/images/babyFoodWhite.png'),
require('../assets/images/bakedWhite.png'),
require('../assets/images/foodWhite.png'),
require('../assets/images/frozenWhite.png'),
require('../assets/images/fruitsWhite.png'),
require('../assets/images/houseHoldWhite.png'),
require('../assets/images/meatFishWhite.png'),
require('../assets/images/dairyProductsWhite.png'),
require('../assets/images/sweetsWhite.png'),
require('../assets/images/bodyWhite.png'),
require('../assets/images/hotWhite.png'),
]
my function to compare id and push it in another array
if (item?.id === itemm?.categoryId) {
budgetPipeData.Images.pieImages.map((_, index) => {
if (index === parseInt(itemm.categoryId)) {
const img =
budgetPipeData.Images.images[parseInt(itemm.categoryId)];
console.log(img);
images.push(img);
}
});
}
and if I use simple string of array for images like
pieImages: [
'../assets/images/otherbcateWhite.png',
]
it's giving error
Could not find image file:///Users/netzwelt/Library/Developer/CoreSimulator/Devices/344CC058-AD85-4595-9795-25A06A8CD235/data/Containers/Bundle/Application/A8637CD2-7511-4F4F-BBD1-73900FC60914/BoilerPlate.app/../163.png
and if I use require inside Image component like
<Image source={require(images[index])} />
it's give error
[Error: TransformError src/components/charts/labels.tsx: src/components/charts/labels.tsx:Invalid call at line 50: require(images[index])]
can anyone tell me how can push the images properly?
Ideally, that is correct, because require() will provide you id of resource at that path and you can directly use it now as Image source.
<Image source={images[0]} />
However, if you want it to use for further use like upload to server, you can store string in an array instead of require
pieImagesString: [
'../assets/images/otherbcateWhite.png',
'../assets/images/non_alcoholicWhite.png'
...
]