UIManager.measure returns wrong results on Android

[VictorioMolina]

Summary of Issue

I am trying to get the x and y relative-to-parent position every time I move an animated view. It is working fine on iOS, but on Android those values are always 0.

Snack

https://snack.expo.io/@victoriomolina/measure-issue-android

Environment Information

System:
OS: Windows 10 10.0.18362
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Memory: 8.44 GB / 15.85 GB
Binaries:
Node: 12.18.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.5 - C:\Program Files\nodejs\npm.CMD
IDEs:
Android Studio: Version 3.6.0.0 AI-192.7142.36.36.6241897
npmPackages:
react: ~16.9.0 => 16.9.0
react-native: https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz => 0.61.4
npmGlobalPackages:
react-native-cli: 2.0.1

Reproducible Demo

Just create an Animated.View inside a View (at the middle for example) and get it position using this function

 // This function get the X/Y position of a specific node
  const measureNode = (node) => {
    // TODO - there are problems on android
    return new Promise((resolve, reject) =>
      UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
        console.log(y);
        resolve({ x, y });
      })
    );
  };

as follows:

import React, { useRef } from "react";
import {
  View,
  Button, 
  Animated,
  UIManager,
  findNodeHandle,
} from "react-native";


export default function MyComponent(props) {
 const viewRef=useRef(null);
 const measureNode = (node) => {
    // TODO - there are problems on android
    return new Promise((resolve, reject) =>
      UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
        console.log(y);
        resolve({ x, y });
      })
    );
  };

  
   return <View style={{flex: 1, justifyContent: "center", alignItems: "center">
      <Animated.View ref={viewRef} style={{width: 100, height: 100, backgroundColor: "red"}} />
       <Button title="Press me" onPress={async () => {
           await measureNode(findNodeHandle(viewRef.current));
           console.log(y);
         }} />
   </View>
}

Expected Behaviour

x and y should be different from 0 on Android. Just like on iOS.

[github-actions]

⚠️	Missing Environment Information
ℹ️	Your issue may be missing information about your development environment. You can obtain the missing information by running react-native info in a console.

[VictorioMolina]

Also, I have opened a thread on StackOverflow in which one user commented that there was a similar problem with an older RN version.

https://stackoverflow.com/questions/63151197/react-native-get-position-of-element-relative-to-parent?noredirect=1#comment111685819_63151197

Think that the only way to go on for now is to calculate the position using basic maths.

[fzp0723]

I have the same problem, ios is ok, but android is 0 every time.
info Fetching system and libraries information...
System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 16.62 GB / 64.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.1 - /var/folders/6b/c9q49jl5153c1rfkbr9p2mh40000gn/T/yarn--1597058736211-0.3680143605781827/node
Yarn: 1.22.4 - /var/folders/6b/c9q49jl5153c1rfkbr9p2mh40000gn/T/yarn--1597058736211-0.3680143605781827/yarn
npm: 6.14.5 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 21, 23, 28, 29, 30
Build Tools: 23.0.1, 28.0.3, 29.0.2, 30.0.0
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_251 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
npmGlobalPackages:
react-native: Not Found
✨ Done in 5.15s.

[VictorioMolina]

I have the same problem, ios is ok, but android is 0 every time.
info Fetching system and libraries information...
System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 16.62 GB / 64.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.1 - /var/folders/6b/c9q49jl5153c1rfkbr9p2mh40000gn/T/yarn--1597058736211-0.3680143605781827/node
Yarn: 1.22.4 - /var/folders/6b/c9q49jl5153c1rfkbr9p2mh40000gn/T/yarn--1597058736211-0.3680143605781827/yarn
npm: 6.14.5 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 21, 23, 28, 29, 30
Build Tools: 23.0.1, 28.0.3, 29.0.2, 30.0.0
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_251 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
npmGlobalPackages:
react-native: Not Found
✨ Done in 5.15s.

I think the only way to go on for now is using the function I wrote on the Stack Overflow thread

[fzp0723]

I have the same problem, ios is ok, but android is 0 every time.
info Fetching system and libraries information...
System:
OS: macOS 10.15.5
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Memory: 16.62 GB / 64.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.18.1 - /var/folders/6b/c9q49jl5153c1rfkbr9p2mh40000gn/T/yarn--1597058736211-0.3680143605781827/node
Yarn: 1.22.4 - /var/folders/6b/c9q49jl5153c1rfkbr9p2mh40000gn/T/yarn--1597058736211-0.3680143605781827/yarn
npm: 6.14.5 - /usr/local/bin/npm
Watchman: Not Found
Managers:
CocoaPods: 1.9.3 - /usr/local/bin/pod
SDKs:
iOS SDK:
Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
Android SDK:
API Levels: 21, 23, 28, 29, 30
Build Tools: 23.0.1, 28.0.3, 29.0.2, 30.0.0
System Images: android-30 | Google APIs Intel x86 Atom
Android NDK: Not Found
IDEs:
Android Studio: 4.0 AI-193.6911.18.40.6514223
Xcode: 11.6/11E708 - /usr/bin/xcodebuild
Languages:
Java: 1.8.0_251 - /usr/bin/javac
Python: 2.7.16 - /usr/bin/python
npmPackages:
@react-native-community/cli: Not Found
react: 16.13.1 => 16.13.1
react-native: 0.63.2 => 0.63.2
npmGlobalPackages:
react-native: Not Found
✨ Done in 5.15s.

I think the only way to go on for now is using the function I wrote on the Stack Overflow thread

I use it but still not work, I found the problem is parentNode measure always return undefined. I tried many ways, but still can not find reason.


Just like picture, the focusTabRef is in renderTab method, you can see focusTabRef work but tabViewRef measure return undefined in console, it's very confusing.
Also use UIManager measure method

[VictorioMolina]

@Paul0523 did you use it correctly? I did something really similar few weeks ago and worked fine on my Samsung. Just make a ref to the parent view of the child red too, and call the function of StackOverflow. This has to work because this function substracts the pageX/Y of the child to the pageX/Y of the parent, and pageX/Y are not undefined on Android.

Hope you solve your issue!

[VictorioMolina]

https://stackoverflow.com/questions/63151197/react-native-get-position-of-element-relative-to-parent?noredirect=1#comment111685819_63151197 use the method of my answer.

[fzp0723]

Ok, may be there are some other problems, I will keep trying to solve it.

By the way I found android always return 0. 😂

[safaiyeh]

Hi @VictorioMolina and @Paul0523 sorry you are having issues with this and investigating!

Any conclusions or workarounds y'all have observed?

[VictorioMolina]

@safaiyeh there is a work around implementing your own relative-to-parent function to get the correct offsets but it is absolutelly a big.

[safaiyeh]

This is new development but UIManager is going to be deprecated in a future release:

https://youtu.be/DduUntL2Sv4?t=3125

^ shows a better way to call measure, let me know if that helps.

[VictorioMolina]

@safaiyeh I have updated my RN version and try the new method but this is still returning 0 (the ox and oy values) on android

[VictorioMolina]

@Paul0523 did you find any solution?

[VictorioMolina]

This is breaking my head, I have tested the measurement in a native View component (which is inside an ImageBackground) with pageX and pageY instead, but when I change to release mode, wrong results again on my Android.

[VictorioMolina]

Okey, I have found a solution to my problem... Trying to measure the ImageBackground component on Android with release mode results on undefined values... so, I have decided put a View (with the same width and height as my ImageBackground component) inside it and then measure it instead... In a first moment, again, wrong results... but I have noticed that some Androids make optimizations removing unnecesary Views, so I set collapsable={false} to the View and working!! Maybe useful for someone in the future...

       <ImageBackground
          source={{ uri: photo.uri }}
          style={{
            width: responsivePhotoWidth,
            height: responsivePhotoHeight,
          }}
        >
          <View ref={image} collapsable={false}>
            <Animated.View
              ref={cropper}
              {...panResponder.panHandlers}

Views that are only used to layout their children or otherwise don't draw anything may be automatically removed from the native hierarchy as an optimization. Set this property to false to disable this optimization and ensure that this View exists in the native view hierarchy.

Also, maybe, that was happening too with the ImageBackground component on Android.

[VictorioMolina]

I think that the bug still continues alive but there are some workarounds explained here that can solve the problem... so I think I can close this thread...

[fzp0723]

@VictorioMolina Yes, I found problem, when you set style background color, it will be correct. It's possible when you don't set color or some other style, android will ignore to draw it, so the measure method not work.