react-native: .measure returns undefined on Android unless collapsable=false or onLayout are specified

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 https://github.com/facebook/react-native/issues/3282 Seems it got reported again and was also closed without a fix https://github.com/facebook/react-native/issues/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.

Add a ref to a view on Android
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

About this issue

Original URL
State: open
Created 4 years ago
Reactions: 48
Comments: 25

Most upvoted comments

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

+49

LogicAnalysis on Nov 7, 2020

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.

endlessqt on Apr 2, 2022

Tried different solutions (collapsible, requestAnimationFrame, etc), and it doesn’t work for me Work around by wrapping measure with setTimeout 500ms now but I think it’s not a proper fix

In my case:

I have a horizontal flat list

the component I want to measure in the renderItem

Only the first component measure has values in (x, y, width, height, pageX, pageY) The other components measure are undefined

The issue only occur on Android. IOS work fine

Try adding removeClippedSubviews={false} to the FlatList. RN defaults this to true for android.

rsmutch on Nov 17, 2023

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

markymc on Mar 12, 2022

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.

markymc on Oct 8, 2021

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

rrr3da on Mar 30, 2021

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>

rrain0 on Mar 12, 2022