react-native-fast-image
react-native-fast-image copied to clipboard
DylanVann
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
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 ))
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
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
I’ve used Image.getSize for Android
Отправлено с iPhone
22 февр. 2020 г., в 08:46, Lucas Schuft [email protected] написал(а):
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.
Looks like we need adopt this code to get real image size: https://github.com/bumptech/glide/issues/781#issuecomment-160953996
Still happening, even when using 'stretch' as suggested. RN 0.63.3 & RNFastImage 8.3.2
const height = Platform.OS === 'android' ? ((e.nativeEvent?.source?.height * baseWidth) / e.nativeEvent?.source?.width) : (e.nativeEvent.height * baseWidth) / e.nativeEvent.width
const imgStyle = {
width: baseWidth,
height: height || baseWidth
};
this.setState({ imgStyle: imgStyle })
rn 0.67.3 can be used.
