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

[yychun1217]

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?

[facebook-github-bot]

Hey yychun1217, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[brentvatne]

@yychun1217 - does the image that you are using as the loading indicator work if you just use it as a regular image source?

[MuruganDurai]

@brentvatne - How to make it work like defaultSource??

[brentvatne]

Confirmed that this is an issue, couldn't even get defaultSource working properly on iOS. Added an example to UIExplorer for people to test against. cc @nicklockwood and @mkonicek if you can ping Olivier that would be great :)

On iOS:

• If you include source, defaultSource is never shown. If you leave source out, it will show defaultSource

On Android:

• loadingIndicatorSource is never shown, regardless of whether source is present.

[nicklockwood]

I'm not actually sure what the intended purpose of defaultSource is.

I thought it was an image to be displayed only if the source failed to load, but if Android's equivalent is called loadingIndicatorSource then perhaps it's expected to always be shown until the real source has loaded?

I'm wondering if we should either a) have two properties, one to be shown while loading and another to be shown if the image fails to load, or b) get rid of the property altogether, as developers can implement this functionality themselves fairly easily by using the <Image/> events.

[nicklockwood]

I'm leaning towards option b) - does anyone feel strongly that this is a useful feature?

[brentvatne]

I thought it was an image to be displayed only if the source failed to load, but if Android's equivalent is called loadingIndicatorSource then perhaps it's expected to always be shown until the real source has loaded?

I'm actually not sure if they are intended to be the same, I inquired in the original commit of loadingIndicatorSource but didn't hear back from Olivier.

I'm leaning towards option b) - does anyone feel strongly that this is a useful feature?

I think b) is reasonable, @ide had the same thoughts about that too..... My only concern is that it introduces more work that we need to handle in JS, which is where I typically end up with perf bottlenecks.

[mangogogos]

+1

As for option b), currently the onError callback prop is iOS only so Im not sure that covering this functionality is actually possible in pure JS right now.

My use case involves an image with a potentially garbage url since I want to support the HTML return of textile (http://txstyle.org/) so it's possible to get a source like /fkjsdfjlkdsfmlsd since users are free to enter what they wish. But since RN supports a URI ref to an image that is stored locally and provides no safety checks for this (https://facebook.github.io/react-native/docs/images.html#images-from-hybrid-app-s-resources) Im getting crashes on such garbage URIs. (FWIW the crash occurs when Preconditions.checkNotNull throws a NullPointerException)

So if I could either have a defaultSource for when this occurs or an error callback that will fire and let me set a default source on Android that would be fantastic.

@brentvatne in #5158 you added the good first task label, could you perhaps point me to where I should look first to get this implemented?

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/image-loadingindicatorsrc-defaultsource-not-working-as-expected

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[mfkp]

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?

[roysG]

Any updates?

[huyhai]

any updates ?

[huyhai]

i found a solution, just put another Image inside an Image, one set background default one load from URL

[fschai89]

@huyhai can you explain what you mean by put another Image inside an Image? Thank you.

[rainer-liao]

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

[DarkHollow]

@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.

[philberg]

@DarkHollow I'm having an issue getting that to work with a borderRadius set on the images (profile photo). They seem to always come out square, thoughts?

[aliharis]

I had the same issue, and It worked for me when I added backgroundColor to the image.

<Image 
  resizeMode="cover"
  defaultSource={require('../assets/image-placeholder.jpg')}
  source={{ uri: data['thumbnail'] }} 
  style={{ width: 120, height: 120, backgroundColor: "#cccccc" }} />

[Jakevin]

Any updates?

[rohitgoyal]

Lot of people want this and there seems to be no update.

[madeindjs]

It not work for me too (even with backgroundColor trick..)

<Image
  style={styles.picture}
  source={{uri: 'https://raspberry-cook.fr' + rowData.image.url }}
  defaultSource={require('./assets/default.png')}
/>

[dzpt]

defaultSource doesn't work after updating the view.
You have a view has Image component, you reload this view and update Image source, if this source is 404, the Image doesn't update to defaultSource.

[douglasjunior]

Neither works: loadingIndicatorSource and defaultSource

"react-native": "0.47.1"

[sujitpk-perennial]

still waiting Nov 15

[smalltwo]

ios add borderRadius it works but android still not work

[est7]

is anything updates/?

[aipsel]

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.