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

[lazywei]

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

[JohnyDays]

It's not a comparison problem, because even the shallow comparison would return false, given you are creating different object instances on every render. So I'm afraid that's not the issue. I think in #1397 @ide mentioned there might be some bug in the Image class that causes Images not to change, might want to check that.

[adriansdev]

Have same issue, dataSource updated, row change is triggered and text updated but image does not rerender with new url

[adriansdev]

To answer my own problem - Image rerender works by adding a 'key' param with same value as the uri

#1397 (comment)

[ghost]

Thank you for reporting this issue and appreciate your patience. We've notified the core team for an update on this issue. We're looking for a response within the next 30 days or the issue may be closed.

[JohnyDays]

@adrian-social-prod It does work, but it recreates the entire image view. This might not be problematic for 1 image, but for a few dozen it starts to become costly.

[adriansdev]

is still a problem in 0.8.0. list view image does not change when a new item is added to list unless the 'key' param is used to force the image to rerender. list is inside a TabBar item.

Seems like a major problem to me.

[brentvatne]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out it's new home: https://productpains.com/post/react-native/image-listview-image-in-listview-is-not-updated-when-re-rendering

[KishPatel1996]

Any chance I can reopen this?

[npomfret]

Please re-open - I still have the issue with RN 0.28. It only seems to be a problem under certain circumstances. For me it happens when:

An image is added to the end of the list, AND it is adjacent in the list to another image. Adding key={uri} didn't help.

[merielleimpreso]

@npomfret: Were you able to fix the issue? I actually run into the same problem as yours. I'm using RN 0.30.

[ippy04]

might try key={source.uri} instead of key={uri}

[carera]

Any updates on this? So far only hacking the key property seems to be solving the problem. In my case, i render multiple images in a for loop, and under certain condition, i render different images, so it has to look something like this:

const PATH_TO_IMG_1 = '/path/to/img/1.png'
const PATH_TO_IMG_2 = '/path/to/img/2.png'

render() {
  let arr = []
  for (let i=1; i < 100; i++) {
    if (cond) {
      arr.push(<Image source={require(PATH_TO_IMG_1)} key={PATH_TO_IMG_1+i}/>)
    } else {
      arr.push(<Image source={require(PATH_TO_IMG_2)} key={PATH_TO_IMG_2+i}/>)      
    }
  }
  return <View>{arr}</View>
}

Not sure if requiring image within a loop is efficient though.

[JohnyDays]

You can just require the images at the top @carera
const IMG_1 = require('/path/to/img/1.png') but i don't think that's causing your problem ( it may be though )

[npomfret]

@merielleimpreso i don't have a 'proper' fix, but hacking the key={uri} worked around it

[sscaff1]

I'm having the same issue, but hacking the key={uri} also worked for me.

[npomfret]

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.

[kelset]

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.

[joeferraro]

This is happening to me as well on 0.38. After updating the ListView, the Image in the new list element will only load after scrolling it off then on screen.

Update: this is not specific to ListView, it happens in any iterator, despite setting key.

[tianxind]

Yes seeing the same problem as well. This ticket shouldn't be closed.

[iamcco]

same issue

[hugomosh]

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

[mchandleraz]

I just ran into this.

I'm rendering an image using a remote URL, provided by my components initial state. Some UI actions can cause the URL that's store in component state to update. If I render the URL using a Text component, I see state updating. It does not update the Image component. I tried adding a key property of Math.random() and that causes the image to disappear entirely when state is updated.

EDIT: After taking a closer look at the URL being returned from my API, I noticed it's an http url. https url works fine!

[jose920405]

I join the question of @hugomosh

[eurobob]

@hugomosh @jose920405 I've also been experiencing this issue with FlatList :/

[TheToto]

I've this issue with FlatList too...

[brzonsea]

I'm also experiencing this issue with Flatlist

[MERTKIRKALI]

+1

[lucidtheory]

RN 54.4 still happening

Same, when using the FlatList and adding a key = {uri} prop the image will update but then it just show up blank.

If I change the amount of rows in the FlatList or make a few further changes to the data in the FlatList then the new data will appear. I think this has something to do with the row in the FlatList not completely being redrawn maybe? Maybe iterators are caching image resources until the row is completely redrawn.

Something I am doing for now as a workaround is using the pull to refresh. I don't love it but it is the only thing that kind of works for the user experience right now.

     <FlatList
          ....
          refreshing = {false}
          onRefresh = {() => {
            let flatListData = this.state.data
            this.setState({data: []})
            this.setState({data: flatListData})
          }}
          ....more code
     />

basically emptying and refilling the data when a user pulls down to refresh the list.

[robisaks]

Someone on StackOverflow report that if you don't set the size on the image, it will re-render correctly. This fix didn't work for me but I'm posting it here for others just in case.

https://stackoverflow.com/questions/37529211/react-native-image-wont-rerender-when-state-changes

[alexandretournier]

Using react-native-image-cache instead of Image component solved this issue for me. Maybe related to kfiroo/react-native-cached-image#26

[h-asadollahi]

@alexandretournier may not be used.
I found the solution.
check this one

[alexandretournier]

thanks @Asadallahi