react native: How to set Image defaultSource on Android - image

Question

react native: How to set Image defaultSource on Android.
I have read the React native 1.58 document. I found the Image props defaultSource supported iOS only.
I need to set the default Image when the network Image load error.
I used to write the code like this:
{ ImageUrl?
<Image style={styles.docimg}
source={{uri: ImageUrl}}/>
:
<Image style={styles.docimg}
source={require('../../../resource/default.png')}/>
}
Now there is a problem. When the URL is a string type, but it isn't a correct network Image. As the URL is true then the Image will show nothing.
I saw the Image props onError maybe solve my issue.
I need to set the placeholder Image.

Answer 1

I have tried using #Ravi Raj's answer but seems not related to failure on loading image.
Beside the answer will make the image keep flashing between the default and actual image. ( The error that #vzhen met )
Therefore I have developed based on his answer and generated this component. See if this suits you ;)
progressive-image.js - Component <ProgressiveImage/>
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class ProgressiveImage extends Component {
state = { showDefault: true, error: false };
render() {
var image = this.state.showDefault ? require('loading.png') : ( this.state.error ? require('error.png') : { uri: this.props.uri } );
return (
<Image style={this.props.style}
source={image}
onLoadEnd={() => this.setState({showDefault: false})}
onError={() => this.setState({error: true})}
resizeMode={this.props.resizeMode}/>
);
}
}
Then import and call the component like this:
import ProgressiveImage from './progressive-image';
<ProgressiveImage style={{width: 100, height: 100}}
uri={'http://abc.def/ghi.jpg'}
resizeMode='contain'/>
Hope this answer can help you ;)

Answer 2

You just try this and hope it works...
// initially showDefault will be false
var icon = this.state.showDefault ? require('../../../resource/default.png') : {uri: ImageUrl};
return(
<Image
style={styles.docimg}
source={icon}
onLoadStart={() => this.setState({showDefault: true})}
onLoad={() => this.setState({showDefault: false})}
/>
)
Setting showDefault = false in onLoad() should not trigger url
fetch again since images are cached by default in android and IOS.

Answer 3

Work for me
<ImageBackground
style={{
width: 100,
height: 100,
marginRight: 20,
borderRadius: 10,
}}
source={
require('../../assets/images/Spinner.gif') //Indicator
}>
<Image
style={{
width: 100,
height: 100,
marginRight: 20,
borderRadius: 10,
}}
source={{
uri: `//Image U want To Show`
}}
/>
</ImageBackground>

Answer 4

const [error, setError]=setState(false);
return(){
<Image
onError={(error) => {
setError(true);
}}
source={
error
? require("../../assets/images/defaultImage.png")
: { uri: imageUrl }
}
/>
}
This will show the default image if your network image fails to load or gives an error 404.

Answer 5

According to the docs, the defaultSource prop is ignored on Android on Debug builds, so if you are looking for a placeholder while the actual source is loading -- not in case of errors -- make sure to test on release mode before implementing workarounds to load it only because of debug mode.
"Note: On Android, the default source prop is ignored on debug builds."

Answer 6

defaultSource doesn't work on android...
Please follow the method bellow to fix it:
Dont forget to import View, ImageBackground, & Image
class MyComponent extends Component {
constructor() {
this.state = {
isImageLoading: true,
}
}
render() {
<View>
<ImageBackground
source={{ uri: this.state.isImageLoading ? YOUR_DEFAULT_IMAGE : null }}
>
<Image
source={{ uri: YOUR_IMAGE }}
onLoad={() => this.setState({ isImageLoading: false })}
/>
</ImageBackground>
</View>
}
}