Odd behavior in RN trying to center an image - react-native

Question

I have an image I wish to center in the display using React Native. I have to use 'absolute' positioning for this particular image. At first, to get the image dimensions I am using the following code:
import React, { Component } from "react";
import { Button, Dimensions, Image, Platform, SafeAreaView, ScrollView, StyleSheet, Text, TouchableOpacity, View } from "react-native"; I
const halfWidth = Number((Dimensions.get("window").width) / 2); //half the device Width
const halfHeight = Number((Dimensions.get("window").height) / 2); //half the device Height
var logoImage = require('./images/logo_white_128.png');
var logoWidth = 0, logoHeight = 0, logo_X = 0, logo_Y = 0;
export default class Initial extends Component {
constructor(props) {
super(props);
this.state = {
...
};
}
getDims = async() => {
var source = Image.resolveAssetSource(logoImage);
//source.width, source.height`
logoWidth = source.width;
logoHeight = source.height;
logo_X = halfWidth - (logoWidth / 2);
logo_Y = halfHeight - (logoHeight / 2);
console.log("logoWidth is: " + source.width);
console.log("logoHeight is: " + source.height);
console.log("logo_X is: " + logo_X);
console.log("logo_Y is: " + logo_Y);
} //getDims
componentDidMount() {
this.getDims(); //call to determine dimension of logo image...
} //componentDidMount
As can be seen, I am using the 'compoinentDidMount' to call a function which uses the 'Image.resolveAssetSource' to determine the dimensions of the image. I am also setting the positioning of the X and Y coordinate values in global variables so as properly 'center' the image in the screen display.
In the 'rendering' part:
render() {
return (
<>
<SafeAreaView style={styles.container}>
<ScrollView style={styles.scrollView}>
...
<Image style={styles.img} source={require('./images/logo_white_128.png')} />
...
</ScrollView>
</SafeAreaView>
</>
)
} //render
} //class 'Initial' Component
const styles = StyleSheet.create({
img: {
position: "absolute",
top: logo_X,
left: logo_Y
}
});
For whatever reason the image is rendered in the 'top left' corner of the screen. It is not centered as it should be. Obviously it seems to be setting the image at the "0" position on the X and Y axis. Therefore for some reason the global variables I stated in the 'getDims' function did not properly reset the variable values. All of the 'math' is correct. The console.log statements indicate both the X and Y dimensions for the image are determined correctly...and the 'positioning' variables I set ('logo_X' and 'logo_Y') also seem correct. If anybody has an idea where the error may be please make a suggestion, it would be greatly appreciated!