I have an image that I am importing into my app through the camera or camera roll.

That image is shown within a view but can be portrait, landscape, however. To achieve this I use the following styles, on the <Image>

style={{flex:1 , width: undefined, height: undefined, resizeMode: 'contain'}} source={{ uri: image }} onLayout={(event) => {
    const { x, y, width, height } = event.nativeEvent.layout;
}} />

I am attempting to overlay some text (over any text in the image). I can do this based on X & Y coordinates of the view that the image sits inside, but as the image itself is a moving target, I need to know the width and height of the image. This will let me calculate where my coordinates should be, taking into account of the size of the containing view and the size of the image inside it to work out where my X and Y should start.

My problem is that I have API data coming back and I have this onLayout event all of which is returning information at different points. Is there any way that I can write a function which I can call at will in order to find out the size of a view or image?

Possibly by making it a component and calling it when required or something? Or turning things around and calling a function from my onLayout and waiting for the API data?

I am fairly new to React Native so apologies for my poor understanding of lifecycles and asynchronous data.

Edit: I actually seem to have an issue with that line inside the onLayout. Whatever image I select, landscape or portrait it returns the same size... I presume this must be because of how resizeMode contain works? The image is actually full size, but it displays to fit inside. So I either need to figure out how to get the size of the displayed image within the 'contain' <Image>, or find another way to do this without using resizeMode contain!