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

Comments

Projects
None yet
@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

This comment has been minimized.

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

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Contributor

MuruganDurai commented Jan 1, 2016

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

@brentvatne

This comment has been minimized.

Collaborator

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 from Is Android ImageView's loadingIndicatorSrc prop working in react-native 0.17? to [Image] loadingIndicatorSrc / defaultSource not working as expected Jan 1, 2016

@nicklockwood

This comment has been minimized.

Contributor

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

This comment has been minimized.

Contributor

nicklockwood commented Jan 1, 2016

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

@brentvatne

This comment has been minimized.

Collaborator

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

This comment has been minimized.

Contributor

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 mkonicek added the Icebox label Jul 29, 2016

@mkonicek

This comment has been minimized.

Contributor

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

This comment has been minimized.

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

This comment has been minimized.

roysG commented Sep 22, 2016

Any updates?

@huyhai

This comment has been minimized.

huyhai commented Oct 25, 2016

any updates ?

@huyhai

This comment has been minimized.

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

This comment has been minimized.

fschai89 commented Dec 15, 2016

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

@rainer-liao

This comment has been minimized.

rainer-liao commented Dec 28, 2016

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

@DarkHollow

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Jakevin commented Apr 21, 2017

Any updates?

@rohitgoyal

This comment has been minimized.

rohitgoyal commented Jun 2, 2017

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

@madeindjs

This comment has been minimized.

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')}
/>
@Tom29

This comment has been minimized.

Tom29 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

This comment has been minimized.

douglasjunior commented Aug 8, 2017

Neither works: loadingIndicatorSource and defaultSource

"react-native": "0.47.1"

@sujitpk-perennial

This comment has been minimized.

sujitpk-perennial commented Nov 15, 2017

still waiting Nov 15

@smalltwo

This comment has been minimized.

smalltwo commented Dec 20, 2017

ios add borderRadius it works but android still not work

@est7

This comment has been minimized.

est7 commented Dec 25, 2017

is anything updates/?

@aipsel

This comment has been minimized.

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.