Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong measureInWindow value while using transform #2621

Open
1 task done
Ginzoh opened this issue Dec 13, 2023 · 0 comments
Open
1 task done

Wrong measureInWindow value while using transform #2621

Ginzoh opened this issue Dec 13, 2023 · 0 comments
Labels

Comments

@Ginzoh
Copy link

Ginzoh commented Dec 13, 2023

Is there an existing issue for this?

  • I have searched the existing issues

Describe the issue

After upgrading my React Native project from version 0.71.2 to 0.72.7 and react-native-web from 0.18.12 to 0.19.9, I encountered a problem with a modal on the web platform. Specifically, when clicking a button inside the modal, the dropdown menu appears misaligned.

Upon inspection, I found that the modal's inline style includes a transform property with translateX and translateY values, like so:

style={[
          {
            transform: [{ translateX: '-50%' }, { translateY: '-50%' }],
          },
       ]}

which it would seem is not being added by measureInWindow of useRef when the button is clicked because when I remove this styling the modal leaves the center and becomes aligned with the dropdown menu as it should be.
After testing on snack, it seems in previous versions (Expo 47 and 48), the values obtained from the measureInWindow function were accurate. However, after upgrading to Expo 49, the x and y values obtained from measureInWindow have changed (approximately +167 on x and +26 on y on the snack), leading to incorrect alignment.

Expected behavior

I would like Expo 49 to provide the same accurate values for measureInWindow as Expo 47 and 48, specifically "0 484.5" in the provided Snack example.

Steps to reproduce

  • Open the provided Snack link.
  • Switch to Expo 48 on the web view and observe the correct values on the screen "0 484.5".
  • Switch to Expo 49 on the web view and note the changed values on the screen "167 502".

Test case

https://snack.expo.dev/@ginzo/002cc1

Additional comments

No response

@Ginzoh Ginzoh added the bug label Dec 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant