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 Component will not update correctly when passing in new url

See original GitHub issue

So I have this basic network image component. It will probably look similar to the one in the Image Component documents. The question is that when I switch the url, for the image, the image itself will not change to the new one, although it seems to be calling the render function again.

Device: iOS Using: Mac React-Native: 0.26.3

import React from 'react'
import {
  View,
  Image
} from 'react-native'

const NetworkImage = React.createClass({
  getInitialState() {
    return {
      source: this.props.source
    }
  },
  componentWillReceiveProps(newProps) {
    if (newProps.source !== this.props.source) {
      this.setState({
        source: newProps.source
      })
    }
  },
  render() {
    console.log('source: ', this.props)
    return (
      <Image
        style={this.props.style}
        source={this.state.source}
        onLoad={() => {
          console.log('loaded image!')
        }}
        onLoadStart={() => {
          console.log('load starting')
        }}/>)
  }
})

module.exports = NetworkImage

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:21
  • Comments:60 (16 by maintainers)

github_iconTop GitHub Comments

301reactions
npomfretcommented, Aug 8, 2016

I’ve experienced that same issue. Try adding a key={this.state.source.uri} property to the image

18reactions
Awfulnautcommented, Apr 30, 2020

Still broken on RN 61, even after adding the key prop, cache=“reload”, and converting http to https.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Force React to reload an image file? - Stack Overflow
Im having a problem when a user uploads a new image. As the image path is the same React doesn't know anything has...
Read more >
React: Updating Image Src The Right Way | by aaalex.eth
When we first fetch the user's account information, along with a URL of their profile image, the browser tends to cache that information....
Read more >
Progressive image loading in React: Tutorial - LogRocket Blog
To update the src of the img and render the actual image, we must store the default image source in a state variable...
Read more >
react-imgix - npm
This will save the component from having to do two render passes, and it will render a background image immediately. This is accomplished...
Read more >
Image - React Native
A React component for displaying different types of images, ... When building your own native code, GIF and WebP are not supported by ......
Read more >

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 Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found