import React, {useState} from 'react';
import {View, Text, StyleSheet} from 'react-native';
const ViewWithLocation = () => {
const [getLocation, setGetLocation] = useState({
height: 0,
width: 0,
x: 0,
y: 0,
});
const onLocation = e => {
var {x, y, width, height} = e.nativeEvent.layout;
setGetLocation({height, width, x, y});
};
return (
<View style={styles.container}>
<View onLayout={e => onLocation(e)} style={styles.textBox}>
<Text style={styles.text}>
Height: {getLocation.height}
{'\n'}
Width: {getLocation.width}
{'\n'}
Position X: {getLocation.x}
{'\n'}
Position Y: {getLocation.y}
</Text>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
textBox: {
width: 270,
padding: 10,
borderWidth: 1,
},
text: {
fontSize: 16,
textAlign: 'center',
},
});
export default ViewWithLocation;