Sometimes, we want to get the position of an element with React Native.
In this article, we’ll look at how to get the position of an element with React Native.
How to get the position of an element with React Native?
To get the position of an element with React Native, we can get it from the View‘s onLayout callback.
For instance, we write
<View
onLayout={(event) => {
const layout = event.nativeEvent.layout;
console.log("height:", layout.height);
console.log("width:", layout.width);
console.log("x:", layout.x);
console.log("y:", layout.y);
}}
></View>
to add a View with the onLayout prop set to a function that gets the position values from the event.nativeEvent.layout property.
We then get the height, width, x, and y values from the layout object.
Conclusion
To get the position of an element with React Native, we can get it from the View‘s onLayout callback.
