Unable to reload image when error occurs

[bradstiff]

I am displaying images in a FlatList. In low network conditions, some of those images are blank, and some are the default Broken Image that is part of this package.

On Android, if I open a detail page with another instance of BlastedImage with the exact same image URI, and the image loads, I can then return to the previous page (which has not been unmounted / remounted), but the image is still broken. The image is only repaired by unmounting / remounting the FlatList.

If I recall correctly, with react-native-fast-image, if a broken image were eventually loaded successfully, it would then appear on every mounted image instance with the same URI.

I will dig into the react-native-fast-image code to see if it was doing something that caused the above auto-repair behavior.

Otherwise, I am considering keeping track of the broken images via onError. If the FlatList is manually refreshed by the user via pull down refresh, I will call the exported loadImage on each broken one and then generate a new key for the corresponding BlastedImage component to force it to remount. I expect this will fix the issue.

Is there a better way to force reloading of the images that initially failed?

[bradstiff]

After further investigation into this package, I discovered the following.

When an image fails to load due to a network timeout or invalid url, the error state value is set and the component renders image-error.png.

Sending a new instance of the source object prop has no impact, because the effect that fetches the image returns early when the error state value is set.

Removing the error state value from the effect dependency causes an infinite rendering loop because the source prop is modified by the component itself (e.g., not a stable value).

So there is no way to retry fetching the image other than unmounting and remounting.