react-native: UIManager.measure returns wrong results on Android

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® 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:

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.

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 17 (2 by maintainers)

Most upvoted comments

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 on Sep 20, 2020

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® Core™ 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.

fzp0723 on Aug 10, 2020