Swipe down close image

https://github.com/intergalacticspacehighway/react-native-reanimated-zoom/issues/15

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) {

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 (
         <Zoom
           maximumZoomScale={max > 8 ? 8 : max}
+          simultaneousGesture={Gesture.Fling()
+            .direction(Directions.DOWN)
+            .onStart(() => runOnJS(navigation.goBack)())}
           children={
             <View
               style={{
@@ -172,11 +172,6 @@ const ScreenImagesViewer = ({
           onPress={onPress}
         />
       </View>
-      <FlingGestureHandler
-        direction={Directions.DOWN}
-        numberOfPointers={1}
-        onEnded={() => navigation.goBack()}
-      >
       <LongPressGestureHandler
         onEnded={() => {
           analytics('imageviewer_more_press')
@@ -232,7 +227,6 @@ const ScreenImagesViewer = ({
           })}
         />
       </LongPressGestureHandler>
-      </FlingGestureHandler>
     </SafeAreaProvider>
   )
 }