Categories
JavaScript Answers

How to get the position of an element with React Native?

Spread the love

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.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.