React Native: Getting the Position of an Element

How to get the position of a component on screen in react native?

React Native

You can use .measure():

this._myComponent._component.measure((width, height, px, py, fx, fy) => {
  // do positioning checks here
}

Determines the location on screen, width, and height of the given view and returns the values via an async callback. If successful, the callback will be called with the following arguments: x, y, width, height, pageX, pageY.

Docs: https://facebook.github.io/react-native/docs/direct-manipulation.html#other-native-methods

---

Web API (no React Native)

If you're working with a DOM node, you can use Element.getBoundingClientRect():

let domRect = this._myComponent.getBoundingClientRect();
let { x, y } = domRect;

The result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels. Properties other than width and height are relative to the top-left of the viewport.

Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

React Native - Get the position of a component in the View

Sometimes if you're using measure in componentDidMount you have to wrap it in a setTimeout:

setTimeout(() => {
    this.refs.VIEW.measure((ox, oy, width, height, px, py) => {
    });
}, 0);

React Native get position of element relative to parent

Just use those functions I've implemented to get the relative-to-parent position.

  // This function measures specific nodes on the layout
  const measureNode = (node) => {
    /* 
      BUG - In the current React Native version (v. 0.61.4)
      the x and y values are wrong on Android devices. So, I have decided to
      use pageX and pageY (which are relative to the device's screen) and then
      implement my own method for getting relative-to-parent positions.

      https://github.com/facebook/react-native/issues/29526
    */
    return new Promise((resolve, reject) => {
      UIManager.measure(node, (x, y, width, height, pageX, pageY) => {
        resolve({ x, y, width, height, pageX, pageY });
      });
    });
  };

  const getRelativeToParentPosition = async (childNode, parentNode) => {
    // Get the relative-to-screen position of the child node
    const { pageX: childX, pageY: childY } = await measureNode(childNode);

    // Get the relative-to-screen position of the parent node
    const { pageX: parentX, pageY: parentY } = await measureNode(parentNode);

    /*
      Substract those values to get the relative-to-parent position.
      Pd: The child's position will be greater than the parent's one,
      just because the chlid is inside the parent.
    */

    return {
      x: childX - parentX,
      y: childY - parentY,
    };
  };

ReactNative get the absolute position of a view relative to the screen

you can use measure(callback) it Determines the location on screen, width, and height of the given view and returns the values via an async callback.

a better example can be found here React Native: Getting the position of an element

<View
  ref={(ref) => { this.marker = ref }}
  onLayout={({nativeEvent}) => {
    if (this.marker) {
      this.marker.measure((x, y, width, height, pageX, pageY) => {
                console.log(x, y, width, height, pageX, pageY);
       })
    }
  }}
 >

How do I find the component position in a functional react-native component

You can try measure method in react-native.

import React, { useState, useRef } from "react";
import { View, Button, TextInput } from "react-native";

const MyComponent = () => {
  const [value, onChangeText] = useState("Useless Placeholder");

  const myRef = useRef();

  const showRefPosition = () => {
    console.log("button clicked, set focus and log position");
    // this works and shows that i am using the ref correctly
    this.ref.measure( (width, height) => {
      console.log('Component width is: ' + width)
      console.log('Component height is: ' + height)
    })
  };

  return (
    <View>
      <TextInput
        style={{ height: 40, borderColor: "gray", borderWidth: 1 }}
        onChangeText={text => onChangeText(text)}
        value={value}
        ref={(ref) => { this.ref = ref; }}
      />
      <Button title="Click Me" onPress={() => showRefPosition()} />
    </View>
  );
};

export default MyComponent;

ReactNative - Find views absolute position after it is scrolled/moved?

RCTUIManager does this same thing. Check out this example.

---

Related Topics