Forcing the refresh of an image component's source

In an image component, how do I force the refresh of the source linked to a web URL?

Here’s some context on what I’m trying to do. I have an image component with a web URL as its source. It’s the URL of a JPEG image automatically updated every few tens of seconds. It’s essentially a public webcam feed that periodically provides a new still frame at a specific URL.

I would like to force a reload of the JPEG image at the defined URL to implement an update loop similar to the one described here. This way the image component would display the latest frame. But I don’t know how to force the re-download of the linked image.

You could bind the image URL to a page variable, then set that page variable to a formula with a random component, e.g.

"https://www.example.com/image.jpg?" + GENERATE_UUID()

Then, if you set a loop to refresh the page variable every 10 seconds, the image should load again.

Alternatively, setting the image Visible property to false and back to true again, the component will be remounted and it SHOULD load the URL again (at least if the URL contains a random component via formula like above).

I didn’t have a chance to test these approaches, but they should work!

2 Likes

Thank you, I tested the first approach and it works great.

1 Like

@Harri_Sarsa

I have tried the second approach and it just shows and hides the picture.

It seems that the only thing that reloads photo is changing the source variable. It needs to be changed to something otherwise changing variable to empty does not do anything. Not sure what is the right solution but maybe on source variable changed to empty the image should disappear?

1 Like

That’s probably because the native side caches the image response, so when the image component remounts, it just gets the cached image.

It does seem a bug to me that setting the image source to an empty/invalid string via a bound variable would not cause the image to render as empty, will have to look into that.

Hey @Harri_Sarsa, I am having the same issue. The user can upload a new image which overwrites the old one but without changing the source URL. However, as mentioned the app keeps showing the old image. How can I force it to refresh to the latest image?

Im having this same problem
I use the same URL for different images but it always shows the same old image. Ive tried using ‘Uncache File’ but that doesnt seem to work. I need the Image component to uncache its old image and display the new one.

Unfortunately there isn’t a way to refresh the old image that I know of – I tried even looking at how the image is handled natively on our side and there’s no obvious caching going on – I’ll look into it some more to see if I could find a way to fix this for you, but this is apparently a very common issue (searched for “React Native image not refreshing”). Going to look at the solutions to see if something would work in our case.

Actually there is. @Kristian_Gerkman found that if you add this to the imageUrl: + “&rand=” + RANDOM_INTEGER_BETWEEN(999, 9999999999), then it will prevent the image being cached. I prefer using TIMESTAMP() instead of the RANDOM_INTEGER function but thats irrelevant.

Bug Tracker: Cannot clear Image cache / 'Uncache File' flow broken | Voters | AppGyver

1 Like

Ah yes good, I was too fixated on the “same URL” part and couldn’t come up with anything without doing some change to the URL :sweat_smile: The random query parameter is a good workaround idea :+1:

2 Likes