Get view position in React-native

Measure and get position on view react-native

Hi Guys, In this article, we are going to learn about how to get a view position in react-native, we are going to explore how to measure and get the position of react-native elements on the screen, we are going to use onLayout, measureInWindow, also displayed when view renders using onLayout and display onPress using measureInWindow, so let’s start


1. Create a new project

2. Imports following components

3. Define default values in the constructor

4. Measure view position onPress

We are using measureInWindow to measure the component position.

as you saw in the above method you are storing x, y position, and height, width in the state.

In the above method, we are using the view using reference this.refs.Marker just add ref=”Marker” in view which you want to measure like below

5. Measure position using onLayout onRender view

You have to add onLayout on view like below.

onLayout returns following JSON object using nativeEvent.layout

Let’s see the full source code

6. Full source code

7. Output:

Get view position react-native using MeasureInWindow and onLayout

Thank you 🙂





Leave a Reply

Your email address will not be published.