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

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

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 14
Comments: 22

Most upvoted comments

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

+10

chenqi777 on Sep 8, 2020

same issue on android. ios working fine. RN 0.62.2

fattahmuhyiddeen on Jun 17, 2020

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

tjbenton on Jun 13, 2019

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

pzxbc on Oct 29, 2019

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

Strate on May 19, 2020

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

lschuft on Feb 22, 2020

Same issue !!! Android 9. RN 0.60.4

ducbau275 on Oct 1, 2019

same issue

Dylan0916 on Aug 8, 2019