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,67 +172,61 @@ const ScreenImagesViewer = ({
           onPress={onPress}
         />
       </View>
-      <FlingGestureHandler
-        direction={Directions.DOWN}
-        numberOfPointers={1}
-        onEnded={() => navigation.goBack()}
-      >
-        <LongPressGestureHandler
-          onEnded={() => {
-            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
-                }
+      <LongPressGestureHandler
+        onEnded={() => {
+          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
               }
-            )
+            }
+          )
+        }}
+      >
+        <ZoomFlatList
+          data={imageUrls}
+          pagingEnabled
+          horizontal
+          keyExtractor={item => item.id}
+          renderItem={renderItem}
+          onViewableItemsChanged={onViewableItemsChanged}
+          viewabilityConfig={{
+            itemVisiblePercentThreshold: 50
           }}
-        >
-          <ZoomFlatList
-            data={imageUrls}
-            pagingEnabled
-            horizontal
-            keyExtractor={item => item.id}
-            renderItem={renderItem}
-            onViewableItemsChanged={onViewableItemsChanged}
-            viewabilityConfig={{
-              itemVisiblePercentThreshold: 50
-            }}
-            initialScrollIndex={initialIndex}
-            getItemLayout={(_, index) => ({
-              length: SCREEN_WIDTH,
-              offset: SCREEN_WIDTH * index,
-              index
-            })}
-          />
-        </LongPressGestureHandler>
-      </FlingGestureHandler>
+          initialScrollIndex={initialIndex}
+          getItemLayout={(_, index) => ({
+            length: SCREEN_WIDTH,
+            offset: SCREEN_WIDTH * index,
+            index
+          })}
+        />
+      </LongPressGestureHandler>
     </SafeAreaProvider>
   )
 }