ReactNative get the absolute position of a view relative to the screen

Question

with react native.

I can get the position and size with onLayout, but I want to get the absolute position of a view relative to the screen

please! the absolute position of a view relative to the screen

not the absolute position of a view relative to the parent view

What should I do?

Possible duplicate of [Get size of a View in React Native](https://stackoverflow.com/questions/30203154/get-size-of-a-view-in-react-native) — Balasubramanian, Sep 14 '17 at 10:17

Mohamed Khalil · Accepted Answer · 2018-08-04T09:28:40.793

35

you can use measure(callback) it Determines the location on screen, width, and height of the given view and returns the values via an async callback.

a better example can be found here React Native: Getting the position of an element

<View
  ref={(ref) => { this.marker = ref }}
  onLayout={({nativeEvent}) => {
    if (this.marker) {
      this.marker.measure((x, y, width, height, pageX, pageY) => {
                console.log(x, y, width, height, pageX, pageY);
       })
    }
  }}
 >

edited Aug 04 '18 at 09:28

answered Sep 14 '17 at 14:57

Mohamed Khalil

3,036
1
20
26

2

Gives me only `undefined`, with and without setTimeout, as parameters :/ – Martin Bories Mar 26 '18 at 07:03
1

please check now I updated the answer this was because the old ref string not supported any more – Mohamed Khalil Aug 04 '18 at 09:31
On iOs pageX is sometime equal to the width of the view. Any idea why? – Zach Aug 18 '20 at 17:13
1

@Zach it is normal when on the edge of the screen – Mohamed Khalil Aug 18 '20 at 20:32
You should `collapsible={false}` into View to prevent Android native view collapsing for optimization. – MJ Studio Feb 01 '23 at 08:54

score -3 · Answer 2 · answered Nov 15 '18 at 10:57

You might want to use the "onTouchStart". it Determines the location on screen from pageX, pageY of the given view and returns the values.

<View
  onTouchStart={(e) => {console.log('touchMove', e.nativeEvent.pageY)}}
 >

a better example can be found here: https://facebook.github.io/react-native/docs/panresponder.html

ReactNative get the absolute position of a view relative to the screen

2 Answers2

Linked