question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

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

github_iconTop GitHub Comments

17reactions
adriansdevcommented, Jun 30, 2015

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

5reactions
npomfretcommented, Nov 4, 2016

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

ListView is not re-rendering after dataSource has been updated
Basically, I am updating a property in my listView datasource when I click on markComplete. Everything is working fine expect the re-rendering ......
Read more >
Performance Overview - React Native
Your grandparents' generation called movies "moving pictures" for a ... ListView initial rendering is too slow or scroll performance is bad ...
Read more >
Optimizing React Native performance - LogRocket Blog
Solve your React Native app performance issues, like console statements and animations, using these optimization tools.
Read more >
Slow rendering - Android Developers
If your app does not use the UI Toolkit, as is the case for apps that are ... ListView and especially RecyclerView are...
Read more >
SharePoint Online Group By List View Not updating after
Is it possible like on item update the item goes to it respective group in the list view without screen refresh? PFA image...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found