onLayout Callback called before ref Callback

[ganmor]

Do you want to request a feature or report a bug?
It might be considered a bug

What is the current behavior?
The OnLayout Callback is called before the ref callback on component mount.

If the current behavior is a bug, please provide the steps to reproduce and

onLayout() {
   this.someRefAccess() // Does not work
   setTimeout(() => { 
      this.someRefAccess() //Works
  })
}
render() {
  return <View onLayout={this.onLayout} ref={(theref) => { this.someRef = theref; } }> 
}

What is the expected behavior?
On RN native (IOS & Android )
Sequence is
1 ref callback
2 onlayout
It used to be like this on RNWEB

Environment (include versions). Did this work in previous versions?
Confirmed the change affects

• Firefox 59
• internet explorer 11

it does not seem to affect chrome

Could it be related to a67bf0f
If the change is intented and we need to handle this manually could you please let us know.

Thank you for the amazing work.

[necolas]

Please can you include a link to a test case that reproduces the issue

[necolas]

Not sure how it could be possible since React is meant to update the DOM and refs before componentDidMount is called

[ganmor]

Here is a minimal test case:

Code:
https://glitch.com/edit/#!/numerous-sprout
Run:
https://numerous-sprout.glitch.me/

It works on Chrome, it does not work on Firefox 59
( Mac OSX High Sierra)
Sorry I do not have access to IE from home.

[necolas]

Thanks. The layout handler is here and is only being called in componentDidMount, so I'm not sure why Firefox (with no resize observer support) doesn't have a ref defined.

[necolas]

@giuseppeg I'm thinking the resize observer patch might be involved in this issue

[giuseppeg]

@necolas I can take a look later today. fwiw

onLayout={() => { setTimeout(() => { console.log(typeof this.myref) }) }

works on FF. That said I second what you said and I'd expect it to work without scheduling.

[giuseppeg]

@necolas I think we got tricked by the fact that ResizeObserver is async. The fallback behavior is actually the correct one since the OP is attaching a ref on an instance and trying to access it in the render method right away. The correct order is:

Potential View (internal) ref is defined
View#componentDidMount fires <- calls onLayout
App - ref to the View instance is defined
App#componentDidMount fires

https://codepen.io/giuseppegurgone/pen/vjKzyv

We should fix the ResizeObserver case to fire immediately like we do in the fallback case

react-native-web/packages/react-native-web/src/modules/applyLayout/index.js

Line 60 in bce5957

instance._handleLayout();