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

[fattahmuhyiddeen]

same issue on android. ios working fine. RN 0.62.2

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