question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

UIManager.measure returns wrong results on Android

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:17

github_iconTop GitHub Comments

2reactions
VictorioMolinacommented, Sep 20, 2020

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.

1reaction
fzp0723commented, Aug 10, 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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React native UIManager.measureInWindow coords to android ...
After doing some reasearch i found the answer in this article. The coordinates returned by UIManager.measureInWindow's callback are layout ...
Read more >
react-native.ScaledSize.width JavaScript and Node.js code ...
Best JavaScript code snippets using react-native.ScaledSize.width(Showing top 15 results out of 531).
Read more >
Optimizing React Native performance - LogRocket Blog
Solve your React Native app performance issues, like console statements and animations, using these optimization tools.
Read more >
com.facebook.react.uimanager.UIImplementation.java Source ...
package com.facebook.react.uimanager; import android.os. ... the styles of the {@link ReactShadowNode} based on the Measure specs received by * parameters.
Read more >
react-native-navigation | Yarn - Package Manager
react-native-navigation. owner wix87.1kMIT7.30.6TS vulns 0 vulnerabilities. React Native Navigation - truly native navigation for iOS and Android ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found