measureInWindow returns an incorrect Y coord on Android

See original GitHub issue

Description

Measuring an Android View using NativeMethodsMixin.measureInWindow returns the incorrect Y coordinate. It seems it always subtracts 24 (I guess it’s the StatusBar height) from the Y coordinate. It returns the correct value on iOS.

Environment

Environment:

  • OS: macOS High Sierra 10.13.4
  • Node: 9.9.0
  • Yarn: 1.5.1
  • npm: 6.0.1
  • Watchman: 4.6.0
  • Xcode: Xcode 9.3.1 Build version 9E501
  • Android Studio: 2.3 AI-162.4069837

Packages: (wanted => installed)

  • react: 16.3.1 => 16.3.1
  • react-native: ~0.55.2 => 0.55.4

Steps to Reproduce

Create a new app using CRNA/Expo and change App.js like this:

/* @flow */
import * as React from "react";
import { StyleSheet, View, findNodeHandle } from "react-native";
// $FlowFixMe
import NativeMethodsMixin from "NativeMethodsMixin";

class AndroidMeasureTester extends React.Component<{}> {
  boxRef: ?View = null;

  handleBoxLayout = () => {
    if (this.boxRef) {
      NativeMethodsMixin.measureInWindow.call(
        findNodeHandle(this.boxRef),
        (x, y, width, height) => {
          console.debug("RED BOX LAYOUT:");
          console.debug("x", x);
          console.debug("y", y);
          console.debug("width", width);
          console.debug("height", height);
        }
      );
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <View
          style={styles.box}
          ref={ref => (this.boxRef = ref)}
          onLayout={this.handleBoxLayout}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    height: "100%",
    width: "100%"
  },
  box: {
    width: 80,
    height: 80,
    backgroundColor: "red"
  }
});

export default AndroidMeasureTester;

I also create an Expo Snack.

Expected Behavior

The measured Y coordinate should be 0 (it’s printed on console):

x: 0
y: 0
width: 80
height: 80

Actual Behavior

The measured Y coordinate is -24 (it’s printed on console):

x: 0
y: -24
width: 80
height: 80

Image recap

schermata 2018-05-29 alle 21 53 33

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:8
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
quanvan05commented, Jul 4, 2019

This issue still occur with Android device

1reaction
KakarNcommented, Apr 19, 2019

I was using x of measureInWindow(), but in android, the status bar height was neglected as @mmazzarolo mentioned. Instead, now I am using pageX of measure(), which worked out fine for me.

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 >
Direct Manipulation - React Native
This means that the returned coordinates are relative to the origin x , y of the ancestor view. note. This method can also...
Read more >
types/react-native/index.d.ts - UNPKG
348, * Represents a native component, such as those returned from `requireNativeComponent`. ... 393, * The Y position of the touch, relative to...
Read more >
274 - CODEBEAT - Automated code review for mobile and web
return viewManager; ... int parentTag, int tag, int x, int y, int width, int height) {. UiThreadUtil. ... Use android View id field...
Read more >
grado de ingeniería de tecnologías
nolog´ıas React Native y Phonegap y dise˜no e im- plementación de un escenario de ... The most popular are Java for Android and...
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