Image Component will not update correctly when passing in new url
See original GitHub issueSo 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:
- Created 7 years ago
- Reactions:21
- Comments:60 (16 by maintainers)
Top 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 >
Top Related Medium Post
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I’ve experienced that same issue. Try adding a
key={this.state.source.uri}
property to the imageStill broken on RN 61, even after adding the key prop, cache=“reload”, and converting http to https.