Image Component will not update correctly when passing in new url

[jnrepo]

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

[npomfret]

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

[eladgel]

@npomfret this solution works for me

[jnrepo]

@npomfret unfortunately the solution didn't work for me. What ended up working was putting a timeout around setState within the componentWillReceiveProps. Not the most ideal solution :(

Code:

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

const TimerMixin = require('react-timer-mixin')

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

module.exports = NetworkImage

[npomfret]

How strange! This feels like a fairly serious bug. Can you reproduce it? What might be helpful is a stand alone git repo that illustrates the problem.

[charpeni]

@facebook-github-bot label Icebox

[charpeni]

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 its new home: https://productpains.com/post/react-native/image-component-will-not-update-correctly-when-passing-in-new-url

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[charpeni]

@facebook-github-bot close

[facebook-github-bot]

@charpeni tells me to close this issue. If you think it should still be opened let us know why.

[wcandillon]

@npomfret I learned about the bug the hard way 😅 . It quite a serious one that probably should be reopened.