From da1ea314a4d9b22caa2a3d4769793d68ac838f68 Mon Sep 17 00:00:00 2001 From: xmflsct Date: Mon, 31 Oct 2022 00:31:31 +0100 Subject: [PATCH] Swipe down close image https://github.com/intergalacticspacehighway/react-native-reanimated-zoom/issues/15 --- .../react-native-reanimated-zoom+0.3.1.patch | 68 ++++++++++ src/screens/ImagesViewer.tsx | 122 +++++++++--------- 2 files changed, 126 insertions(+), 64 deletions(-) create mode 100644 patches/react-native-reanimated-zoom+0.3.1.patch diff --git a/patches/react-native-reanimated-zoom+0.3.1.patch b/patches/react-native-reanimated-zoom+0.3.1.patch new file mode 100644 index 00000000..1440915f --- /dev/null +++ b/patches/react-native-reanimated-zoom+0.3.1.patch @@ -0,0 +1,68 @@ +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 9b3e4a3..558944d 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 +@@ -4,6 +4,7 @@ declare type Props = { + children: React.ReactNode; + minimumZoomScale?: number; + maximumZoomScale?: number; ++ simultaneousGesture?: GestureType; + } & 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 2c48163..bc2d3dd 100644 +--- a/node_modules/react-native-reanimated-zoom/src/zoom.tsx ++++ b/node_modules/react-native-reanimated-zoom/src/zoom.tsx +@@ -8,13 +8,18 @@ import Animated, { + cancelAnimation, + runOnJS, + } from 'react-native-reanimated'; +-import { Gesture, GestureDetector } from 'react-native-gesture-handler'; ++import { ++ Gesture, ++ GestureDetector, ++ GestureType, ++} from 'react-native-gesture-handler'; + import { ZoomListContext } from './zoom-list-context'; + + type Props = { + children: React.ReactNode; + minimumZoomScale?: number; + maximumZoomScale?: number; ++ simultaneousGesture?: GestureType; + } & ViewProps; + + export function Zoom(props: Props) { +@@ -23,6 +28,7 @@ export function Zoom(props: Props) { + maximumZoomScale = 8, + style: propStyle, + onLayout, ++ simultaneousGesture, + } = props; + + const zoomListContext = useContext(ZoomListContext); +@@ -198,11 +204,21 @@ export function Zoom(props: Props) { + ); + } + +- return Gesture.Race(doubleTap, Gesture.Simultaneous(pan, pinch)); ++ return Gesture.Race( ++ doubleTap, ++ simultaneousGesture ++ ? Gesture.Simultaneous(pan, pinch, simultaneousGesture) ++ : Gesture.Simultaneous(pan, pinch) ++ ); + + // only add prop dependencies + // eslint-disable-next-line react-hooks/exhaustive-deps +- }, [maximumZoomScale, minimumZoomScale, zoomListContext]); ++ }, [ ++ maximumZoomScale, ++ minimumZoomScale, ++ zoomListContext, ++ simultaneousGesture, ++ ]); + + useDerivedValue(() => { + if (scale.value > 1 && !isZoomed.value) { diff --git a/src/screens/ImagesViewer.tsx b/src/screens/ImagesViewer.tsx index 5ae832d3..d9244a3e 100644 --- a/src/screens/ImagesViewer.tsx +++ b/src/screens/ImagesViewer.tsx @@ -17,12 +17,9 @@ import { ViewToken } from 'react-native' import FlashMessage from 'react-native-flash-message' -import { - Directions, - FlingGestureHandler, - 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 { runOnJS } 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' @@ -106,6 +103,9 @@ const ScreenImagesViewer = ({ return ( 8 ? 8 : max} + simultaneousGesture={Gesture.Fling() + .direction(Directions.DOWN) + .onStart(() => runOnJS(navigation.goBack)())} children={ - navigation.goBack()} - > - { - analytics('imageviewer_more_press') - showActionSheetWithOptions( - { - options: [ - t('content.options.save'), - t('content.options.share'), - t('content.options.cancel') - ], - cancelButtonIndex: 2, - userInterfaceStyle: mode - }, - async buttonIndex => { - switch (buttonIndex) { - case 0: - analytics('imageviewer_more_save_press') - saveImage({ theme, image: imageUrls[currentIndex] }) - break - case 1: - analytics('imageviewer_more_share_press') - switch (Platform.OS) { - case 'ios': - await Share.share({ url: imageUrls[currentIndex].url }) - break - case 'android': - await Share.share({ - message: imageUrls[currentIndex].url - }) - break - } - break - } + { + analytics('imageviewer_more_press') + showActionSheetWithOptions( + { + options: [ + t('content.options.save'), + t('content.options.share'), + t('content.options.cancel') + ], + cancelButtonIndex: 2, + userInterfaceStyle: mode + }, + async buttonIndex => { + switch (buttonIndex) { + case 0: + analytics('imageviewer_more_save_press') + saveImage({ theme, image: imageUrls[currentIndex] }) + break + case 1: + analytics('imageviewer_more_share_press') + switch (Platform.OS) { + case 'ios': + await Share.share({ url: imageUrls[currentIndex].url }) + break + case 'android': + await Share.share({ + message: imageUrls[currentIndex].url + }) + break + } + break } - ) + } + ) + }} + > + item.id} + renderItem={renderItem} + onViewableItemsChanged={onViewableItemsChanged} + viewabilityConfig={{ + itemVisiblePercentThreshold: 50 }} - > - item.id} - renderItem={renderItem} - onViewableItemsChanged={onViewableItemsChanged} - viewabilityConfig={{ - itemVisiblePercentThreshold: 50 - }} - initialScrollIndex={initialIndex} - getItemLayout={(_, index) => ({ - length: SCREEN_WIDTH, - offset: SCREEN_WIDTH * index, - index - })} - /> - - + initialScrollIndex={initialIndex} + getItemLayout={(_, index) => ({ + length: SCREEN_WIDTH, + offset: SCREEN_WIDTH * index, + index + })} + /> + ) }