onLayout difference between web and mobile

[francisbourquestudyo]

When using onLayout to get the size of a view, I've experienced differences between the web and mobile (at least iOS, haven't tried Android).

If I have a view, with this style:

{
  width: 100,
  height: 100,
  margin: 8
}

Here's the values I get in the onLayout function for width and height:

• iOS: 100
• Web: 116

It seems that the web implementation adds the margin to the total size of the element, whereas iOS doesn't. I also know that this may not be an ReactXP issue, as it probably relies on the browser. However, if nothing can be done about it, it may be a good idea to had this subtlety to the documentation.

[DouglasMilnes]

Not a solution, just a comment:
Along with whether or not to include the width of a scroll bar in determining dimensions, the way margins are calculated by different browsers is on the top of incompatibilities of layout. It doesn't matter whether it is a left, right, top or bottom margin, different browsers will use a margin to different objects in different ways. If ReactXP isn't taking correct note of the way the specific browser is using the numbers, you either need to do this yourself or try not to use margins at all.

[fbartho]

@francisbourquestudyo I admit we also avoid the onLayout method because of details like @DouglasMilnes suggested.

Additionally, fundamentally, the React platform (including on Native) really discourages using onLayout because it's an asynchronous callback, which means that any changes you make based on Layout takes at least one extra cycle.

This can lead to large applications getting bogged down if every little widget depends on onLayout for calculations

I'd love to identify if there's any actual fix that is possible here, and additionally if there are documentation notes that we can update and any example code we should use to demonstrate alternative patterns?