Clarify documentation about when onLayout is called

[evelant]

Description

https://reactnative.dev/docs/view#onlayout

Trying to animate elements in my app to the screen locations of other elements. I get the position of those elements in their onLayout callbacks and cache the results. In some (unknown, undocumented) situations onLayout is not called when an element changes position.

The current documentation states

Invoked on mount and layout changes with:

{nativeEvent: { layout: {x, y, width, height}}}

This event is fired immediately once the layout has been calculated, but the new layout may not yet be reflected on the screen at the time the event is received, especially if a layout animation is in progress.

This does not specify that in some situations the layout information will be incorrect or transitional. It also does not specify in which situations onLayout will not be called. In my case it appears that onLayout is only called on mount but not when a parent changing size causes an element to change x/y position but remain the same size.

It would be helpful if the documentation for onLayout were expanded to detail exactly in which situations onLayout will be called and in which situations the position/size information may be inaccurate. What exactly constitutes layout changes to fire the event?

edit: here are some related issues detailing the undocumented quirks/bugs with onLayout. https://github.com/facebook/react-native/issues/28775 (animations of transforms don't trigger onLayout) https://github.com/facebook/react-native/issues/3282 (measure returns undefined on android unless onLayout or collapsable are specified) https://github.com/facebook/react-native/issues/24219 (reanimated, standard with expo, changes onLayout behavior) https://github.com/facebook/react-native/issues/23443 (device rotation doesn't trigger onLayout in some situations) https://github.com/facebook/react-native/issues/19872 (onLayout removed elevation on Android)

Documentation version

v0.63

[stale[bot]]

👋 Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. Thank you for your contributions.

[olosegres]

@stale Issue does not fixed

[dennisbouwpas]

@Stale Issue does not fixed!

[chrisbobbe]

The answer to the following would also be great to document: are x and y relative to the top-left of the whole screen, or to the top-left of the parent? I believe they're relative to the parent, but I don't want to start a false rumor; my investigation might be wrong. 🙂

But the answer is quite important and would be great to have documented.

[lon9man]

+1

[mrcordova]

Has anyone found a solution or a work around to get onlayout to fire when size is changed with animation?

[audrew]

I am trying to find a solution too. Hopefully, that can help https://reactnative.dev/docs/direct-manipulation

[J6ey]

Don't quote me, but what I'm understanding is that onLayout is only called when that View UI is updated, so if you're changing its position or size in the background but is not reflecting the UI, then onLayout will not get triggered. It may also get called again if the View hits the re-render phrase.

[github-actions[bot]]

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

[evelant]

Issues don't become invalid just because nobody has bothered to look at them.

[github-actions[bot]]

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

[evelant]

Still needs attention

[topheroes]

Hello, @evelant, did you solve the problem? In my case onLayout gets fired on mount only. Not on translation, rotation, etc.

[github-actions[bot]]

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

[evelant]

No, the documentation is still unclear

[github-actions[bot]]

👋 Hey there, it looks like there has been no activity on this issue in the last 90 days. Has the issue been fixed, or does it still require the community attention? This issue will be closed in the next 7 days if no further activity occurs. Thank you for your contributions.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[github-actions[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.