UIManager measure Error on Android (always returning 0 the X and Y position)

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

Environment

Expo CLI 3.11.7 environment info:
System:
OS: Windows 10
Binaries:
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

React Native info:
System:
OS: Windows 10 10.0.18362
CPU: (12) x64 Intel(R) Coreā„¢ 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:

/* Run on an Android Device !!! */

/* Expected Behaviour: 'Y' has to be 10, as it is relative-to-parent */

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

export default function App(props) {
  const viewRef = useRef(null);
  const measureNode = (node) => {
    // TODO - Ihere are issues on Android
    return new Promise((resolve, reject) =>
      UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
        console.log('Y: ' + y); // Relative to parent (Working on iOS, but not on Android)
        console.log('Page Y: ' + pageY); // Relative to device's screen
        resolve({ x, y });
      })
    );
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <View
        style={{
          width: 250,
          height: 400,
          alignItems: 'center',
          marginVertical: 10,
          backgroundColor: 'lime',
        }}>
        <Animated.View
          ref={viewRef}
          style={{ top: 10, width: 100, height: 100, backgroundColor: 'red' }}
        />
      </View>
      <Button
        title="Press me"
        onPress={async () => {
          await measureNode(findNodeHandle(viewRef.current));
        }}
      />
    </View>
  );
}

Expected Behaviour

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

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.