react-native expo save image in cache using Filesystem not working - react-native

Question

App written in React-Native expo.
I have 3 main pages in my app.
first page with a button that will open the second page(which loads the camera to scan a QR)
and the last page(called from the result of the scanned QR in second page) will load a picture from a url.
the picture will always load from the same url, BUT the picture content can change all the time.
i'm managing this using FileSystem to access the cache.
when the camera page loads i'm performing the following steps:
deleting the directory in the cache (if exists)
creating the directory again (now it's empty)
getting the picture from the url and save it in cache directory
After the scan of the QR i'm getting the file uri in the cache and sending it as a parameter to the image page.
Image page shows the correct image in the first time but when i change the image in the url and starting again in the app from the first page, i'm getting the previous image and not the updated one.
If i'm deleting the cache directory and creating it again, how is it possible i'm getting an old image?
hope i was able to explain my self
code when loading the camera page :
const imgDir = FileSystem.cacheDirectory + "AdImage/";
const dirInfo = await FileSystem.getInfoAsync(imgDir);
//check if AdImage directory exists in cache and delete if exists
if (dirInfo.exists)
{
await FileSystem.deleteAsync(imgDir);
}
//create an empty directory (since we delete b4)
await FileSystem.makeDirectoryAsync(imgDir);
const uri =
"https://myWebsite.azurewebsites.net/Images/AdvertiseImg/Image.jpeg?" + randNum;//random number for timestamp
//get the image with the uri and save it in the directory created b4 loop- call image img+compNum
const newImage = await FileSystem.downloadAsync(uri, imgDir + 'img');
once QR code is scanned :
const imgFile = FileSystem.cacheDirectory + "AdImage/img";
const uriToImageFromCacheInfo1 = await FileSystem.getInfoAsync(imgFile);
if (uriToImageFromCacheInfo1.exists) {
navigation.navigate("Image", {
uri: uriToImageFromCacheInfo1.uri //call image page with uri image saved in cache
});
On Image page assign to param that is bound to image
const [uriFromCache, setUriFromCache] = useState(navigation.getParam("uri"));
rendered view with image :
<View style={[{ height: "92%", backgroundColor: "#EE7629" }]}>
<Image source={
uri: uriFromCache,
}
style={{ width: "100%", height: "100%", resizeMode: "stretch" }}
/>
</View>