onLayout is not getting triggered when view is transforming using Animated.View

[jackyleehong]

Please provide all the information requested. Issues that do not follow this format are likely to stall.

Description

I am trying to get the current View y position when my view is translating, but the onLayut is not getting triggered when the transform value change.

React Native version:

System:
OS: macOS 10.15.4
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 47.71 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 13.6.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 28, 29
Build Tools: 28.0.3, 29.0.2
System Images: android-28 | Google APIs Intel x86 Atom, android-29 | Google Play Intel x86 Atom
Android NDK: 17.2.4988734
IDEs:
Android Studio: 3.6 AI-192.7142.36.36.6241897
Xcode: 11.4/11E146 - /usr/bin/xcodebuild
npmPackages:
react: 16.9.0 => 16.9.0
react-native: 0.61.4 => 0.61.4

Expected Results

Expect to get current Y value from onLayout function when it is translating.

[github-actions]

⚠️	Using Old Version
ℹ️	It looks like you are using an older version of React Native. Please upgrade to the latest version, and verify if the issue persists. If it does not, please let us know so we can close out this issue. This helps us ensure we are looking at issues that still exist in the current release.

[github-actions]

⚠️	Missing Reproducible Example
ℹ️	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[vovkasm]

It's because layout process not involved in transformations at all. Actually Animated can't change any properties that can change layout of component tree.

[VictorioMolina]

Have the same problem bro? Did you fix it?

[evelant]

@vovkasm In that case do you happen to know a method to deal with getting the size and position of elements with a transform or a parent that has a transform?

Does that also mean that if you use a transform on a parent element the .measure and onLayout nativeEvent.layout of children will always be wrong by the amount the parent is transformed?

If this is the case -- that all children of transformed elements have incorrect onLayout and .measure results -- then it certainly needs to be put in the documentation!

[evelant]

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: facebook/react-native-website#2056

[ricbermo]

hello @AndrewMorsillo thanks for sharing this. I was wondering if it could be posible to share this singleton you created? Thanks in advance

[PEZO19]

hi @AndrewMorsillo, that was really helpful, thank you a lot! I am facing the same issues. I'd be interested too in the singleton and also what edge cases you could not solve with it (and how did you solve these?). Based on you said "I've worked around it mostly"...

[audrew]

I experience the same issue with onLayout. Maybe someone has a snippet of workaround? here's my code...

ref={(current) => map.current = current}
onLayout={() => { 
                    map.current.animateCamera({
                        center: { latitude: location?.coords?.latitude, longitude: location?.coords?.longitude },
                        zoom: zoomLevel,
                        heading: 50,
                        pitch: pitchLevel,
                        altitude: 5,
                    })
                }}

hopes here https://reactnative.dev/docs/direct-manipulation

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[github-actions]

This issue was closed because the author hasn't provided the requested feedback after 7 days.