Prevent going back when zoomed

This commit is contained in:
xmflsct 2022-10-31 19:42:49 +01:00
parent 9863e13e43
commit 5c255ffa6d
2 changed files with 53 additions and 7 deletions

View File

@ -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<boolean>;
} & 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<boolean>;
} & 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);

View File

@ -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<FlashMessage>(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 (
<Zoom
isZoomed={isZoomed}
maximumZoomScale={max > 8 ? 8 : max}
simultaneousGesture={Gesture.Fling()
.direction(Directions.DOWN)
.onStart(() => runOnJS(navigation.goBack)())}
.onStart(() => {
if (isZoomed.value === false) {
runOnJS(navigation.goBack)()
}
})}
children={
<View
style={{
@ -137,7 +142,7 @@ const ScreenImagesViewer = ({
/>
)
},
[]
[isZoomed.value]
)
const onViewableItemsChanged = useCallback(