onLoad, onError, onLoadStart and onLoadEnd do not fire for Image.

[ingvardm]

• I have reviewed the documentation
• I have searched existing issues
• I am using the latest React Native version

Environment

Environment:
  OS: macOS High Sierra 10.13.3
  Node: 8.9.4
  Yarn: 1.5.1
  npm: 5.5.1
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.2.0 => 16.2.0
  react-native: 0.54.0 => 0.54.0

Steps to Reproduce

<Image
  sourse={{uri: this.props.uri}}
  onLoad={this.onLoad}
  onError={this.onError}
/>

Expected Behavior

Should work as described in documentation
documentation

Actual Behavior

onLoad, onError, onLoadStart and onLoadEnd do not fire for Image, on both IOS and Android platforms

[react-native-bot]

Thanks for posting this! It looks like your issue may refer to an older version of React Native. Can you reproduce the issue on the latest release, v0.54?

Thank you for your contributions.

[ingvardm]

updated react-native and description

[namnh240795]

Same problems on android. 7.1.1
React Version: 16.3.0 alpha 1
React-Native Version: 54.0

Image error uri: http://media.hottab.net/uploads/api.hottabpos.com/206/thumbs/HeaderLogo_5bajVUqT.png

[iMerica]

Issue persists using latest and greatest as of today

[bkkwok]

Anyone know what version of React-Native these event handlers worked? Specifically onError.

onLoad, onLoadStart and onLoadEnd work on v55.4 for both ios and android for me. But onError does not. I need to provide a placeholder image when the Image fails to load correctly.

[duhseekoh]

None of the loading or error handlers on v55.4 work for me...

[ayehia]

The same issue here :(

[luisbraganca]

It does work, it just depends on the implementation.

For example, this code below works, it fires the console.log (this code is not useful or anything, I just created it so I could test if the events were properly being fired):

constructor(props) {
    super(props);
    this.state = { loaded: false };
}

_finishLoading = function () {
    console.log("Finished loading");
    this.setState({ loaded: true });
}

render = function () {
    return <Image onLoadEnd={this._finishLoading.bind(this)} {...this.props} />;
}

However, this code below does not work at all (it's a non-working LazyImage implementation):

constructor(props) {
    super(props);
    this.state = { loaded: false };
}

_finishLoading = function () {
    console.log("Finished loading");
    this.setState({ loaded: true });
}

render = function () {
    var image = <Image onLoadEnd={this._finishLoading.bind(this)} {...this.props} />;
    return this.state.loaded ? image : <Image {...this.props} source={Loader} />;
}

I'm assuming it's not firing the event because the Image has not been mounted so it will never initiate the loading.
Is there any way to force its mount or to fake mount an element? I just want it to start loading so it can change the this.state.loading to true

[FibreFoX]

onError seens to not being used on Android, other issues already existing for this:
#19073
#7440

Can't speak for the other events :(

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.