.measure returns undefined on Android unless collapsable=false or onLayout are specified

[evelant]

Description

If you call .measure on a ref to a View on Android but you don't also have onLayout or collapsable={false} specified then .measure will call its success callback with undefined.

This issue got closed but it was never fixed #3282
Seems it got reported again and was also closed without a fix #19103

The issue here is identical, a 5 year old bug! I suspect it's due to android removing "unnecessary" views when it shouldn't. If there's a ref the view should essentially have collapsable={false} automatically.

React Native version:

System:
    OS: Windows 10 10.0.20190
    CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
    Memory: 33.48 GB / 63.93 GB
  Binaries:
    Node: 10.18.1 - C:\dev\tools\nodejs\node.EXE
    Yarn: 1.22.4 - C:\dev\tools\nodejs\yarn.CMD
    npm: 6.14.7 - C:\dev\TaskHero\node_modules\.bin\npm.CMD
    Watchman: 4.9.4 - C:\dev\tools\watchman\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.3, 30.0.1
      System Images: android-24 | Google Play Intel x86 Atom, android-25 | Google APIs ARM EABI v7a, android-25 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom_64, android-30 | Google APIs Intel x86 Atom_64, androi
d-R | Google Play Intel x86 Atom_64
      Android NDK: 21.0.6113669
  IDEs:
    Android Studio: Not Found
  Languages:
    Java: 12.0.2
    Python: 3.8.4
  npmPackages:
    @react-native-community/cli: ^4.10.1 => 4.10.1
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Add a ref to a view on Android
2. Call .measure on that ref, values returned are undefined

Expected Results

It should return the measurement results

Snack, code example, screenshot, or link to a repository:

Not needed, can be reproduced immediately on any react native android project of any version

[LogicAnalysis]

Thank you so much for this! I was looking for a solution, and setting collapsable={false} fixed it for me!

[rrr3da]

collapsable={false}
was a great workaround for me after upgrading to react-native 0.64.0, thank you @AndrewMorsillo

[JevFR]

Same issue here. Another quick solution that work : bind a noop function to the onLayout

[markymc]

collapsable={false} worked for me too! Pity this is needed though. I agree with this:

If there's a ref the view should essentially have collapsable={false} automatically.

Thank you @AndrewMorsillo. collapsable={false} worked for me.

[xhirazi]

Thanks man. collapsable={false} worked for me.

[rrain0]

Thanks! collapsable={false} is working.

[rrain0]

And instead of measure() better use onLayout={} View attribute (it works without collapsable={false}).

const onLayout = ({nativeEvent: {layout: { x, y, width:w, height:h }}}: LayoutChangeEvent) => {
    console.log('onLayout: ',x,y,w,h)
}
return <View onLayout={onLayout}></View>

[markymc]

And instead of measure() better use onLayout={} View attribute (it works without collapsable={false}).

const onLayout = ({nativeEvent: {layout: { x, y, width:w, height:h }}}: LayoutChangeEvent) => {
    console.log('onLayout: ',x,y,w,h)
}
return <View onLayout={onLayout}></View>

However onLayout doesn't provide pageX and pageY, so it's not a direct replacement. https://reactnative.dev/docs/direct-manipulation#measurecallback

[endlessqt]

Hey, any updates on this issue? I got similar problem, but collapsible and empty onLayout are doing nothing. Still getting 0 and 0 for x and y values on android, but on ios works perfectly.

[nguyenhoanglam]

Thank you very much! collapsable={false} work for me.

[alexborton]

Just going to bump this up - collapsable={false} works as expected, but seems like an unnecessary hack.

[lukearndt]

Thank you for documenting this. Adding collapsable={false} has worked for me too.