react-native: [Image] loadingIndicatorSrc / defaultSource not working as expected

I have tried to set the loading indicator source for android’s ImageView, yet it doesn’t work.

From the release log in react-native it says that

Added loadingIndicatorSrc property to Image, similar to iOS defaultSource, for displaying something while loading a38cd5c

So I set it in this way:

<Image
  {...this.props}
  loadingIndicatorSource={require('./img/placeholder.jpg')} />

I have checked with debugger that the loadingIndicatorSource is obtained in Image.android.js, which has its dimensions, and the uri for it. With iOS, it works with the defaultSource props.

So, is the android version not working?

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 2
Comments: 27 (6 by maintainers)

Most upvoted comments

Was just browsing through the docs, trying to find a way to show a “default/backup” image if the loading fails on Android: https://facebook.github.io/react-native/docs/image.html

If I’m reading this correctly, onError and defaultSource are both only available on iOS? What are us poor Android users supposed to see when an image fails to load? Is there any way to show a default or “failed to load” image on Android?

+26

mfkp on Sep 6, 2016

still don’t know why is so hard to support android default source

rainer-liao on Dec 28, 2016

https://github.com/facebook/react-native/blob/2716f53220f947c690d5f627286aad51313256a0/ReactAndroid/src/main/java/com/facebook/react/views/image/ReactImageView.java#L316-L321

code says that only the native resource can be used as the loadingIndicatorSource.

aipsel on Jan 24, 2018

@cfs5403

You can do this workaround:

<Image source={your image}>
    <Image source={your placeholder image} />
</Image>

Also, in Android you have to set zIndex: -1 in the placeholder image.

I don’t know how loadingIndicatorSource isn’t working yet.

DarkHollow on Jan 14, 2017