Tengo una imagen que estoy importando a mi aplicación a través de la cámara o el carrete de la cámara.

Esa imagen se muestra dentro de una vista, pero puede ser vertical, horizontal, sin embargo. Para lograr esto utilizo los siguientes estilos, en la <Image>

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

Estoy intentando superponer algún texto (sobre cualquier texto en la imagen). Puedo hacer esto en función de las coordenadas X e Y de la vista en la que se encuentra la imagen, pero como la imagen en sí es un objetivo en movimiento, necesito saber el ancho y el alto de la imagen. Esto me permitirá calcular dónde deberían estar mis coordenadas, teniendo en cuenta el tamaño de la vista contenedora y el tamaño de la imagen dentro de ella para determinar dónde deberían comenzar mi X e Y.

Mi problema es que tengo datos de API que regresan y tengo este evento onLayout, que devuelve información en diferentes puntos. ¿Hay alguna forma de que pueda escribir una función a la que pueda llamar a voluntad para averiguar el tamaño de una vista o imagen?

¿Posiblemente convirtiéndolo en un componente y llamándolo cuando sea necesario o algo así? ¿O cambiar las cosas y llamar a una función desde mi onLayout y esperar los datos de la API?

Soy bastante nuevo en React Native, así que me disculpo por mi poca comprensión de los ciclos de vida y los datos asincrónicos.

Editar: en realidad parece que tengo un problema con esa línea dentro de onLayout. Cualquiera que sea la imagen que seleccione, paisaje o retrato, devuelve el mismo tamaño ... Supongo que esto debe ser debido a cómo funciona el contenido de resizeMode. La imagen es en realidad de tamaño completo, pero se muestra para que quepa dentro. Entonces, necesito descubrir cómo obtener el tamaño de la imagen mostrada dentro de 'contain' <Image> , o encontrar otra forma de hacerlo sin usar resizeMode container.