Feat/optional velocity threshold

.gitignore

@@ -1,4 +1,10 @@
 node_modules/
 dist/
 .expo
-.vscode
+.vscode
+
+#Intelij
+.idea/
+
+# macOS
+.DS_Store

README.md

@@ -61,9 +61,9 @@ const [visible, setIsVisible] = useState(false);
 ## Props
 
 | Prop name                | Description                                                                                         | Type                                                        | Required |
-| ------------------------ | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | -------- |
+|--------------------------|-----------------------------------------------------------------------------------------------------|-------------------------------------------------------------| -------- |
 | `images`                 | Array of images to display                                                                          | ImageSource[]                                               | true     |
-| `keyExtractor`           | Uniqely identifying each image    | (imageSrc: ImageSource, index: number) => string | false |
+| `keyExtractor`           | Uniqely identifying each image                                                                      | (imageSrc: ImageSource, index: number) => string            | false |
 | `imageIndex`             | Current index of image to display                                                                   | number                                                      | true     |
 | `visible`                | Is modal shown or not                                                                               | boolean                                                     | true     |
 | `onRequestClose`         | Function called to close the modal                                                                  | function                                                    | true     |
@@ -74,6 +74,7 @@ const [visible, setIsVisible] = useState(false);
 | `presentationStyle`      | Modal presentation style: default: `fullScreen` **Android:** Use `overFullScreen` to hide StatusBar | `fullScreen`, `pageSheet`, `formSheet`, `overFullScreen`    | false    |
 | `backgroundColor`        | Background color of the modal in HEX (#000000EE)                                                    | string                                                      | false    |
 | `swipeToCloseEnabled`    | Close modal with swipe up or down: default `true`                                                   | boolean                                                     | false    |
+| `swipeCloseVelocity`     | Velocity threshold in order to dismiss the modal on swipe up or down                                | number                                                      | false    |
 | `doubleTapToZoomEnabled` | Zoom image by double tap on it: default `true`                                                      | boolean                                                     | false    |
 | `HeaderComponent`        | Header component, gets current `imageIndex` as a prop                                               | component, function                                         | false    |
 | `FooterComponent`        | Footer component, gets current `imageIndex` as a prop                                               | component, function                                         | false    |

example/.gitignore

@@ -12,3 +12,6 @@ web-report/
 
 # macOS
 .DS_Store
+
+#Intelij
+.idea/

example/App.tsx

@@ -70,6 +70,7 @@ export default function App() {
         <Text style={styles.name}>[ react-native-image-viewing ]</Text>
       </View>
       <ImageViewing
+        swipeCloseVelocity={0.5}
         images={getImageSource(images)}
         imageIndex={currentImageIndex}
         presentationStyle="overFullScreen"

example/package.json

@@ -8,12 +8,12 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "expo": "^44.0.0",
-    "expo-updates": "~0.11.6",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-44.0.0.tar.gz",
-    "react-native-web": "0.17.1"
+    "expo": "~47.0.8",
+    "expo-updates": "~0.15.6",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
+    "react-native": "0.70.5",
+    "react-native-web": "~0.18.9"
   },
   "devDependencies": {
     "@expo/ngrok": "^4.1.0",

src/ImageViewing.tsx

@@ -42,6 +42,7 @@ type Props = {
   delayLongPress?: number;
   HeaderComponent?: ComponentType<{ imageIndex: number }>;
   FooterComponent?: ComponentType<{ imageIndex: number }>;
+  swipeCloseVelocity?:number;
 };
 
 const DEFAULT_ANIMATION_TYPE = "fade";
@@ -66,6 +67,7 @@ function ImageViewing({
   delayLongPress = DEFAULT_DELAY_LONG_PRESS,
   HeaderComponent,
   FooterComponent,
+  swipeCloseVelocity
 }: Props) {
   const imageList = useRef<VirtualizedList<ImageSource>>(null);
   const [opacity, onRequestCloseEnhanced] = useRequestClose(onRequestClose);
@@ -133,6 +135,7 @@ function ImageViewing({
           })}
           renderItem={({ item: imageSrc }) => (
             <ImageItem
+              swipeCloseVelocity={swipeCloseVelocity}
               onZoom={onZoom}
               imageSrc={imageSrc}
               onRequestClose={onRequestCloseEnhanced}

src/components/ImageItem/ImageItem.android.tsx

@@ -39,6 +39,7 @@ type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  swipeCloseVelocity?: number;
 };
 
 const ImageItem = ({
@@ -49,6 +50,7 @@ const ImageItem = ({
   delayLongPress,
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
+  swipeCloseVelocity
 }: Props) => {
   const imageContainer = useRef<ScrollView & NativeMethodsMixin>(null);
   const imageDimensions = useImageDimensions(imageSrc);
@@ -99,8 +101,10 @@ const ImageItem = ({
     const velocityY = nativeEvent?.velocity?.y ?? 0;
     const offsetY = nativeEvent?.contentOffset?.y ?? 0;
 
+    const swipeCloseVelocityThreshold = swipeCloseVelocity || SWIPE_CLOSE_VELOCITY;
+
     if (
-      (Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY &&
+      (Math.abs(velocityY) > swipeCloseVelocityThreshold &&
         offsetY > SWIPE_CLOSE_OFFSET) ||
       offsetY > SCREEN_HEIGHT / 2
     ) {

src/components/ImageItem/ImageItem.d.ts

@@ -18,6 +18,7 @@ declare type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  swipeCloseVelocity?: number;
 };
 
 declare const _default: React.MemoExoticComponent<({

src/components/ImageItem/ImageItem.ios.tsx

@@ -28,7 +28,7 @@ import { ImageSource } from "../../@types";
 import { ImageLoading } from "./ImageLoading";
 
 const SWIPE_CLOSE_OFFSET = 75;
-const SWIPE_CLOSE_VELOCITY = 1.55;
+const SWIPE_CLOSE_VELOCITY = 1;
 const SCREEN = Dimensions.get("screen");
 const SCREEN_WIDTH = SCREEN.width;
 const SCREEN_HEIGHT = SCREEN.height;
@@ -41,6 +41,7 @@ type Props = {
   delayLongPress: number;
   swipeToCloseEnabled?: boolean;
   doubleTapToZoomEnabled?: boolean;
+  swipeCloseVelocity?: number;
 };
 
 const ImageItem = ({
@@ -51,6 +52,7 @@ const ImageItem = ({
   delayLongPress,
   swipeToCloseEnabled = true,
   doubleTapToZoomEnabled = true,
+  swipeCloseVelocity
 }: Props) => {
   const scrollViewRef = useRef<ScrollView>(null);
   const [loaded, setLoaded] = useState(false);
@@ -83,10 +85,12 @@ const ImageItem = ({
       onZoom(scaled);
       setScaled(scaled);
 
+      const swipeCloseVelocityThreshold = swipeCloseVelocity || SWIPE_CLOSE_VELOCITY;
+
       if (
         !scaled &&
         swipeToCloseEnabled &&
-        Math.abs(velocityY) > SWIPE_CLOSE_VELOCITY
+        Math.abs(velocityY) > swipeCloseVelocityThreshold
       ) {
         onRequestClose();
       }