mirror of https://github.com/tooot-app/app
Prevent going back when zoomed
This commit is contained in:
parent
9863e13e43
commit
5c255ffa6d
|
@ -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);
|
||||
|
|
@ -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(
|
||||
|
|
Loading…
Reference in New Issue