I am trying to update an image based on an stateful URL (changing the URL to 'undefined'). For some reasons, I have to recreate the image on iOS devices or they will not be updated... Check this snack.

Here is the code:

export default function App() {
  const [uri, setUri] = React.useState(
    "https://ichef.bbci.co.uk/news/640/cpsprodpb/150EA/production/_107005268_gettyimages-611696954.jpg"
  );

  console.log({ uri });

  //
  // Doesn't work on iOS if I do not pass a dynamic 'key' prop,
  // which will cause the recreation of the component...
  //
  const renderImage = () =>
    <Image /* key={uri} */ resizeMode="cover" source={{ uri }} style={styles.image} />

  return (
    <View style={styles.container}>
      {renderImage()}

      <TouchableOpacity onPress={() => setUri(undefined)}>
        <Text style={styles.paragraph}>
          Remove Image!
        </Text>
      </TouchableOpacity>
    </View>
  );
}

Any ideas why this happen?