React Native how can get view X Y positions - react-native

Question

import { StyleSheet, Text, View , Animated} from 'react-native'
import React from 'react'
import {useState} from 'react';
const HomeScreen = () => {
const [heightBtn, setHeightBtn] = useState(false)
const [widthBtn, setWidthBtn] = useState(false)
const [XBtn, setXBtn] = useState(0)
const [YBtn, setYBtn] = useState(0)
return (
<View style={{
flex:1,
backgroundColor:'black'
}}>
<View
onLayout={({ nativeEvent }) => {
const { x, y, height, width } = nativeEvent.layout
setHeightBtn(height)
setWidthBtn(width)
setXBtn(x)
setYBtn(y)
}}
style={{
backgroundColor:'red',
height:50,
width:100,
position:'absolute',
transform: [
{
translateX: 100
},
{
translateY: 200
}
],
}}>
</View>
<View
style={{
backgroundColor:'green',
height:heightBtn,
width:widthBtn,
position:'absolute',
transform: [
{
translateX: XBtn
},
{
translateY: YBtn
}
],
}}>
</View>
</View>
)
}
export default HomeScreen
const styles = StyleSheet.create({})
I want to get Height, Width, and XY positions of element. The Height and Width works but the XY positions doesn't work in My Device in (IOS) only work when open the code in the Web View.
Here is the expo snack? Go to snack in the web view Height, Width, and XY positions work but if you open it with device only Height and Width works.