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 { useActionSheet } from '@expo/react-native-action-sheet'
import { RootStackScreenProps } from '@utils/navigation/navigators' import { RootStackScreenProps } from '@utils/navigation/navigators'
import { useTheme } from '@utils/styles/ThemeManager' 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 { useTranslation } from 'react-i18next'
import { import {
Dimensions, Dimensions,
FlatList, FlatList,
Image,
PixelRatio, PixelRatio,
Platform, Platform,
Share, Share,
@ -16,10 +17,9 @@ import {
View, View,
ViewToken ViewToken
} from 'react-native' } from 'react-native'
import FlashMessage from 'react-native-flash-message'
import { Directions, Gesture, LongPressGestureHandler } from 'react-native-gesture-handler' import { Directions, Gesture, LongPressGestureHandler } from 'react-native-gesture-handler'
import { LiveTextImageView } from 'react-native-live-text-image-view' 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 { Zoom, createZoomListComponent } from 'react-native-reanimated-zoom'
import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context' import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
import saveImage from './ImageViewer/save' import saveImage from './ImageViewer/save'
@ -48,8 +48,6 @@ const ScreenImagesViewer = ({
const initialIndex = imageUrls.findIndex(image => image.id === id) const initialIndex = imageUrls.findIndex(image => image.id === id)
const [currentIndex, setCurrentIndex] = useState(initialIndex) const [currentIndex, setCurrentIndex] = useState(initialIndex)
const messageRef = useRef<FlashMessage>(null)
const { showActionSheetWithOptions } = useActionSheet() const { showActionSheetWithOptions } = useActionSheet()
const onPress = useCallback(() => { const onPress = useCallback(() => {
analytics('imageviewer_more_press') analytics('imageviewer_more_press')
@ -85,6 +83,8 @@ const ScreenImagesViewer = ({
) )
}, [currentIndex]) }, [currentIndex])
const isZoomed = useSharedValue(false)
const renderItem = React.useCallback( const renderItem = React.useCallback(
({ ({
item item
@ -102,10 +102,15 @@ const ScreenImagesViewer = ({
return ( return (
<Zoom <Zoom
isZoomed={isZoomed}
maximumZoomScale={max > 8 ? 8 : max} maximumZoomScale={max > 8 ? 8 : max}
simultaneousGesture={Gesture.Fling() simultaneousGesture={Gesture.Fling()
.direction(Directions.DOWN) .direction(Directions.DOWN)
.onStart(() => runOnJS(navigation.goBack)())} .onStart(() => {
if (isZoomed.value === false) {
runOnJS(navigation.goBack)()
}
})}
children={ children={
<View <View
style={{ style={{
@ -137,7 +142,7 @@ const ScreenImagesViewer = ({
/> />
) )
}, },
[] [isZoomed.value]
) )
const onViewableItemsChanged = useCallback( const onViewableItemsChanged = useCallback(