[Android] NativeMethodsMixin.measure.call returning undefined values for a component

[jgfidelis]

Is this a bug report?
Yes

Have you read the Contributing Guidelines?
Yes.

Environment

OS: macOS High Sierra 10.13.4
Node: 9.4.0
Yarn: 1.5.1
npm: 3.10.10
Watchman: 4.9.0
Xcode: Xcode 9.3 Build version 9E145
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.2.0 => 16.2.0
react-native: 0.53.0 => 0.53.0

Test device: Android simulator: Pixel running Android 5.1

Steps to Reproduce

This is an Android only issue, on iOS it is fine.

This code:

NativeMethodsMixin.measure.call(this.iconRef, (x, y, width, height, pageX, pageY) => {
          setTooltipPosition({ x: pageX, y: pageY });
          setLabelPosition({ x: pageX, y: pageY });
          toggleModal();
        });
...
render() {
...
<Icon
              color={Colors.white}
              icon={icon}
              size={8}
              style={styles.icon}
              ref={el => (this.iconRef = el)}
            />
}

(x, y, width, height, pageX, pageY) all are undefined. This happens only on one of our components, called Icon, like in the example above.

If I do:

<View style={styles.iconBackground} ref={el => (this.iconRef = el)}>
            <Icon
              color={Colors.white}
              icon={icon}
              size={8}
              style={styles.icon}
            />

The NativeMethodsMixin.measure.call works just fine, so the problem is with our Icon component.

Our Icon component is:

const Icon = props => <InlineIcon {...props} />;
export default compose(customHOC)(Icon);

And InlineIcon is:

const InlineIcon = ({ color, icon, opacity, size, customStyles }: Props) => (
  <Animated.Text
    style={[
      styles.text,
      {
       ...more styles...,
      },
      customStyles,
    ]}
  >
    {icon}
  </Animated.Text>
);

Expected Behavior

Measure method return correct values.

Actual Behavior

Measure method returns undefined values on my Icon component.

Can anyone give an insight about this? I am just curious... I tried to omit some code, but if you need more information, let me know.

Thanks

PS: already tried all solutions specified here: #3282

[react-native-bot]

Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

If you believe your issue contains all the relevant information, let us know in order to have a maintainer remove the No Template label. Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[react-native-bot]

Thanks for posting this! It looks like your issue may be missing some necessary information. Can you run react-native info and edit your issue to include these results under the Environment section?

Thank you for your contributions.

[Chersquwn]

same issue.

componentDidMount() {
  setTimeout(() => {
    this.body.measure((x, y, width, height, pageX, pageY) => {
      console.log(pageY)
    })
  })
}

x, y, width, height, pageX, pageY, all are undefined in android, but ok in iOS

[hannigand]

I get the same problem - reproducible Snack

Within my project, if I set collapsable={false} it returns zero values. Omitting that prop returns undefined. Tested on a Nexus 5X 8.1 (API 27).

Either way these are not the correct values. As mentioned, works perfectly on iOS.

[jgfidelis]

@hannigand On my case, no solution like setting collapsible to false, set an empty onLayout or set prop renderToHardwareTextureAndroid worked on my Icon component.

[hannigand]

@jgfidelis I'm not still able to get anything over than 0 values.

I added the following props on all Views, but it didn't work:

 onLayout={this.getMeasurements}
 renderToHardwareTextureAndroid
 collapsable={false}

Updated Snack

Edit: Instead of measuring, I decided to capture values through the onLayout callback.

[react-native-bot]

This issue was marked as lacking information required by the issue template. There has been no activity on this issue for a while, so I will go ahead and close it.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

If you are the author of this issue and you believe this issue was closed in error (i.e. you have edited your issue to ensure it meets the template requirements), please let us know.

[jgfidelis]

Please reopen this as other people have expressed the problem as well.

I think it follows the templates too.

[sibelius]

wrapping the component in a <View> component solves the problem?

[jasperkuperus]

I had the same issue with a view outside of the viewport. Adding collapsable={false} works for me.

It was hard to find this solution. I suggest we can add this to the documentation of the measure method. A small notice on Android optimizing views and returning undefined, pointing to the solution with collapsable would be awesome.

[jsamr]

I could reproduce this issue.

[alshirokov81]

I also have this problem in rn 0.59.5 in Android
Solution suggested by @jasperkuperus helped me, but all touchable opacities inside my View with prop collapsable={false} stopped working ((.
I had to create separate View item with prop collapsable={false} just for calling measure().