React native, image component loading an old image associated to that link

Question

I'm developing an app for a company and they have provided me with an API from where i can access all the webservices required for the app. The app is suppost to have a profile page, and in this page you can change your picture, i've noticed that in the webservice where the picture is changed, the URL for the image is always the same, so i assume that each time an image is updated, the old one is replaced, the problem is that in react native, the first time i load a profile from a certain account i get the correct image, but if i change the image through their website, and if i load the profile page in the app again, the image loaded is the previous one. I've tried to do console.log("uri of the image") before the return statement, and the address given is correct, it does lead to the most recent image of that user, the problem is that when used inside an image component, it loads the first image ever corresponded to that URL.

Here's the image component i'm talking about:

<Image style={{height:24,width:24,resizeMode:'contain',marginHorizontal:33,marginVertical:21,}} source={{uri:profileImage}}/>

Answer 1

Ok so i finally found the solution, just have the image URI like i do

source={{ uri: profileImage+ '?' + new Date() }}

Answer 2

Try

  <Image
    style={{
      height: 24,
      width: 24,
      resizeMode: "contain",
      marginHorizontal: 33,
      marginVertical: 21,
    }}
    source={{ uri: profileImage, cache: "reload" }}
  />

Answer 3

you can change your uri like this

  source={{ uri: profileImage+ '?' + new Date() }}

but there is one problem your image will start reload as the componant rerender and this will produce a blink. this was happening in my case. I'll suggest you to append this

+ '?' + new Date()

when you setstate of profileImage