gincheong / Memo

개발 관련 내용들을 메모하기 위한 용도로 만든 빈 레포지토리입니다.
0 stars 0 forks source link

onLayout은 어떤 상황에는 동작하지 않을 수도 있다. #52

Open gincheong opened 1 year ago

gincheong commented 1 year ago

So here's all of the undocumented or buggy behavior I've encountered with onLayout and .measure so far:

  1. onLayout doesn't get called in some conditions (seemingly when an element is moved by a parent resizing)
  2. measure returns undefined on android unless there's an onLayout or collapsible: false on the view
  3. onLayout doesn't take transforms into account, it returns the "internal" size of the view not the size displayed on the screen
  4. onLayout doesn't fire for animations of transforms (which is pretty much all animations since only transforms and opacity can use native driver) -- that's this issue
  5. measure returns different values for width and height than onLayout. It returns scaled values if any parent is scaled as opposed to the raw values. Docs suggest the opposite.
  6. onLayout Will return wrong/random values during component mount in some (maybe all?) cases if the view or any parent is being animated.

These add up to big frustrations. I don't know how many hours I've lost at this point writing stuff that should work per the docs only to eventually figure out the above list and work around it. These things should at least be documented so others don't have to go through the same thing.

I've worked around it mostly by writing a "measurement service" singleton that's injected via context and gets refs to all the stuff I want to measure. I then call a function on the measurement service context to .measure a view when the value is needed instead of trying to get it onLayout. That results in much more reliable and usable behavior.

Here's an issue on the documentation repo collecting some of these things: https://github.com/facebook/react-native-website/issues/2056

원문 링크