Attachment - Image does not zoom in when two fingers are used

[isagoico]

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

---

Expected Result

Confirm the image zooms in

Actual Result

Image does not zoom in

Action Performed

1. Launch the app and login
2. Send an image attachment
3. After the attachment uploads, tap on it, confirm an attachment modal shows
4. Use two fingers to zoom in

Platform

iOS ✔️
Android ✔️
mWeb/Chrome ✔️

Workaround:

User can zoom with double tap

Platform:

Where is this issue occurring?

Web
iOS ✔️
Android ✔️
Desktop App
Mobile Web

Version Number: 1.0.27-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Images/Videos
Issue is reproducible in production but it's failing step 5 of this PR #2442 (comment).

Bug5030887_20210420_162938_1_.mp4

Expensify/Expensify Issue URL:

View all open jobs on Upwork

[Jag96]

Had a look at this today and this is definitely a regression, at least on iOS, on the Android emulator the pinch-zoom didn't work even on an old version without the recent changes. The main issue is that the event/gestureState being passed into the onStartShouldSetPanResponder callback is showing 1 touch, rather than 2 touches. On the simulator this works fine, and when testing on a physical device the pinch to zoom works about 50% of the time, so I believe this is related to the PanResponder trying to prevent multiple taps as stated in the docs.

PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures.

The reason this was working before was that in the library code, the zoom functionality was happening inside the onPanResponderMove function even after 1 tap, however, with the recent changes the override of onStartShouldSetPanResponder now prevents that logic from being hit. For context, the reason for this change was to enable the swipe event to be passed to the Attachment Modal if the tap event was just one touchpoint or we were zoomed in.

I tried a couple of things here to enable the zoom to work consistently but ultimately couldn't retain both behaviors

• I tried overriding the onStart to always return false, and then moving the logic from onStart to onMove. The issue here was that as soon as the ImageView component passes on the onStart, the Modal grabs the event and the ImageZoom onMove and onMoveShouldSetPanResponder functions never get hit
• I tried updating the onStartShouldSetPanResponder to return true, passing down a function as a prop to close the AttachmentModal, and calling that function inside the onMove/responderRelease which works, but with two issues; the animation for dismissing the modal is not the same as the other modals (it doesn't animate as you swipe), and the library does not pass any data letting us determine the direction/distance the user swiped which means the modal dismisses regardless of the direction you swipe in. We'd need to update the library to pass the event data to the callbacks to make this work.

Some potential solutions, from easiest to more complicated:

• Figure out some way to get the PanResponder event to be more accurate for multi-touch gestures (if possible)
• Update the code to pass down a callback and dismiss on any onPanResponderRelease event where the scale is set to 1 (not zoomed), sacrificing the consistent modal animation
• Write our own version of the ImageZoom library that works with our use case

cc @marcaaron since you are familiar w/ this feature

[Jag96]

Had another look at this today but didn't find any valid solutions, and it doesn't seem like there's a way to make the PanResponder event more accurate for multi-touch. I also tried using https://github.com/aMarCruz/react-native-photo-view-ex and https://github.com/ascoders/react-native-image-viewer#readme but nothing super helpful in those either. I've pushed this branch with my testing diff, I'll get more eyes on this in #expensify-open-source.

[isagoico]

Issue reproducible during today's KI retests

[isagoico]

Issue reproducible during today's KI retests

[isagoico]

Issue reproducible during today's KI retests

[isagoico]

Issue reproducible today during KI retests

[isagoico]

Issue reproducible today during KI retests

[isagoico]

Issue reproducible today during KI retests

[isagoico]

Issue reproducible today during KI retests.

[isagoico]

Issue reproducible during KI retests.

[isagoico]

Issue reproducible during KI retests.