6

How do I find out the x,y position of where an element is positioned on the screen, I'm using React Native v0.14. I have tried the following but it says measure is not a function.

componentDidMount() {
    setTimeout(this.measurePosition);
  },
measurePosition() {
    this.refs.q.measure((a, b, width, height, px,py ) => console.log(width))
},
Jonathan Lockley
  • 1,320
  • 5
  • 18
  • 28
  • Good question. I'm not sure what the answer is, but I'd start looking at this blog, where I know he does a lot with x,y coords, so his examples may yield you answers http://browniefed.com/ – Chris Geirman Oct 30 '15 at 18:09

2 Answers2

8

Option1:

You can use the NativeMethodsMixin. Make sure you've added the mixin to your class

var NativeMethodsMixin = require('NativeMethodsMixin')
...
var MyComponent = React.createClass({
  mixins: [NativeMethodsMixin]
...
componentDidMount: function(){
  this.refs.element.measure((x,y,w,h,pX,pY) => console.log("dets"))
}

Option 2

You can use the onLayout property on Views. It is available on most components.

render:function(){
... 
<View onLayout = {this.onLayout} />
...
},
onLayout:function(event){
  console.log(event.nativeEvent.layout)
}

You will get the x,y, width and height

Nishanth Shankar
  • 1,966
  • 1
  • 14
  • 19
-6

Can you use something like 1. get the browser DOM element using (ReactDOM.findDOMNode()) 2. Use the elements getBoundingClientRect() 3. You have top, left, bottom and right coords

this may also be useful Retrieve the position (X,Y) of an HTML element

Community
  • 1
  • 1
Davet
  • 334
  • 1
  • 3
  • 15