[HOLD App/issues/16660] [$2000] Pinch to zoom on a Macbook browser dynamically changes the app's view and components

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. When a chat is open, pinch to zoom on either the LHN or the details tab. 1 (alternate). On a fresh sign in page, zoom in on any part of the site with pinch to zoom.

   Expected Result

   The page doesn't reorganize or shfit as you zoom in this way, this should be equivalent to magnification and shouldn't change the content ordering or structure of the app.

   Actual Result

   App re-renders into different various forms as you zoom in breaking your ability to zoom into

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• [ ] Android / native
• [ ] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [x] MacOS / Chrome / Safari
• [ ] MacOS / Desktop

Version Number: 1.2.98-1 Reproducible in staging?: needs reproduction Reproducible in production?: needs reproduction If this was caught during regression testing, add the test name, ID and link from TestRail: Email or phone of affected tester (no customers): Logs: https://stackoverflow.com/c/expensify/questions/4856 Notes/Photos/Videos: Any additional supporting documentation

https://user-images.githubusercontent.com/43996225/231004704-3ffa4eb5-bcb9-456f-83c7-555e63e266b5.mov

Expensify/Expensify Issue URL: Issue reported by: @johnmlee101 Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1681152993219619

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01caf96ff9d8613c10
• Upwork Job ID: 1646608088499531776
• Last Price Increase: 2023-05-02

[alitoshmatov]

Before https://github.com/Expensify/App/pull/14392 window object provided by Dimensions didn't change in pinch zoom, so it was its supposed behavior. As you said earlier, we are going to fix https://github.com/Expensify/App/pull/14392 so that it will react to ios keyboard openings, but won't change default behavior of Dimensions.window

[fedirjh]

So you mean to overwrite this line https://github.com/Expensify/react-native-web/blob/ccfd936f274ca2105745f9edbbb4aad80725e181/packages/react-native-web/src/exports/Dimensions/index.js#L76 ? That will change the Dimensions.window.scale and could create a regressions in the future.

[alitoshmatov]

No I mean, we do this:

    height = Math.round(visualViewport.height * visualViewport.scale);
    width = Math.round(visualViewport.width * visualViewport.scale);

Notice that, above, we are using visualViewport.scale. https://github.com/Expensify/react-native-web/blob/ccfd936f274ca2105745f9edbbb4aad80725e181/packages/react-native-web/src/exports/Dimensions/index.js#L65-L66

We do not touch the Dimensions.window.scale

[fedirjh]

That make sense to me, It looks like a potential solution. We need to make tests on mobile web and other related issues.

[alitoshmatov]

I will get back to you with testing results, tomorrow

[alitoshmatov]

@fedirjh So it looks like, pinch zooming is prevented on mWeb(both: android and ios). But I couldn't locate exact code responsible for this. But I think pinch zoom not working in mWebs is not in capacity of this issue.

I have tested if opening keyboard is still behaving as expected, and it does: https://user-images.githubusercontent.com/59907218/236671233-060cc9d6-f651-4809-9456-51184a31e6f0.mp4

[tgolen]

It sounds like the proposal will be a good incremental fix, but for our App, we push for full platform support across mWeb (mobile chrome and mobile safari). Ideally, we would be able to figure out why the pinch zooming is prevented.

[melvin-bot[bot]]

@tgolen @alexpensify @fedirjh this issue is now 4 weeks old and preventing us from maintaining WAQ, can you:

• Decide whether any proposals currently meet our guidelines and can be approved as-is today
• If no proposals meet that standard, please take this issue internal and treat it as one of your highest priorities
• If you have any questions, don't hesitate to start a discussion in #expensify-open-source

Thanks!

[melvin-bot[bot]]

Current assignee @fedirjh is eligible for the Internal assigner, not assigning anyone new.

[alitoshmatov]

@tgolen I think pinch zoom not working in mobile should be separate issue and treated as one, since it has neither the same root cause nor the same solution as current issue.

[fedirjh]

Just another case , On web pinch zoom doesn’t works inside the the chat report . It seems that pinch zoom is not consistent on web and on mobile as well

https://user-images.githubusercontent.com/36869046/236927012-b45c3103-1eb9-41bd-973c-bc5096942464.mov

[fedirjh]

I think pinch zoom not working in mobile should be separate issue and treated as one, since it has neither the same root cause nor the same solution as current issue.

@alitoshmatov Let’s fix all pinch zoom bugs in this issue.

I noticed in your video that the Next button is not visible at the bottom

[alitoshmatov]

@fedirjh It is an existing issue, where safari tabs minimizes app content won't stretch to occupy. It is still present without any changes

[alitoshmatov]

@fedirjh Can you clarify then all objectives of this issue here. I am confused, as of which issues are present. Also can we clarify that if mobile pinch zoom is not intentionally disabled and should really be fixed

[fedirjh]

Ideally, we would be able to figure out why the pinch zooming is prevented.

I believe it was disabled to maintain consistency with native behavior. To me, this isn't a bug, and it would only be a bug if we enabled it for mWeb. What are your thoughts on this, @tgolen?

I am confused, as of which issues are present.

@alitoshmatov In this particular issue, we are aiming to fix pinch zoom on the web. I think we should address all cases for the web, including this one https://github.com/Expensify/App/issues/17246#issuecomment-1539015249 . It would be beneficial to cover this case here as we have the necessary context.

It is an existing issue, where safari tabs minimizes app content won't stretch to occupy. It is still present without any changes

Thanks for confirming .

[alitoshmatov]

Pinch zoom is not working when FlatList is inverted, if I remove this, we can zoom in chat https://github.com/Expensify/App/blob/e2b723622e9bd60f0767586d60955b1b77a49eb3/src/components/InvertedFlatList/index.js#L44

This is some results where it lead me: https://github.com/Expensify/react-native-web/blob/bb2f765614628eeccdd9d2850cb287557a92b6c9/packages/react-native-web/src/vendor/react-native/FlatList/index.js#L117-L120

https://github.com/Expensify/react-native-web/blob/bb2f765614628eeccdd9d2850cb287557a92b6c9/packages/react-native-web/src/vendor/react-native/VirtualizedList/index.js#L2349-L2351

But, with just transform: scale(-1) I couldn't recreate it, where pinch zoom stop working.

[fedirjh]

Pinch zoom is not working when FlatList is inverted, if I remove this, we can zoom in chat

Hmm, that makes sense. I tested it within a code sandbox and it appears that this issue is with RNW. It seems that this case should be fixed upstream as well. Tested here : https://42y1lw.sse.codesandbox.io/lists

https://github.com/Expensify/App/assets/36869046/1fe63c64-f9bb-4bde-8798-4e9bcfd9b1a2

[fedirjh]

@tgolen I believe we should create a separate issue to handle this case https://github.com/Expensify/App/issues/17246#issuecomment-1539015249. The root cause seems to be different from the main issue we're addressing here. Regarding the main issue, I think this solution looks good and can proceed with it.

[tgolen]

OK, that sounds fine to me. Thank you! @alexpensify 🟢 to hire @alitoshmatov for this.

[alexpensify]

Hmmm, I assigned @alitoshmatov but waiting for the automation to kick in here. Melvin?

[fedirjh]

cc @alexpensify Maybe because the issue was internal. I guess it should be external for automation to work

[melvin-bot[bot]]

Current assignee @alexpensify is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @fedirjh is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

Current assignee @tgolen is eligible for the External assigner, not assigning anyone new.

[melvin-bot[bot]]

📣 @alitoshmatov You have been assigned to this job by @alexpensify! Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[alexpensify]

There we go, good catch @fedirjh!

[alitoshmatov]

Applied to the upwork job, the pr will be ready in couple of hours.

[alitoshmatov]

@fedirjh Opened PR in react-native-web - https://github.com/Expensify/react-native-web/pull/18/files

I am not sure how deployment works in this package, looks like it is deployed to npm automatically. I open PR in expensify app with bumping the package version once aboce pr is merged

[fedirjh]

@alitoshmatov Could you please open an upstream PR in https://github.com/necolas/react-native-web ?

[alitoshmatov]

@fedirjh Looks like expsify/react-native-web and https://github.com/necolas/react-native-web doesn't much and I am getting a lot of changes when trying to open PR with my current branch

Should I open new branch in upstream and then open a pr?

[fedirjh]

Should I open new branch in upstream and then open a pr?

@alitoshmatov Yes , our fork is not up to date with upstream

[alexpensify]

Easy Melvin, the PR has been merged.

[fedirjh]

@alitoshmatov Were you able to submit the upstream PR?

[alitoshmatov]

@fedirjh Finally opened PR in upstream - https://github.com/necolas/react-native-web/pull/2520

[tgolen]

Dropping to weekly priority now that a PR is being worked on.

[strepanier03]

👋 hey, quick note that we should keep all e/app GHs as daily unless they have "Hold" in the title. I'm going to flip this back to daily as I'm doing the resync and it's step in the SO process guide.

[alitoshmatov]

@tgolen Can you check this out, and help us to deploy @expensify/react-native-web

[tgolen]

That package is deployed now. What are the next steps?

[fedirjh]

@tgolen Please check this conversation https://expensify.slack.com/archives/C01GTK53T8Q/p1684256093521369?thread_ts=1684080150.427299&cid=C01GTK53T8Q . It seems that @alitoshmatov has faced some issues .

[alitoshmatov]

@tgolen We were having problems related to breaking changes introduced in https://github.com/Expensify/react-native-web/pull/17

https://expensify.slack.com/archives/C01GTK53T8Q/p1684256093521369?thread_ts=1684080150.427299&cid=C01GTK53T8Q

[alexpensify]

@dylanexpensify - this one is moving forward, but assigning if a BZ team member is needed to step in while I'm OOO.

[dylanexpensify]

@tgolen @fedirjh can we get an update here today? 🙇‍♂️

[tgolen]

Looks like we're still looking for an update from @alitoshmatov. @roryabraham and I both agreed that the best next step is to get the broken packages updated to work with the latest version of react-native-web:

react-native-modal react-native-gesture-handler

[tgolen]

Looks like @fedirjh Might have found the source of some of the issues: https://expensify.slack.com/archives/C01GTK53T8Q/p1684622056060109?thread_ts=1684080150.427299&cid=C01GTK53T8Q

@alitoshmatov Do you have some next steps to move this forward?

[dylanexpensify]

Nice! Let's see what @alitoshmatov comes up with here.

[melvin-bot[bot]]

Triggered auto assignment to @NicMendonca (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[dylanexpensify]

I'm heading OOO tomorrow for about a week so adding another BZ member while I'm away to help keep the train moving! 🚂 Thanks @NicMendonca!!

[NicMendonca]

Going OOO until June 5th so assigning a buddy to this GH to watch over the issue. I'll pick it back up when I am back from OOO if this is still open.

[NicMendonca]

@alexpensify actually, I will keep you assigned since you are also on Bug0 team 😄

[tgolen]

Bumping the slack thread to see what the next steps are.