Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Image] loadingIndicatorSrc / defaultSource not working as expected #5017

Closed
yychun1217 opened this issue Dec 29, 2015 · 27 comments
Closed

[Image] loadingIndicatorSrc / defaultSource not working as expected #5017

yychun1217 opened this issue Dec 29, 2015 · 27 comments

Comments

@yychun1217
Copy link

@yychun1217 yychun1217 commented Dec 29, 2015

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
Copy link

@facebook-github-bot facebook-github-bot commented Dec 29, 2015

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
Copy link
Collaborator

@brentvatne brentvatne commented Jan 1, 2016

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

@MuruganDurai
Copy link
Contributor

@MuruganDurai MuruganDurai commented Jan 1, 2016

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

@brentvatne
Copy link
Collaborator

@brentvatne brentvatne commented Jan 1, 2016

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.
@brentvatne brentvatne changed the title Is Android ImageView's loadingIndicatorSrc prop working in react-native 0.17? [Image] loadingIndicatorSrc / defaultSource not working as expected Jan 1, 2016
@nicklockwood
Copy link
Contributor

@nicklockwood nicklockwood commented Jan 1, 2016

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
Copy link
Contributor

@nicklockwood nicklockwood commented Jan 1, 2016

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

@brentvatne
Copy link
Collaborator

@brentvatne brentvatne commented Jan 2, 2016

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
Copy link
Contributor

@mangogogos mangogogos commented Jan 18, 2016

+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
Copy link
Contributor

@mkonicek mkonicek commented Jul 29, 2016

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.

@mkonicek mkonicek closed this Jul 29, 2016
@mfkp
Copy link

@mfkp mfkp commented Sep 6, 2016

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
Copy link

@roysG roysG commented Sep 22, 2016

Any updates?

@huyhai
Copy link

@huyhai huyhai commented Oct 25, 2016

any updates ?

@huyhai
Copy link

@huyhai huyhai commented Oct 25, 2016

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

@fschai89
Copy link

@fschai89 fschai89 commented Dec 15, 2016

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

@rainer-liao
Copy link

@rainer-liao rainer-liao commented Dec 28, 2016

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

@DarkHollow
Copy link

@DarkHollow DarkHollow commented Jan 14, 2017

@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
Copy link

@philberg philberg commented Feb 8, 2017

@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
Copy link

@aliharis aliharis commented Apr 20, 2017

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
Copy link

@Jakevin Jakevin commented Apr 21, 2017

Any updates?

@rohitgoyal
Copy link

@rohitgoyal rohitgoyal commented Jun 2, 2017

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

@madeindjs
Copy link

@madeindjs madeindjs commented Jun 13, 2017

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
Copy link

@dzpt dzpt commented Jun 25, 2017

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
Copy link

@douglasjunior douglasjunior commented Aug 8, 2017

Neither works: loadingIndicatorSource and defaultSource

"react-native": "0.47.1"

@sujitpk-perennial
Copy link

@sujitpk-perennial sujitpk-perennial commented Nov 15, 2017

still waiting Nov 15

@smalltwo
Copy link

@smalltwo smalltwo commented Dec 20, 2017

ios add borderRadius it works but android still not work

@est7
Copy link

@est7 est7 commented Dec 25, 2017

is anything updates/?

@aipsel
Copy link

@aipsel aipsel commented Jan 24, 2018

public void setLoadingIndicatorSource(@Nullable String name) {
Drawable drawable = ResourceDrawableIdHelper.getInstance().getResourceDrawable(getContext(), name);
mLoadingImageDrawable =
drawable != null ? (Drawable) new AutoRotateDrawable(drawable, 1000) : null;
mIsDirty = true;
}

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

@facebook facebook locked as resolved and limited conversation to collaborators Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet