Skip to content

View's touch nativeEvent doesn't provide correct pageY value with respect to the window/screen area #1522

Closed
@Aashu-Dubey

Description

@Aashu-Dubey

Environment

react-native -v: 9.2.1
npm ls react-native-macos: 0.68.58
node -v: 16.17.1
npm -v: 8.6.0
yarn --version: 1.22.18
xcodebuild -version: Xcode 14.0, Build version 14A309

Steps to reproduce the bug

I recently tried a animation sample on rn-macos, and noticed a unexpected behaviour in compare to other 4 platforms I ran the implementation on, it is related to the measured events we get for a view with respect to the rendered screen area/window, when it is first rendered and one from the touch event on the view, as they are comparably different.

Expected Behavior

I expect it to provide the data in similar way as I get on other platforms, especially rn-windows desktop app, as it is much closer to macos compared to mobile and web.

It should not consider the title and tab bar in pageY value in case of touch events, though I'm not really sure if this is a expected behaviour here, but even if it is, is there any way to get title bar height in rn-macos, or also to know if "show tab bar" is enabled, to workaround this?

Actual Behavior

The above mentioned example here is this one, where I'm doing a gesture based toolbar animation, and for that:

  1. I'm getting the view's offset from the top using view ref's measure function here, which is giving me pageY value for 40, which is correct as this is the margin top I've applied here
  2. Using touch events, onTouch(Start/Move/End) here, when user touch the view/screen, using the same property pageY from nativeEvent, I'm comparing the two and activating the toolbar's button based on that.

Now on the first case I'm getting the supposedly expected value, but in the second, in touch events, I'm getting pageY value as the margin top (40) + title bar height, which is then around ~70.
see the image below
rn_macos_toolbar_pageY

and this is causing inconsistency with the animation, as compared to other platforms, even on rn-windows.

Now if you enable to tab bar option from menu bar -> view -> 'show tab bar'
image
image

it's gonna also consider this tab bar's height in the pageY value I get from the touch events, which is then gonna be somewhere around ~97.

Let me know if any more details is required.

Reproducible Demo

for repro you can try the sample here, as this is where I faced this problem, the project also contains other platform modules, so you can try them out and compare the results.

Additional context

I searched the existing issue to see anything related, and the PR #1288 seems somewhat related, though I'm not sure if the mentioned issue is really fixed here in case of touch events, as for some reason I'm getting the location(X/Y) and page(X/Y) values same, as you can see in the screenshot

image

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions