onLayout with Image - React Native - react-native

Question

I have a problem with onLayout in Image:
I have a function to display the dimension.
measureView(event) {
console.log(event.nativeEvent.layout.width);
console.log(event.nativeEvent.layout.height);
}
This Works and shows me the dimension of the TouchableWithoutFeedback
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}
onLayout={(event) => this.measureView(event)}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}/>
</TouchableWithoutFeedback>
But With the onLayout in the Image, i got nothing, just undefined.
<TouchableWithoutFeedback
style={styles.touchableWithoutFeedback}>
<Image style={styles.image}
source={require("./../assets/images/photo_1.jpg")}
onLayout={(event) => this.measureView(event)}/>
</TouchableWithoutFeedback>
Do you have an Idea why?
Thanks!

Answer 1

I had this problem recently as well. It looks like the <Image /> component mounts before the actual image gets loaded into the container. You probably want to instead use the onLoad property of <Image />. Once you do that you can pretty much proceed as normal...
<Image
onLoad={event => { console.log(event.nativeEvent.source); }}
source={require("./../assets/images/photo_1.jpg")}
style={styles.image}
/>
// Would log { height: 123, url: 'somestring', width: 123 }
Keep in mind that may or may not only work for static resources. I'm not 100% that network images provide a size through that function.
Good luck! :)