React Native how replace image url on error? - react-native

Question

I have an app which displays multiple images which I load from the API. Now the problem is some of the images are expired which is causing a problem on Android, in Android the screen starts lagging as soon as the expired image loads on the screen.
I have tried replacing the image source with onError={() => this.imgRefs[img_unique_id].setNativeProps({src: [{uri: this.state.workingUri}]})} this method but its not working.
I cannot use the local state as it is not saving the output in the local state.
I have tried the following code
<Image
source={image.url}
progressiveRenderingEnabled={true}
ref={item.id}
onError={(e) => this.refs[item.id].setNativeProps({source: [{uri: "working image URL"}]})}
resizeMethod={"scale"}>
</Image>
The above code gives me an undefined setNativeProps error, and if I do not use the onError on android it shows me memory leak error.

Answer 1

Here is a complete example of that. To have own state for every FlatList item, I created a class.
import React, { Component, PureComponent } from 'react';
import { FlatList, Text, View, Image } from 'react-native';
class ItemClass extends PureComponent {
state = {
isImageExit: null
}
componentWillMount = () => {
const { task } = this.props;
Image.getSize(task.url, (width, height) => {
if(width>0){
this.setState({ isImageExit: true });
}
else{
this.setState({ isImageExit: false });
}
}, () => {
this.setState({ isImageExit: false });
});
}
render() {
const { isImageExit } = this.state;
const { task } = this.props;
const url = isImageExit ? task.url : 'https://dummyimage.com/600x400/000/fff';
if (isImageExit === null) {
return null;
}
return (
<Image
style={{ height: 200, width: 200 }}
source={{ uri: url }}
/>
);
}
}
export default class App extends Component {
render() {
const data = [
{ url: 'url' },
{ url:'https://cdn.pixabay.com/photo/2017/08/05/18/53/mountain-2585069_1280.jpg' },
];
return (
<View style={{alignItems: 'center', top: 50}}>
<FlatList
data={data}
renderItem={({ item }) => <ItemClass task={item} />}
/>
</View>
);
}
}

Answer 2

I think you should use data received from Api and set state accordingly inside componentWillReceiveProps because I think setting state is the best way to achieve this result.
.
this.setState = { image: { uri: 'image_uri_from_api' } }
Inside <Image> add -
<Image style={ your_custom_style }
source={ this.state.image }
onError={ this.onError.bind(this) }
/>
Inside onError add this -
onError(error){
this.setState({ image: require('your_local_image.path')})
}
Hope it works now !