react-native: [Image & ListView] Image in ListView is not updated when re-rendering

Say I have such row in ListView

return (
        <View style={styles.chatRow}>
          <Image source={{ uri: otherUser.avatarUrl }} style={styles.chatAvatar} />
          <View style={styles.chatRowInfo}>
            <Text style={styles.chatRowName}> {otherUser.name} </Text>
            <Text style={styles.chatRowText}> {Tool.trimToLength(chatContent, 40)} </Text>
            <Text style={styles.chatRowText}> {otherUser.avatarUrl} </Text>
          </View>
        </View>
    );

When the state changes, the Text’s are re-rendered but the Image isn’t. The last Text shows that the avatarUrl is updated correctly. However, the Image still shows the old picture. I’m wondering if this is due to Image doesn’t compare {uri: xxx} deeply?

Thanks

About this issue

  • Original URL
  • State: closed
  • Created 9 years ago
  • Reactions: 4
  • Comments: 32 (8 by maintainers)

Most upvoted comments

To answer my own problem - Image rerender works by adding a ‘key’ param with same value as the uri <Image key={url} source={{uri:url}} />

https://github.com/facebook/react-native/issues/1397#issuecomment-105367632

I don’t think this should be closed. Images in ListViews don’t re-render when you change the uri props. Feels like a proper bug.

Any chance I can reopen this?

I had a similar issue: every time I added a new element to the list, it did not populate the new “graphical row” with the correct data (even if in the state are correct) but with a copy of the first row.

Adding the key={id} worked for me.

So it is open? Does FlatList take care of this issue?