React-native: Image onLoad / onLoadStart not firing

[cbjs]

react-native 0.43 & 0.44

[spencewine]

Broken for me in 0.42

[ChongChou]

same issue for me, react-native 0.44, iOS was broken, but android work fine

[Fanghornn]

Hello, i also went through the same issue with react-native in 0.42 but i've been able to fix it.

I had a component that renders a single <Image /> and it's only purpose was to compute it's height correctly.

So what i was doing, is that i was using the state to set the style of the image like style={[styles.image, this.state]}

And the state looks like this in the constructor: this.state = { height: 0 };

Then, after mounting and first render, the state height would've been updated by the onLoad event.

What i figured out, is that if you set height to 0 before rendering, IOS won't fire onLoad/onLoadStart, by setting it to 1 these events fires again.

Hope this will help, good luck.

[mikelambert]

I am experiencing this for Android 0.45.1. I don't need/care for this feature on iOS, so haven't tested it there. It is not calling onLoadEnd, despite shouldNotifyLoadEvents being set.

I am using an already-loaded image source (ie, same as another component), though not sure if that
is relevant here (ie, will it still run through these lifecycle events if the image is pre-loaded?).

[liucr]

It's ok on iOS, but partially can't display on android on the same list.
I use the 0.45.1 version.

It's OK when I set resizeMode to 'cover', but don't display as the prop is 'stretch' or 'center'.
It's seemly happen on the load-more page only.

[davidroman0O]

I'm on 0.46.1 and i got the same issue !

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. If you think this issue should definitely remain open, please let us know why. Thank you for your contributions.

[ljunb]

Same issue for me in 0.48.2, it's works fine on Android but not iOS. And we figured out the same way to fix it as @Fanghornn mentions.

[hiphapis]

I got same issue on 0.49.3

<Image
  source={{ uri }}
  onLoad={() => console.log('onLoad')}
  onLoadStart={() => console.log('onLoadStart')}
  onLoadEnd={() => console.log('onLoadEnd')}
  resizeMode="cover" />

any handlers are not called

[Oblongmana]

Ditto on 0.49.3 on iOS

[jack2684]

Ditto, RN 0.51.0 on iOS

[monkingame]

RN 0.51.0 same issue +1

[react-native-bot]

This issue was marked as lacking information required by the issue template. There has been no activity on this issue for a while, so I will go ahead and close it.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

If you are the author of this issue and you believe this issue was closed in error (i.e. you have edited your issue to ensure it meets the template requirements), please let us know.

[NeliHarbuzava]

Thanks to @Fanghornn . It works!