From 9e8b7c185bd47bd0483d48d8b3ccd171360e7523 Mon Sep 17 00:00:00 2001 From: shivam <91240327+shivamhwp@users.noreply.github.com> Date: Wed, 4 Nov 2026 15:23:07 +0000 Subject: [PATCH 1/2] fix(mobile): Android image viewer pinches from anywhere on screen Pan handlers sat on the Animated.Image, so native hit testing only started a pinch when both fingers landed on the fitted image. A wide image fits as a thin strip and could not be zoomed. Move the handlers to a full-viewport View that wraps the image and loading indicator inside the swipe-to-close ScrollView. Fixes #30815 Co-Authored-By: Claude Opus 5.5 --- patches/react-native-image-viewing@0.2.2.patch | 17 +++++++++++------ pnpm-lock.yaml | 6 +++--- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/patches/react-native-image-viewing@0.2.2.patch b/patches/react-native-image-viewing@0.2.2.patch index f85cb5fea135b..fc29fba47826e 100644 --- a/patches/react-native-image-viewing@0.2.2.patch +++ b/patches/react-native-image-viewing@0.2.2.patch @@ -64,7 +64,7 @@ index 3d7641a9a94864415d207c678b71f8c592c90aa1..2b9ef77c3eb58cd284152ad22b2e711a offset: SCREEN_WIDTH * index, index, diff --git a/dist/components/ImageItem/ImageItem.android.js b/dist/components/ImageItem/ImageItem.android.js -index 5fcaa9f9a7d893817fee89b85186ee3936118e69..3effe838fa54495d165b81cc7501e72d51fbee1b 100644 +index 5fcaa9f9a7d893817fee89b85186ee3936118e69..98ecef33888cbf7ad50a61bbf1645aee1857c054 100644 --- a/dist/components/ImageItem/ImageItem.android.js +++ b/dist/components/ImageItem/ImageItem.android.js @@ -6,17 +6,17 @@ @@ -72,7 +72,7 @@ index 5fcaa9f9a7d893817fee89b85186ee3936118e69..3effe838fa54495d165b81cc7501e72d */ import React, { useCallback, useRef, useState } from "react"; -import { Animated, ScrollView, Dimensions, StyleSheet, } from "react-native"; -+import { Animated, ScrollView, Dimensions, } from "react-native"; ++import { Animated, ScrollView, Dimensions, View, } from "react-native"; import useImageDimensions from "../../hooks/useImageDimensions"; import usePanResponder from "../../hooks/usePanResponder"; import { getImageStyles, getImageTransform } from "../../utils"; @@ -102,7 +102,7 @@ index 5fcaa9f9a7d893817fee89b85186ee3936118e69..3effe838fa54495d165b81cc7501e72d const onLongPressHandler = useCallback(() => { onLongPress(imageSrc); }, [imageSrc, onLongPress]); -@@ -64,7 +64,7 @@ const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPre +@@ -64,21 +64,15 @@ const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPre const offsetY = (_c = (_b = (_a = nativeEvent) === null || _a === void 0 ? void 0 : _a.contentOffset) === null || _b === void 0 ? void 0 : _b.y, (_c !== null && _c !== void 0 ? _c : 0)); scrollValueY.setValue(offsetY); }; @@ -111,8 +111,13 @@ index 5fcaa9f9a7d893817fee89b85186ee3936118e69..3effe838fa54495d165b81cc7501e72d onScroll, onScrollEndDrag, })}> -@@ -72,13 +72,4 @@ const ImageItem = ({ imageSrc, onZoom, onRequestClose, onLongPress, delayLongPre - {(!isLoaded || !imageDimensions) && } +- +- {(!isLoaded || !imageDimensions) && } ++ {/* Pinch from anywhere on screen, not only on the fitted image. */} ++ ++ ++ {(!isLoaded || !imageDimensions) && } ++ ); }; -const styles = StyleSheet.create({ @@ -254,7 +259,7 @@ index cb5f0f798e5cfeedf459b7d22e92871db3092020..97ca2c9c326b1c53e6a5d90c3bb95d53 }; export default useImageIndexChange; diff --git a/dist/hooks/usePanResponder.js b/dist/hooks/usePanResponder.js -index 99dcbc7efea4eba86a8bc2bad71dde73c8ebf1b4..3a374c0923879548ec3826a78be16f79c6e01432 100644 +index 99dcbc7efea4eba86a8bc2bad71dde73c8ebf1b4..7a7601eef4d330448d876b6460f53bd518a2c18c 100644 --- a/dist/hooks/usePanResponder.js +++ b/dist/hooks/usePanResponder.js @@ -8,14 +8,14 @@ diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ddbc362245c9..b0133ddf4212b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -393,7 +393,7 @@ patchedDependencies: micromark@4.0.2: cb79edde7eca83bbcaaafb6ceb7b044b81b987314cde4910823b15257ecada67 node-pty@1.2.0-beta.15: f1e680afec85f650699ea756f91f469844ec4c976f4f168492a45c6b3f67d651 react-native-gesture-handler@3.3.0: abe20e1d1c23549297cbbc818e14fe479b41455930d9663135d6b40fe359b626 - react-native-image-viewing@0.2.2: 419f35ee91eac88ced9438058281db5eb09d9c799d8974c1172926068c9448cf + react-native-image-viewing@0.2.2: f6f9725eb680b23e3f4d8568df3691099716eddae57d5f04e9d3c5d52d22df08 react-native-keyboard-controller@1.22.8: 6eb6c847ac693b636ec97c83575acd44b77e92ad0d2c776de0cb4e78e8fb9d4f react-native-pdf-jsi@5.0.0: 6f52854210f61bef499850ebd498229a111bc34ec5b2a4925e644f2f48f42760 react-native-reanimated@4.7.1: 95ee26e5fcab5f50bc4b4c47b3f7e6278a0b20850205efb9f6ee7e70a22d2b59 @@ -752,7 +752,7 @@ importers: version: 3.3.0(patch_hash=abe20e1d1c23549297cbbc818e14fe479b41455930d9663135d6b40fe359b626)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) react-native-image-viewing: specifier: 0.2.2 - version: 0.2.2(patch_hash=419f35ee91eac88ced9438058281db5eb09d9c799d8974c1172926068c9448cf)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) + version: 0.2.2(patch_hash=f6f9725eb680b23e3f4d8568df3691099716eddae57d5f04e9d3c5d52d22df08)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) react-native-keyboard-controller: specifier: 1.22.8 version: 1.22.8(patch_hash=6eb6c847ac693b636ec97c83575acd44b77e92ad0d2c776de0cb4e78e8fb9d4f)(e2a826d844fe10cdcbda558127861778) @@ -21350,7 +21350,7 @@ snapshots: react: 19.3.0 react-native: 0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6) - react-native-image-viewing@0.2.2(patch_hash=419f35ee91eac88ced9438058281db5eb09d9c799d8974c1172926068c9448cf)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0): + react-native-image-viewing@0.2.2(patch_hash=f6f9725eb680b23e3f4d8568df3691099716eddae57d5f04e9d3c5d52d22df08)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0): dependencies: react: 19.3.0 react-native: 0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6) From 17c8c36e1de930bb9705762f0884873cd125794b Mon Sep 17 00:00:00 2001 From: shivam <91240327+shivamhwp@users.noreply.github.com> Date: Wed, 4 Nov 2026 15:57:28 +0000 Subject: [PATCH 2/2] fix(mobile): wait for image loading before enabling zoom --- patches/react-native-image-viewing@0.2.2.patch | 4 ++-- pnpm-lock.yaml | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/patches/react-native-image-viewing@0.2.2.patch b/patches/react-native-image-viewing@0.2.2.patch index fc29fba47826e..f24743f93ac06 100644 --- a/patches/react-native-image-viewing@0.2.2.patch +++ b/patches/react-native-image-viewing@0.2.2.patch @@ -64,7 +64,7 @@ index 3d7641a9a94864415d207c678b71f8c592c90aa1..2b9ef77c3eb58cd284152ad22b2e711a offset: SCREEN_WIDTH * index, index, diff --git a/dist/components/ImageItem/ImageItem.android.js b/dist/components/ImageItem/ImageItem.android.js -index 5fcaa9f9a7d893817fee89b85186ee3936118e69..98ecef33888cbf7ad50a61bbf1645aee1857c054 100644 +index 5fcaa9f9a7d893817fee89b85186ee3936118e69..e166dd14349b4b95f96d648cb64f464ed564c8b8 100644 --- a/dist/components/ImageItem/ImageItem.android.js +++ b/dist/components/ImageItem/ImageItem.android.js @@ -6,17 +6,17 @@ @@ -114,7 +114,7 @@ index 5fcaa9f9a7d893817fee89b85186ee3936118e69..98ecef33888cbf7ad50a61bbf1645aee - - {(!isLoaded || !imageDimensions) && } + {/* Pinch from anywhere on screen, not only on the fitted image. */} -+ ++ + + {(!isLoaded || !imageDimensions) && } + diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b0133ddf4212b..0892086025566 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -393,7 +393,7 @@ patchedDependencies: micromark@4.0.2: cb79edde7eca83bbcaaafb6ceb7b044b81b987314cde4910823b15257ecada67 node-pty@1.2.0-beta.15: f1e680afec85f650699ea756f91f469844ec4c976f4f168492a45c6b3f67d651 react-native-gesture-handler@3.3.0: abe20e1d1c23549297cbbc818e14fe479b41455930d9663135d6b40fe359b626 - react-native-image-viewing@0.2.2: f6f9725eb680b23e3f4d8568df3691099716eddae57d5f04e9d3c5d52d22df08 + react-native-image-viewing@0.2.2: 4aa038d541c7ddcc8f1437eb3e7b4f769f61de78e7f91b53f9805dfca608474d react-native-keyboard-controller@1.22.8: 6eb6c847ac693b636ec97c83575acd44b77e92ad0d2c776de0cb4e78e8fb9d4f react-native-pdf-jsi@5.0.0: 6f52854210f61bef499850ebd498229a111bc34ec5b2a4925e644f2f48f42760 react-native-reanimated@4.7.1: 95ee26e5fcab5f50bc4b4c47b3f7e6278a0b20850205efb9f6ee7e70a22d2b59 @@ -752,7 +752,7 @@ importers: version: 3.3.0(patch_hash=abe20e1d1c23549297cbbc818e14fe479b41455930d9663135d6b40fe359b626)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) react-native-image-viewing: specifier: 0.2.2 - version: 0.2.2(patch_hash=f6f9725eb680b23e3f4d8568df3691099716eddae57d5f04e9d3c5d52d22df08)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) + version: 0.2.2(patch_hash=4aa038d541c7ddcc8f1437eb3e7b4f769f61de78e7f91b53f9805dfca608474d)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0) react-native-keyboard-controller: specifier: 1.22.8 version: 1.22.8(patch_hash=6eb6c847ac693b636ec97c83575acd44b77e92ad0d2c776de0cb4e78e8fb9d4f)(e2a826d844fe10cdcbda558127861778) @@ -21350,7 +21350,7 @@ snapshots: react: 19.3.0 react-native: 0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6) - react-native-image-viewing@0.2.2(patch_hash=f6f9725eb680b23e3f4d8568df3691099716eddae57d5f04e9d3c5d52d22df08)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0): + react-native-image-viewing@0.2.2(patch_hash=4aa038d541c7ddcc8f1437eb3e7b4f769f61de78e7f91b53f9805dfca608474d)(react-native@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(react@19.3.0): dependencies: react: 19.3.0 react-native: 0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(@react-native/metro-config@0.88.0(@babel/core@7.29.7(supports-color@8.1.1))(bufferutil@4.1.0)(supports-color@8.1.1)(utf-8-validate@6.0.6))(@types/react@19.3.0)(bufferutil@4.1.0)(react@19.3.0)(supports-color@8.1.1)(utf-8-validate@6.0.6)