React Native - Get the position of a component in the View

Question

I'm trying to get the position of a component in react native.

Say I have a view:

<ScrollView>
    lots of items...
    lots of items...
    lots of items...
    <View></View>
</ScrollView>

In the end I want to be able to eventually scroll to where the View is.

This link shows how to get the position using the native ui manager, however when ran it returns:

"Attempted to measure layout but offset or dimensions were NaN"

I've attempted

this.refs.VIEW.measure((ox, oy, width, height, px, py) => {
    //ox ... py all = 0
});

score 13 · Answer 1 · edited Apr 17 '18 at 16:17

13

You might want to use the onLayout callback on the View component. setTimeout may not work 100% of the time.

<View onLayout={this.measureMyComponent} />

edited Apr 17 '18 at 16:17

David Schumann

answered Apr 07 '16 at 19:28

zero

It does not help for me. I still get 0 for x and y. Any other ideas? – Dmitry Feb 15 '17 at 17:16
It appears to get the co-ordinates relative to the thing that contains it. So if it is at `{ left: 0, top: 0 }` relative to the View that contains it, then x and y will both be 0. – Wodin Feb 20 '20 at 13:58

score 11 · Accepted Answer · edited Apr 17 '18 at 15:51

11

Sometimes if you're using measure in componentDidMount you have to wrap it in a setTimeout:

setTimeout(() => {
    this.refs.VIEW.measure((ox, oy, width, height, px, py) => {
    });
}, 0);

edited Apr 17 '18 at 15:51

David Schumann

answered Jul 25 '15 at 09:12

Colin Ramsay

This must mean the components are being loaded asynch and not really fully loaded when component did mount was called. setTimeout throws the function onto the event loop eventually making it processed after the components are fully layed out? – Lfa Jul 25 '15 at 17:10
`this.refs` is no longer valid... I tried the following https://snack.expo.io/ryywtvoTb without luck – Norfeldt Oct 23 '17 at 13:09

2 Answers2