While using measureInWindow, the y value is off

[mrzachnugent]

Description

Reposting issue reported here as asked: react-navigation/react-navigation#12294

Given a useLayoutEffect that calls the measureInWindow of a ref , the y value is off. It seems to be off by the header height on iOS and web. For Android, I'm not sure what is off by exactly.

When the header is transparent or not shown, the y value from measureInWindow is correct for iOS and web but it is still off on Android.

// In a screen with default options

  React.useLayoutEffect(() => {
    triggerRef.current?.measureInWindow((x, y, width, height) => {
      setTargetRect({ x, y, width, height });
    });
  }, [setTargetRect]);

 // ...

  <Pressable ref={triggerRef}
  // ...
  
  // This should place it right below the trigger
  <View 
    style={{
    // ...
      position: "absolute",
      top: targetRect.y + targetRect.height, 
    }}
  // ...

Steps to reproduce

1. Clone the minimal reproduction repo: https://github.com/mrzachnugent/react-navigation-measure-in-window-repro
2. Run npm install && npm run dev to install the dependencies and start Expo Go in an iOS simulator.
3. Press the "Press here to open" button, the red square should appear right below the button.
4. Try with web by pressing w in the terminal running metro
5. Try with android by pressing a in the terminal running metro
6. Toggle to a transparent header by running git checkout transparent-header, reload the apps and see the difference.

Snack or a link to a repository

https://github.com/mrzachnugent/react-navigation-measure-in-window-repro

Screens version

4.1.0

React Native version

0.76.3

Platforms

Android, iOS, Web

JavaScript runtime

Hermes

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

None

Device

iOS simulator

Device model

No response

Acknowledgements

Yes