about summary refs log tree commit diff
path: root/src/view/com/lightbox/ImageViewing/hooks/useDoubleTapToZoom.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/view/com/lightbox/ImageViewing/hooks/useDoubleTapToZoom.ts')
-rw-r--r--src/view/com/lightbox/ImageViewing/hooks/useDoubleTapToZoom.ts65
1 files changed, 65 insertions, 0 deletions
diff --git a/src/view/com/lightbox/ImageViewing/hooks/useDoubleTapToZoom.ts b/src/view/com/lightbox/ImageViewing/hooks/useDoubleTapToZoom.ts
new file mode 100644
index 000000000..92746e951
--- /dev/null
+++ b/src/view/com/lightbox/ImageViewing/hooks/useDoubleTapToZoom.ts
@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) JOB TODAY S.A. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, {useCallback} from 'react'
+import {ScrollView, NativeTouchEvent, NativeSyntheticEvent} from 'react-native'
+
+import {Dimensions} from '../@types'
+
+const DOUBLE_TAP_DELAY = 300
+let lastTapTS: number | null = null
+
+/**
+ * This is iOS only.
+ * Same functionality for Android implemented inside usePanResponder hook.
+ */
+function useDoubleTapToZoom(
+  scrollViewRef: React.RefObject<ScrollView>,
+  scaled: boolean,
+  screen: Dimensions,
+) {
+  const handleDoubleTap = useCallback(
+    (event: NativeSyntheticEvent<NativeTouchEvent>) => {
+      const nowTS = new Date().getTime()
+      const scrollResponderRef = scrollViewRef?.current?.getScrollResponder()
+
+      if (lastTapTS && nowTS - lastTapTS < DOUBLE_TAP_DELAY) {
+        const {pageX, pageY} = event.nativeEvent
+        let targetX = 0
+        let targetY = 0
+        let targetWidth = screen.width
+        let targetHeight = screen.height
+
+        // Zooming in
+        // TODO: Add more precise calculation of targetX, targetY based on touch
+        if (!scaled) {
+          targetX = pageX / 2
+          targetY = pageY / 2
+          targetWidth = screen.width / 2
+          targetHeight = screen.height / 2
+        }
+
+        // @ts-ignore
+        scrollResponderRef?.scrollResponderZoomTo({
+          x: targetX,
+          y: targetY,
+          width: targetWidth,
+          height: targetHeight,
+          animated: true,
+        })
+      } else {
+        lastTapTS = nowTS
+      }
+    },
+    [scaled, screen.height, screen.width, scrollViewRef],
+  )
+
+  return handleDoubleTap
+}
+
+export default useDoubleTapToZoom