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
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@yychun1217
Copy link

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
Contributor

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

@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

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

@brentvatne
Copy link
Collaborator

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

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

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

@brentvatne
Copy link
Collaborator

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

+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

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

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 commented Sep 22, 2016

Any updates?

@huyhai
Copy link

huyhai commented Oct 25, 2016

any updates ?

@huyhai
Copy link

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

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

@rainer-liao
Copy link

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

@DarkHollow
Copy link

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

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 commented Apr 21, 2017

Any updates?

@rohitgoyal
Copy link

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

@madeindjs
Copy link

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 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 commented Aug 8, 2017

Neither works: loadingIndicatorSource and defaultSource

"react-native": "0.47.1"

@sujitpk-perennial
Copy link

still waiting Nov 15

@smalltwo
Copy link

ios add borderRadius it works but android still not work

@est7
Copy link

est7 commented Dec 25, 2017

is anything updates/?

@aipsel
Copy link

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
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 20, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests