How to handle dynamic require images react native - reactjs

Question

i saved images to MongoDb with multer to path /uploads in my local static folder.
the object that i get from the data base when i get images look like :
Array [
Object {
"_id": "5fc4581a1b858e93a65136e7",
"desc": "19",
"image": "uploads/a2.jpg",
},
Object {
"_id": "5fc4584a873e544138a10a33",
"desc": "19",
"image": "uploads/a2.jpg",
},
]
now i want to show the array with desc and image so i defined a flat list and try to do:
<FlatList
numColumns={numColumns}
data={s}
renderItem={({ item, index }) => (
console.log("http://localhost:8080/" + item.image),
(
<View style={styles.imagecontainer}>
<Text>{item.desc}</Text>
{Object.keys(s).length === 0 ? null : (
<Image style={styles.image} source=
{require(`../../server/${item.image}`)} />/////////here is the problem
)}
</View>
)
)}
keyExtractor={(item, index) => index.toString()}
/>
now I understand that require should get only static string and not variables,
the question is how can I handle this to show the images and desc dynamically based on the array?
I read a lot of it on the internet but Dont find the answer for this...
I need somehow to convert the objects that I get and replace the image prop that gave me "uploads/a2.jpg" to {require(../../server/**here to put the image for each object**) but I Dont find a way to do that.

Answer 1

I faced the same issue, the only way I found it was to save images' IDs returned by the require() function.
console.log(require("image path"));
// return a number for example 5