React Native, changing Image uri dynamically – image doesn't change

I’m mapping through an array of objects, which each have their own image path:

this.props.images = [{url:'myimage.png'},{url:'myimage.png'},{url:'myimage.png'}];

In my render I have something like:

this.props.images.map((img) => { return (<Image source={uri: img.url} />)};

This works fine, the images appear. However, when I dynamically re-order the images array, the images don’t change (while their dynamically transferred styles do change).

Its important to note, that my array is a prop managed through redux. So the component re-renders when it changes. To test this, I logged to the console using the onLayout callback, and verified it was called each time the state changed (even though the image itself did not change source).

I believe it has to do with the instance of the image itself not being removed first, but the array knows nothing about what is causing the re-order of elements.

Any ideas about how to solve this?

97 thoughts on “React Native, changing Image uri dynamically – image doesn't change”