From 5c255ffa6d426cdce353e205cae347309325e478 Mon Sep 17 00:00:00 2001 From: xmflsct Date: Mon, 31 Oct 2022 19:42:49 +0100 Subject: [PATCH] Prevent going back when zoomed --- .../react-native-reanimated-zoom+0.3.2.patch | 41 +++++++++++++++++++ src/screens/ImagesViewer.tsx | 19 +++++---- 2 files changed, 53 insertions(+), 7 deletions(-) create mode 100644 patches/react-native-reanimated-zoom+0.3.2.patch diff --git a/patches/react-native-reanimated-zoom+0.3.2.patch b/patches/react-native-reanimated-zoom+0.3.2.patch new file mode 100644 index 00000000..8ac6cd3a --- /dev/null +++ b/patches/react-native-reanimated-zoom+0.3.2.patch @@ -0,0 +1,41 @@ +diff --git a/node_modules/react-native-reanimated-zoom/lib/typescript/zoom.d.ts b/node_modules/react-native-reanimated-zoom/lib/typescript/zoom.d.ts +index 38fb6f1..e93c288 100644 +--- a/node_modules/react-native-reanimated-zoom/lib/typescript/zoom.d.ts ++++ b/node_modules/react-native-reanimated-zoom/lib/typescript/zoom.d.ts +@@ -6,6 +6,7 @@ declare type Props = { + minimumZoomScale?: number; + maximumZoomScale?: number; + simultaneousGesture?: GestureType; ++ isZoomed?: SharedValue; + } & ViewProps; + export declare function Zoom(props: Props): JSX.Element; + export {}; +diff --git a/node_modules/react-native-reanimated-zoom/src/zoom.tsx b/node_modules/react-native-reanimated-zoom/src/zoom.tsx +index e07b415..d57a1eb 100644 +--- a/node_modules/react-native-reanimated-zoom/src/zoom.tsx ++++ b/node_modules/react-native-reanimated-zoom/src/zoom.tsx +@@ -7,6 +7,7 @@ import Animated, { + withTiming, + cancelAnimation, + runOnJS, ++ SharedValue, + } from 'react-native-reanimated'; + import { + Gesture, +@@ -20,6 +21,7 @@ type Props = { + minimumZoomScale?: number; + maximumZoomScale?: number; + simultaneousGesture?: GestureType; ++ isZoomed?: SharedValue; + } & ViewProps; + + export function Zoom(props: Props) { +@@ -39,7 +41,7 @@ export function Zoom(props: Props) { + const originY = useSharedValue(0); + const scale = useSharedValue(1); + const isPinching = useSharedValue(false); +- const isZoomed = useSharedValue(false); ++ const isZoomed = props.isZoomed || useSharedValue(false); + const viewHeight = useSharedValue(0); + const viewWidth = useSharedValue(0); + diff --git a/src/screens/ImagesViewer.tsx b/src/screens/ImagesViewer.tsx index d9244a3e..b81aba23 100644 --- a/src/screens/ImagesViewer.tsx +++ b/src/screens/ImagesViewer.tsx @@ -4,11 +4,12 @@ import { HeaderCenter, HeaderLeft, HeaderRight } from '@components/Header' import { useActionSheet } from '@expo/react-native-action-sheet' import { RootStackScreenProps } from '@utils/navigation/navigators' import { useTheme } from '@utils/styles/ThemeManager' -import React, { useCallback, useRef, useState } from 'react' +import React, { useCallback, useState } from 'react' import { useTranslation } from 'react-i18next' import { Dimensions, FlatList, + Image, PixelRatio, Platform, Share, @@ -16,10 +17,9 @@ import { View, ViewToken } from 'react-native' -import FlashMessage from 'react-native-flash-message' import { Directions, Gesture, LongPressGestureHandler } from 'react-native-gesture-handler' import { LiveTextImageView } from 'react-native-live-text-image-view' -import { runOnJS } from 'react-native-reanimated' +import { runOnJS, useSharedValue } from 'react-native-reanimated' import { Zoom, createZoomListComponent } from 'react-native-reanimated-zoom' import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context' import saveImage from './ImageViewer/save' @@ -48,8 +48,6 @@ const ScreenImagesViewer = ({ const initialIndex = imageUrls.findIndex(image => image.id === id) const [currentIndex, setCurrentIndex] = useState(initialIndex) - const messageRef = useRef(null) - const { showActionSheetWithOptions } = useActionSheet() const onPress = useCallback(() => { analytics('imageviewer_more_press') @@ -85,6 +83,8 @@ const ScreenImagesViewer = ({ ) }, [currentIndex]) + const isZoomed = useSharedValue(false) + const renderItem = React.useCallback( ({ item @@ -102,10 +102,15 @@ const ScreenImagesViewer = ({ return ( 8 ? 8 : max} simultaneousGesture={Gesture.Fling() .direction(Directions.DOWN) - .onStart(() => runOnJS(navigation.goBack)())} + .onStart(() => { + if (isZoomed.value === false) { + runOnJS(navigation.goBack)() + } + })} children={ ) }, - [] + [isZoomed.value] ) const onViewableItemsChanged = useCallback(