Introduction

In React Native, you usually get an element's position only after layout has finished. The correct API depends on what kind of position you need: relative to the parent, relative to the window, or as part of a layout callback. The most common tools are onLayout, measure, and measureInWindow.

Use onLayout for Relative Layout Information

If you want the size and position of a component relative to its immediate parent after layout, onLayout is the simplest option. React Native calls it when the view's layout is calculated.

1import React from "react";
2import { View, Text } from "react-native";
3
4export default function Example() {
5  return (
6    <View style={{ padding: 20 }}>
7      <View
8        onLayout={(event) => {
9          const { x, y, width, height } = event.nativeEvent.layout;
10          console.log({ x, y, width, height });
11        }}
12        style={{ width: 120, height: 60, backgroundColor: "tomato" }}
13      >
14        <Text>Measure me</Text>
15      </View>
16    </View>
17  );
18}

This is reliable for normal layout-driven UI work. The values come from React Native's layout system, so they are available without manually reaching into native APIs.

Use measure from a Ref When You Need Imperative Access

Sometimes you need to ask for the position later, such as after a button press or before starting an animation. In that case, store a ref to the view and call measure.

1import React, { useRef } from "react";
2import { View, Button } from "react-native";
3
4export default function Example() {
5  const boxRef = useRef<View>(null);
6
7  const handlePress = () => {
8    boxRef.current?.measure((x, y, width, height, pageX, pageY) => {
9      console.log({ x, y, width, height, pageX, pageY });
10    });
11  };
12
13  return (
14    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
15      <View
16        ref={boxRef}
17        style={{ width: 100, height: 100, backgroundColor: "skyblue" }}
18      />
19      <Button title="Measure" onPress={handlePress} />
20    </View>
21  );
22}

x and y are relative to the parent layout context. pageX and pageY are relative to the root view or screen coordinate system, which is often what you need for overlays and tooltips.

Use measureInWindow for Absolute Window Coordinates

If the requirement is "where is this element on the screen," measureInWindow is usually clearer than reading the extra values from measure.

boxRef.current?.measureInWindow((x, y, width, height) => {
  console.log({ x, y, width, height });
});

This is useful for positioning popovers, context menus, and coach marks that need window coordinates rather than parent-relative layout.

Timing Matters

The biggest source of confusion is calling measurement too early. A ref can exist before the view has finished layout, and then the numbers may be zero or stale. Measurement should happen after the view is mounted and laid out.

Practical ways to avoid timing problems include:

• Use onLayout if you only need the layout after render.
• Trigger measure in response to user interaction after the screen appears.
• Delay measurement until after animations or transitions that affect layout complete.

If the position changes because of scrolling, orientation changes, or conditional rendering, measure again when the UI state changes. Position data is not automatically kept current for you.

Prefer Declarative Layout When Possible

Many positioning problems are easier to solve without measuring at all. If a tooltip can be rendered inside the same layout flow, or a component can align itself with flexbox, that is usually more stable than reading coordinates and manually placing another element. Imperative measurement is useful, but it should be a targeted tool, not the default approach.

Common Pitfalls

• Calling measure before the element has completed layout.
• Confusing parent-relative coordinates with screen-relative coordinates.
• Forgetting that layout can change after scrolling, rotation, or conditional rendering.
• Reaching for measurement when normal flexbox layout would solve the problem.
• Assuming a stored position remains valid after the UI changes.

Summary

• Use onLayout for layout data relative to the parent after render.
• Use measure when you need to query position imperatively from a ref.
• Use measureInWindow for absolute window coordinates.
• Measure only after layout is complete and remeasure when layout changes.
• Prefer declarative layout over manual coordinate management when possible.