question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can onLayout also provide the page position, like measure does?

See original GitHub issue

Description

The onLayout callback now provides in its layout data the same information as the measure (NativeMethodsMixin) callback does, except for the missing absolute page position. Is there a technical reason for this, or can these 2 values also be included in the onLayout data?

I’m now calling measure (i.e. triggering the callback) in the onLayout callback, in order to know when measure() can provide (update) information, but this seems to be double work.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

6reactions
scallycommented, Jan 25, 2017

So, there’s a workaround for this, but it’s really awkward – you need to save a child view as a ref, and then use that ref in a callback in another callback in onLayout.

There are legitimate use cases for absolute page positioning, one of which is drag/drop; if you want to know if one component has been dropped onto another when the two don’t share a common immediate parent.

If there’s no technical limitation preventing this from being surfaced as a param to onLayout (or on another event handler) then could we re-open this issue?

2reactions
scallycommented, Jan 25, 2017

the workaround looks like this, fwiw:

render() {
    return (
      <View
        ref={ref => this.view = ref}
        onLayout={() => this.saveLayout()}
        >
  )
}

// later....

saveLayout() {
  this.view.measureInWindow((x, y, width, height) => {
    // do a thing with the layout...
  }
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

React Native: Getting the position of an element - Stack Overflow
React Native provides a .measure(...) method which takes a callback and calls it with the offsets and width/height of a component: myComponent.measure( (fx ......
Read more >
#PerfMatters introduction to custom ViewGroups to improve ...
In this article I'll try to demystify onMeasure and onLayout methods in ViewGroup which you can use to measure and position all the...
Read more >
How Android Draws Views
It is requested to measure and draw the layout tree. Drawing is handled by walking the tree and rendering each View that intersects...
Read more >
Stack Navigator | React Navigation
Stack Navigator provides a way for your app to transition between screens where each new screen is placed on top of a stack....
Read more >
CodeMirror System Guide
CodeMirror is set up as a collection of separate modules that, together, provide a full-featured text and code editor. On the bright side,...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found