React-native: [Android] measure always returns 0 for x and y

[theoriginalgri]

I wrote a small example here: https://gist.github.com/theoriginalgri/e0b2c50a6232ed4ff3c6

There are three colored areas, each has the views height. The green one in the middle is clickable and logs its measure() results to the console. Also the green one has a Text element with marginTop=100, which means it should always return y=100. Unfortunately all x and y values are always 0 on android. On iOS all values are returned correctly.

Log output:

Android:
12-13 11:23:04.140 7621-30742/com.scrollviewtest I/ReactNativeJS: android green measure: y=0, height=592, pageY=321.5
12-13 11:23:04.140 7621-30742/com.scrollviewtest I/ReactNativeJS: android text measure: x=0, y=0, height=19, pageY=421.5

iOS:
2015-12-13 11:23:55.987 [trace][tid:com.facebook.React.JavaScript] ios green measure: y=667, height=667, pageY=378.5
2015-12-13 11:23:55.987 [trace][tid:com.facebook.React.JavaScript] ios text measure: x=148.5, y=100, height=17, pageY=478.5

Edit:
Meanwhile I found that measureLayout() does the calculation correctly when supplying the actual parent as first parameter. This does not seem intuitive since one could guess that measure() should always use the direct parent of the view for determining x and y.

[facebook-github-bot]

Hey theoriginalgri, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If this is a feature request or a bug that you would like to be fixed by the team, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• If you don't know how to do something or not sure whether some behavior is expected or a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• We welcome clear issues and PRs that are ready for in-depth discussion; thank you for your contributions!

[ashleydw]

I'm getting this too, will try with the measureLayout function. Perhaps you could provide an example of that @theoriginalgri .

Note: @theoriginalgri Is talking about ox and oy from the docs.

[theoriginalgri]

@ashleydw

Assume your render() method has the following content:

<ScrollView ref='scrollView'>
  ... whatever ...
  <Card ref='card'/>
</ScrollView>

This scrolls to the correct position:

this.refs.card.measureLayout(
  React.findNodeHandle(this.refs.scrollView),
  (x, y, width, height, pageX, pageY) => {
    this.refs.scrollView.scrollTo(y);
  }
)

This does not scroll to the correct position:

this.refs.card.measure(
  (x, y, width, height, pageX, pageY) => {
    this.refs.scrollView.scrollTo(y);
  }
)

[ashleydw]

Great! Can confirm measureLayout works for me in android and ios

[satya164]

A PR to fix the measure function is welcome.

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/android-measure-always-returns-0-for-x-and-y

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub.

Also, if this issue is a bug, please consider sending a PR with a fix.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[baoanhng]

@theoriginalgri I know this was long ago but you've just saved me.

[dogofpavlov]

This still happens for me. Although it seems the "pageX" and "pageY" values do show up for android and match what iOS reports for its "x" and "y".