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)
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?