React-native-fast-image: Image size get from onLoad() event is incorrect on Android

[rocwind]

The width and height get from onLoad() event is incorrect on Android. It shows 720x1192 (depends on the screen size) for below example code on Android, and it works fine on iOS (400x400).

    "react-native": "^0.59.3",
    "react-native-fast-image": "^5.3.0"

onLoad = (evt) => {
    console.warn(evt.nativeEvent);
}
...
        <FastImage
          onLoad={this.onLoad}
          source={{
            uri: 'https://unsplash.it/400/400?image=1'
          }}
          style={styles.image}
        />
...

full example project can be found at: https://github.com/rocwind/fast-image-test

[ryanypm]

same issue!

[liuhy412484577]

same issue

[saykalik]

same issue

[yungkittty]

same issue! (It gives the view size, not the natural size).

[tjbenton]

the onLoad function is just passed down to the react-native Image component so the issue is more likely with react native it's self. That being said there's a workaround for it.

For server images you can use Image.getSize, and for local images you can use Image.resolveAssetSource. I'm not sure why getSize doesn't just support both but it doesn't so I would just write a util function like this.

function getSize (_) {
  // resolve the source and use it instead
  const src = ReactImage.resolveAssetSource(_)

  return new Promise((resolve, reject) => {
    if (!src) {
      reject(new Error('must pass in a valid source'))
    } else if (src.uri) {
      ReactImage.getSize(
        src.uri,
        (width, height) => resolve({ width, height }),
        reject
      )
    } else {
      resolve({ width: src.width, height: src.height })
    }
  })
}

then in your code you can just run it and use the result to set the state on your component

getSize(this.props.source)
  .then(({ width, height }) => this.setState({ width, height ))

[Dylan0916]

same issue

[bohdan145]

Yeah, I've got the same problem, but only on Android 7.1 _(and maybe lower, but I didn't test it)_
Android 8+ image sizes works as expected

[ducbau275]

Same issue !!! Android 9. RN 0.60.4

[pzxbc]

Same issue on Android 8.0 RN 0.59

[pzxbc]

I found that in4core have solved this problem. please refer to this commit https://github.com/DylanVann/react-native-fast-image/commit/3e8f2e4104bdca5eea63aeee7499018f3c3da5fc

Also, you have to comment REACT_ON_LOAD_EVENT in FastImageRequestListener.onResourceReady, otherwise you will receive this event twice

It works on Android 8.0 & RN 0.59

[lschuft]

This is still an issue. ¿Any updates? ¿Any workarounds?

[bohdan145]

I’ve used Image.getSize for Android

Отправлено с iPhone

22 февр. 2020 г., в 08:46, Lucas Schuft [e-mail] написал(а):


This is still an issue. ¿Any updates? ¿Any workarounds?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or unsubscribe.

[ahartzog]

The nativeEvent property on the onload event is null on android.

[mark5566]

same issue on IOS

[Strate]

Looks like we need adopt this code to get real image size: https://github.com/bumptech/glide/issues/781#issuecomment-160953996

[STIENLILLY]

same issue on Android 9.0 RN 0.62.2

[fattahmuhyiddeen]

same issue on android. ios working fine. RN 0.62.2

[chenqi777]

Please try using this resizeMode={FastImage.resizeMode.stretch}

[nadav2051]

Still happening, even when using 'stretch' as suggested. RN 0.63.3 & RNFastImage 8.3.2