react native: How to set Image defaultSource on Android

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

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 2

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>