stream-chat-react-native-core 5.40.0-rc.2 → 5.41.0-beta.1

package/src/components/ImageGallery/hooks/useImageGalleryGestures.tsx

@@ -1,17 +1,20 @@
-import { useRef } from 'react';
 import { Platform } from 'react-native';
-import { Gesture, GestureType } from 'react-native-gesture-handler';
+import type {
+  PanGestureHandlerGestureEvent,
+  PinchGestureHandlerGestureEvent,
+  TapGestureHandlerGestureEvent,
+} from 'react-native-gesture-handler';
 import {
   cancelAnimation,
   Easing,
   runOnJS,
   SharedValue,
+  useAnimatedGestureHandler,
   useSharedValue,
   withDecay,
   withTiming,
 } from 'react-native-reanimated';
 
-import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { triggerHaptic } from '../../../native';
 
@@ -61,15 +64,7 @@ export const useImageGalleryGestures = ({
   translateY: SharedValue<number>;
   translationX: SharedValue<number>;
 }) => {
-  const { setMessages, setSelectedMessage } = useImageGalleryContext();
-  /**
-   * Gesture handler refs
-   */
-  const doubleTapRef = useRef<GestureType | undefined>(undefined);
-  const panRef = useRef<GestureType | undefined>(undefined);
-  const pinchRef = useRef<GestureType | undefined>(undefined);
-  const singleTapRef = useRef<GestureType | undefined>(undefined);
-  const { overlay, setOverlay } = useOverlayContext();
+  const { setOverlay } = useOverlayContext();
   const isAndroid = Platform.OS === 'android';
 
   /**
@@ -162,548 +157,534 @@ export const useImageGalleryGestures = ({
    * gesture handler once it has began so all interactions by the pan
    * handler are blocked if isPinch.value is true
    */
-  const pan = Gesture.Pan()
-    .enabled(overlay === 'gallery')
-    .maxPointers(isAndroid ? 0 : 1)
-    .minDistance(10)
-    .onStart(() => {
-      if (!isPinch.value) {
-        /**
-         * Cancel any previous motion animation on translations when a touch
-         * begins to interrupt the animation and take over the position handling
-         */
-        cancelAnimation(translateX);
-        cancelAnimation(translateY);
-        cancelAnimation(scale);
-        offsetX.value = translateX.value;
-        offsetY.value = translateY.value;
-      }
+  const onPan = useAnimatedGestureHandler<PanGestureHandlerGestureEvent>(
+    {
+      onActive: (evt) => {
+        if (evt.numberOfPointers === 1 && !isPinch.value) {
+          /**
+           * If Android where a second finger cannot be added back and
+           * removing one finger returns to Pan Handler then adjust origin
+           * on finger remove and set swiping false
+           */
+          if (isAndroid && hasPinched.value === HasPinched.TRUE) {
+            hasPinched.value = HasPinched.FALSE;
+            isSwiping.value = IsSwiping.FALSE;
+            offsetX.value = translateX.value + evt.translationX;
+            offsetY.value = translateY.value - evt.translationY;
+          }
 
-      /**
-       * Reset hasPinched for Android single finger offset
-       */
-      hasPinched.value = HasPinched.FALSE;
-    })
-    .onChange((event) => {
-      if (event.numberOfPointers === 1 && !isPinch.value) {
-        /**
-         * If Android where a second finger cannot be added back and
-         * removing one finger returns to Pan Handler then adjust origin
-         * on finger remove and set swiping false
-         */
-        if (isAndroid && hasPinched.value === HasPinched.TRUE) {
-          hasPinched.value = HasPinched.FALSE;
-          isSwiping.value = IsSwiping.FALSE;
-          offsetX.value = translateX.value + event.translationX;
-          offsetY.value = translateY.value - event.translationY;
+          /**
+           * isSwiping is used to prevent Y movement if a clear swipe to next
+           * or previous is begun when at the edge of a photo. The value is
+           * either 0, 1, or 2, via the IsSwiping enum designating undetermined,
+           * true, or false and is reset on releasing the touch
+           */
+          if (isSwiping.value === IsSwiping.UNDETERMINED) {
+            const maxXYRatio = isAndroid ? 1 : 0.25;
+            if (
+              Math.abs(evt.translationX / evt.translationY) > maxXYRatio &&
+              (Math.abs(-halfScreenWidth * (scale.value - 1) - offsetX.value) < 3 ||
+                Math.abs(halfScreenWidth * (scale.value - 1) - offsetX.value) < 3)
+            ) {
+              isSwiping.value = IsSwiping.TRUE;
+            }
+            if (Math.abs(evt.translationY) > 25) {
+              isSwiping.value = IsSwiping.FALSE;
+            }
+          }
+
+          /**
+           * localEvtScale is used for swipe away
+           */
+          const localEvtScale = scale.value / offsetScale.value;
+
+          /**
+           * If not swiping translate the image in X and Y to the event
+           * translation plus offset. If swiping only translate X, if
+           * swiping down when at top of screen or centered balance scale
+           * using offset to a degree (this needs improvement the calculation
+           * is incorrect but likely needs origin use to be 100%)
+           */
+          translateX.value =
+            scale.value !== offsetScale.value
+              ? offsetX.value * localEvtScale - evt.translationX
+              : offsetX.value - evt.translationX;
+          translateY.value =
+            isSwiping.value !== IsSwiping.TRUE
+              ? scale.value !== offsetScale.value
+                ? offsetY.value * localEvtScale + evt.translationY
+                : offsetY.value + evt.translationY
+              : translateY.value;
+
+          /**
+           * If swiping down start scaling down the image for swipe
+           * away effect
+           */
+          scale.value =
+            currentImageHeight * offsetScale.value < screenHeight && translateY.value > 0
+              ? offsetScale.value * (1 - (1 / 3) * (translateY.value / screenHeight))
+              : currentImageHeight * offsetScale.value > screenHeight &&
+                translateY.value > (currentImageHeight / 2) * offsetScale.value - halfScreenHeight
+              ? offsetScale.value *
+                (1 -
+                  (1 / 3) *
+                    ((translateY.value -
+                      ((currentImageHeight / 2) * offsetScale.value - halfScreenHeight)) /
+                      screenHeight))
+              : scale.value;
+
+          overlayOpacity.value = localEvtScale;
         }
+      },
+      onFinish: (evt) => {
+        if (!isPinch.value && evt.numberOfPointers < 2) {
+          /**
+           * To determine if the fling should page to the next image we
+           * calculate a final position based on the current position and
+           * event velocity
+           */
+          const finalXPosition = evt.translationX - evt.velocityX * 0.3;
+          const finalYPosition = evt.translationY + evt.velocityY * 0.1;
 
-        /**
-         * isSwiping is used to prevent Y movement if a clear swipe to next
-         * or previous is begun when at the edge of a photo. The value is
-         * either 0, 1, or 2, via the IsSwiping enum designating undetermined,
-         * true, or false and is reset on releasing the touch
-         */
-        if (isSwiping.value === IsSwiping.UNDETERMINED) {
-          const maxXYRatio = isAndroid ? 1 : 0.25;
+          /**
+           * If there is a next photo, the image is lined up to the right
+           * edge, the swipe is to the left, and the final position is more
+           * than half the screen width, move to the next image
+           */
           if (
-            Math.abs(event.translationX / event.translationY) > maxXYRatio &&
-            (Math.abs(-halfScreenWidth * (scale.value - 1) - offsetX.value) < 3 ||
-              Math.abs(halfScreenWidth * (scale.value - 1) - offsetX.value) < 3)
+            index.value < photoLength - 1 &&
+            Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
+            translateX.value < 0 &&
+            finalXPosition < -halfScreenWidth &&
+            isSwiping.value === IsSwiping.TRUE
           ) {
-            isSwiping.value = IsSwiping.TRUE;
-          }
-          if (Math.abs(event.translationY) > 25) {
-            isSwiping.value = IsSwiping.FALSE;
+            cancelAnimation(translationX);
+            translationX.value = withTiming(
+              -(screenWidth + MARGIN) * (index.value + 1),
+              {
+                duration: 200,
+                easing: Easing.out(Easing.ease),
+              },
+              () => {
+                resetMovementValues();
+                index.value = index.value + 1;
+                runOnJS(setSelectedIndex)(index.value);
+              },
+            );
+
+            /**
+             * If there is a previous photo, the image is lined up to the left
+             * edge, the swipe is to the right, and the final position is more
+             * than half the screen width, move to the previous image
+             */
+          } else if (
+            index.value > 0 &&
+            Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
+            translateX.value > 0 &&
+            finalXPosition > halfScreenWidth &&
+            isSwiping.value === IsSwiping.TRUE
+          ) {
+            cancelAnimation(translationX);
+            translationX.value = withTiming(
+              -(screenWidth + MARGIN) * (index.value - 1),
+              {
+                duration: 200,
+                easing: Easing.out(Easing.ease),
+              },
+              () => {
+                resetMovementValues();
+                index.value = index.value - 1;
+                runOnJS(setSelectedIndex)(index.value);
+              },
+            );
           }
-        }
 
-        /**
-         * localEvtScale is used for swipe away
-         */
-        const localEvtScale = scale.value / offsetScale.value;
+          /**
+           * When the pan is finished if the scale is less than 1 return the
+           * photo to center, if the photo is inside the edges of the screen
+           * return the photo to line up with the edges, otherwise use decay
+           * with a clamping at the edges to give the effect the image is
+           * sliding along using velocity and friction
+           */
+          translateX.value =
+            scale.value < 1
+              ? withTiming(0)
+              : translateX.value > halfScreenWidth * (scale.value - 1)
+              ? withTiming(halfScreenWidth * (scale.value - 1), {
+                  duration: 200,
+                })
+              : translateX.value < -halfScreenWidth * (scale.value - 1)
+              ? withTiming(-halfScreenWidth * (scale.value - 1), {
+                  duration: 200,
+                })
+              : withDecay({
+                  clamp: [
+                    -halfScreenWidth * (scale.value - 1),
+                    halfScreenWidth * (scale.value - 1),
+                  ],
+                  deceleration: 0.99,
+                  velocity: -evt.velocityX,
+                });
 
-        /**
-         * If not swiping translate the image in X and Y to the event
-         * translation plus offset. If swiping only translate X, if
-         * swiping down when at top of screen or centered balance scale
-         * using offset to a degree (this needs improvement the calculation
-         * is incorrect but likely needs origin use to be 100%)
-         */
-        translateX.value =
-          scale.value !== offsetScale.value
-            ? offsetX.value * localEvtScale - event.translationX
-            : offsetX.value - event.translationX;
-        translateY.value =
-          isSwiping.value !== IsSwiping.TRUE
-            ? scale.value !== offsetScale.value
-              ? offsetY.value * localEvtScale + event.translationY
-              : offsetY.value + event.translationY
-            : translateY.value;
+          /**
+           * When the pan is finished if the height is less than the screen
+           * height return the photo to center, if the photo is inside the
+           * edges of the screen return the photo to line up with the edges,
+           * otherwise use decay with a clamping at the edges to give the effect
+           * the image is sliding along using velocity and friction
+           */
+          translateY.value =
+            currentImageHeight * scale.value < screenHeight
+              ? withTiming(0)
+              : translateY.value > (currentImageHeight / 2) * scale.value - halfScreenHeight
+              ? withTiming((currentImageHeight / 2) * scale.value - halfScreenHeight)
+              : translateY.value < (-currentImageHeight / 2) * scale.value + halfScreenHeight
+              ? withTiming((-currentImageHeight / 2) * scale.value + halfScreenHeight)
+              : withDecay({
+                  clamp: [
+                    (-currentImageHeight / 2) * scale.value + halfScreenHeight,
+                    (currentImageHeight / 2) * scale.value - halfScreenHeight,
+                  ],
+                  deceleration: 0.99,
+                  velocity: evt.velocityY,
+                });
 
-        /**
-         * If swiping down start scaling down the image for swipe
-         * away effect
-         */
-        scale.value =
-          currentImageHeight * offsetScale.value < screenHeight && translateY.value > 0
-            ? offsetScale.value * (1 - (1 / 3) * (translateY.value / screenHeight))
-            : currentImageHeight * offsetScale.value > screenHeight &&
-              translateY.value > (currentImageHeight / 2) * offsetScale.value - halfScreenHeight
-            ? offsetScale.value *
-              (1 -
-                (1 / 3) *
-                  ((translateY.value -
-                    ((currentImageHeight / 2) * offsetScale.value - halfScreenHeight)) /
-                    screenHeight))
-            : scale.value;
-
-        overlayOpacity.value = localEvtScale;
-      }
-    })
-    .onEnd((event) => {
-      if (!isPinch.value && event.numberOfPointers < 2) {
-        /**
-         * To determine if the fling should page to the next image we
-         * calculate a final position based on the current position and
-         * event velocity
-         */
-        const finalXPosition = event.translationX - event.velocityX * 0.3;
-        const finalYPosition = event.translationY + event.velocityY * 0.1;
+          resetTouchValues();
 
-        /**
-         * If there is a next photo, the image is lined up to the right
-         * edge, the swipe is to the left, and the final position is more
-         * than half the screen width, move to the next image
-         */
-        if (
-          index.value < photoLength - 1 &&
-          Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
-          translateX.value < 0 &&
-          finalXPosition < -halfScreenWidth &&
-          isSwiping.value === IsSwiping.TRUE
-        ) {
-          cancelAnimation(translationX);
-          translationX.value = withTiming(
-            -(screenWidth + MARGIN) * (index.value + 1),
-            {
-              duration: 200,
-              easing: Easing.out(Easing.ease),
-            },
-            () => {
-              resetMovementValues();
-              index.value = index.value + 1;
-              runOnJS(setSelectedIndex)(index.value);
-            },
-          );
+          /**
+           * If the scale has been reduced below one, i.e. zoomed out, translate
+           * the zoom back to one
+           */
+          scale.value =
+            scale.value !== offsetScale.value ? withTiming(offsetScale.value) : offsetScale.value;
 
           /**
-           * If there is a previous photo, the image is lined up to the left
-           * edge, the swipe is to the right, and the final position is more
-           * than half the screen width, move to the previous image
+           * If the photo is centered or at the top of the screen if scaled larger
+           * than the screen, and not paging left or right, and the final Y position
+           * is greater than half the screen using swipe velocity and position, close
+           * the overlay
            */
-        } else if (
-          index.value > 0 &&
-          Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
-          translateX.value > 0 &&
-          finalXPosition > halfScreenWidth &&
-          isSwiping.value === IsSwiping.TRUE
-        ) {
-          cancelAnimation(translationX);
-          translationX.value = withTiming(
-            -(screenWidth + MARGIN) * (index.value - 1),
-            {
+          if (
+            finalYPosition > halfScreenHeight &&
+            offsetY.value + 8 >= (currentImageHeight / 2) * scale.value - halfScreenHeight &&
+            isSwiping.value !== IsSwiping.TRUE &&
+            translateY.value !== 0 &&
+            !(
+              Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
+              translateX.value < 0 &&
+              finalXPosition < -halfScreenWidth
+            ) &&
+            !(
+              Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
+              translateX.value > 0 &&
+              finalXPosition > halfScreenWidth
+            )
+          ) {
+            cancelAnimation(translateX);
+            cancelAnimation(translateY);
+            cancelAnimation(scale);
+            overlayOpacity.value = withTiming(
+              0,
+              {
+                duration: 200,
+                easing: Easing.out(Easing.ease),
+              },
+              () => {
+                runOnJS(setOverlay)('none');
+              },
+            );
+            scale.value = withTiming(0.6, {
               duration: 200,
               easing: Easing.out(Easing.ease),
-            },
-            () => {
-              resetMovementValues();
-              index.value = index.value - 1;
-              runOnJS(setSelectedIndex)(index.value);
-            },
-          );
+            });
+            translateY.value =
+              evt.velocityY > 1000
+                ? withDecay({
+                    velocity: evt.velocityY,
+                  })
+                : withTiming(halfScreenHeight + (currentImageHeight / 2) * scale.value, {
+                    duration: 200,
+                    easing: Easing.out(Easing.ease),
+                  });
+            translateX.value = withDecay({
+              velocity: -evt.velocityX,
+            });
+          }
         }
-
-        /**
-         * When the pan is finished if the scale is less than 1 return the
-         * photo to center, if the photo is inside the edges of the screen
-         * return the photo to line up with the edges, otherwise use decay
-         * with a clamping at the edges to give the effect the image is
-         * sliding along using velocity and friction
-         */
-        translateX.value =
-          scale.value < 1
-            ? withTiming(0)
-            : translateX.value > halfScreenWidth * (scale.value - 1)
-            ? withTiming(halfScreenWidth * (scale.value - 1), {
-                duration: 200,
-              })
-            : translateX.value < -halfScreenWidth * (scale.value - 1)
-            ? withTiming(-halfScreenWidth * (scale.value - 1), {
-                duration: 200,
-              })
-            : withDecay({
-                clamp: [-halfScreenWidth * (scale.value - 1), halfScreenWidth * (scale.value - 1)],
-                deceleration: 0.99,
-                velocity: -event.velocityX,
-              });
-
-        /**
-         * When the pan is finished if the height is less than the screen
-         * height return the photo to center, if the photo is inside the
-         * edges of the screen return the photo to line up with the edges,
-         * otherwise use decay with a clamping at the edges to give the effect
-         * the image is sliding along using velocity and friction
-         */
-        translateY.value =
-          currentImageHeight * scale.value < screenHeight
-            ? withTiming(0)
-            : translateY.value > (currentImageHeight / 2) * scale.value - halfScreenHeight
-            ? withTiming((currentImageHeight / 2) * scale.value - halfScreenHeight)
-            : translateY.value < (-currentImageHeight / 2) * scale.value + halfScreenHeight
-            ? withTiming((-currentImageHeight / 2) * scale.value + halfScreenHeight)
-            : withDecay({
-                clamp: [
-                  (-currentImageHeight / 2) * scale.value + halfScreenHeight,
-                  (currentImageHeight / 2) * scale.value - halfScreenHeight,
-                ],
-                deceleration: 0.99,
-                velocity: event.velocityY,
-              });
-
-        resetTouchValues();
-
-        /**
-         * If the scale has been reduced below one, i.e. zoomed out, translate
-         * the zoom back to one
-         */
-        scale.value =
-          scale.value !== offsetScale.value ? withTiming(offsetScale.value) : offsetScale.value;
-
-        /**
-         * If the photo is centered or at the top of the screen if scaled larger
-         * than the screen, and not paging left or right, and the final Y position
-         * is greater than half the screen using swipe velocity and position, close
-         * the overlay
-         */
-        if (
-          finalYPosition > halfScreenHeight &&
-          offsetY.value + 8 >= (currentImageHeight / 2) * scale.value - halfScreenHeight &&
-          isSwiping.value !== IsSwiping.TRUE &&
-          translateY.value !== 0 &&
-          !(
-            Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
-            translateX.value < 0 &&
-            finalXPosition < -halfScreenWidth
-          ) &&
-          !(
-            Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 &&
-            translateX.value > 0 &&
-            finalXPosition > halfScreenWidth
-          )
-        ) {
+      },
+      onStart: () => {
+        if (!isPinch.value) {
+          /**
+           * Cancel any previous motion animation on translations when a touch
+           * begins to interrupt the animation and take over the position handling
+           */
           cancelAnimation(translateX);
           cancelAnimation(translateY);
           cancelAnimation(scale);
-
-          overlayOpacity.value = withTiming(
-            0,
-            {
-              duration: 200,
-              easing: Easing.out(Easing.ease),
-            },
-            () => {
-              runOnJS(setSelectedMessage)(undefined);
-              runOnJS(setMessages)([]);
-              runOnJS(setOverlay)('none');
-            },
-          );
-          scale.value = withTiming(0.6, {
-            duration: 200,
-            easing: Easing.out(Easing.ease),
-          });
-          translateY.value =
-            event.velocityY > 1000
-              ? withDecay({
-                  velocity: event.velocityY,
-                })
-              : withTiming(halfScreenHeight + (currentImageHeight / 2) * scale.value, {
-                  duration: 200,
-                  easing: Easing.out(Easing.ease),
-                });
-          translateX.value = withDecay({
-            velocity: -event.velocityX,
-          });
+          offsetX.value = translateX.value;
+          offsetY.value = translateY.value;
         }
-      }
-    })
-    .simultaneousWithExternalGesture(pinchRef)
-    .withRef(panRef);
+
+        /**
+         * Reset hasPinched for Android single finger offset
+         */
+        hasPinched.value = HasPinched.FALSE;
+      },
+    },
+    [currentImageHeight, photoLength],
+  );
 
   /**
    * On pinch is run when two or more fingers touch the screen, it then takes over
    * all touch handling even if the number of fingers is reduced to one until the
    * touch is complete
    */
-  const pinch = Gesture.Pinch()
-    .onStart((event) => {
-      /**
-       * Android starts with a zero event with 1 touch instead of two
-       * we therefore must wait to capture starting info until the double
-       * touch begins
-       */
-      if (!isAndroid) {
+  const onPinch = useAnimatedGestureHandler<PinchGestureHandlerGestureEvent>(
+    {
+      onActive: (evt) => {
         /**
-         * Cancel any previous motion animation on translations when a touch
-         * begins to interrupt the animation and take over the position handling
+         * Android starts with a zero event with 1 touch instead of two
+         * we therefore must wait to capture starting info until the double
+         * touch begins
          */
-        cancelAnimation(translateX);
-        cancelAnimation(translateY);
-        cancelAnimation(scale);
+        if (!isPinch.value && isAndroid) {
+          /**
+           * Set hasPinched to true so when removing one finger the pan active
+           * state adjusts the offset
+           */
+          hasPinched.value = HasPinched.TRUE;
 
-        /**
-         * Set pinch to true to stop all pan gesture interactions
-         */
-        isPinch.value = true;
+          /**
+           * Cancel any previous motion animation on translations when a touch
+           * begins to interrupt the animation and take over the position handling
+           */
+          cancelAnimation(translateX);
+          cancelAnimation(translateY);
+          cancelAnimation(scale);
+
+          /**
+           * Reset isSwiping as now the pan gesture handler is no longer running
+           */
+          isSwiping.value = IsSwiping.UNDETERMINED;
+
+          /**
+           * Set initial values for pinch gesture interaction handler
+           */
+          numberOfPinchFingers.value = evt.numberOfPointers;
+          offsetX.value = translateX.value;
+          offsetY.value = translateY.value;
+          adjustedFocalX.value = evt.focalX - (halfScreenWidth - offsetX.value);
+          adjustedFocalY.value = evt.focalY - (halfScreenHeight + offsetY.value);
+          originX.value = adjustedFocalX.value;
+          originY.value = adjustedFocalY.value;
+          offsetScale.value = scale.value;
+        }
 
         /**
-         * Reset isSwiping as now the pan gesture handler is no longer running
+         * Set pinch to true to stop all pan gesture interactions, we do this
+         * again here for Android outside the check that creates type
          */
-        isSwiping.value = IsSwiping.UNDETERMINED;
+        isPinch.value = true;
 
         /**
-         * Set initial values for pinch gesture interaction handler
+         * The scale is clamped to a minimum of 1 and maximum of 8 for aesthetics.
+         * We use the clamped value to determine a local event scale so the focal
+         * point does not become out of sync with the actual photo scaling, e.g.
+         * evt.scale is 20 but scale is 8, using evt.scale for offset will put the
+         * photo and calculations out of sync
          */
-        numberOfPinchFingers.value = event.numberOfPointers;
-        offsetX.value = translateX.value;
-        offsetY.value = translateY.value;
-        adjustedFocalX.value = event.focalX - (halfScreenWidth - offsetX.value);
-        adjustedFocalY.value = event.focalY - (halfScreenHeight + offsetY.value);
-        originX.value = adjustedFocalX.value;
-        originY.value = adjustedFocalY.value;
-        offsetScale.value = scale.value;
-      }
+        scale.value = clamp(offsetScale.value * evt.scale, 1, 8);
+        const localEvtScale = scale.value / offsetScale.value;
 
-      /**
-       * Reset hasPinched for Android single finger offset
-       */
-      hasPinched.value = HasPinched.FALSE;
-    })
-    .onChange((event) => {
-      /**
-       * Android starts with a zero event with 1 touch instead of two
-       * we therefore must wait to capture starting info until the double
-       * touch begins
-       */
-      if (!isPinch.value && isAndroid) {
         /**
-         * Set hasPinched to true so when removing one finger the pan active
-         * state adjusts the offset
+         * When we hit the top or bottom of the scale clamping we run a haptic
+         * trigger, we track if it has been run to not spam the trigger
          */
-        hasPinched.value = HasPinched.TRUE;
+        if (scale.value !== 8 && scale.value !== 1) {
+          hasHitTopScale.value = 0;
+          hasHitBottomScale.value = 0;
+        } else if (scale.value === 8 && hasHitTopScale.value === 0) {
+          hasHitTopScale.value = 1;
+          runOnJS(triggerHaptic)('impactLight');
+        } else if (scale.value === 1 && hasHitBottomScale.value === 0) {
+          hasHitBottomScale.value = 1;
+          runOnJS(triggerHaptic)('impactLight');
+        }
 
         /**
-         * Cancel any previous motion animation on translations when a touch
-         * begins to interrupt the animation and take over the position handling
+         * We calculate the adjusted focal point on the photo using the events
+         * focal position on the screen, screen size, and current photo offset
          */
-        cancelAnimation(translateX);
-        cancelAnimation(translateY);
-        cancelAnimation(scale);
+        adjustedFocalX.value = evt.focalX - (halfScreenWidth - offsetX.value);
+        adjustedFocalY.value = evt.focalY - (halfScreenHeight + offsetY.value);
 
         /**
-         * Reset isSwiping as now the pan gesture handler is no longer running
+         * If the number of fingers on the screen changes, the position of the
+         * focal point will change and this needs to be accounted for, e.g. if
+         * two fingers are on the screen the focal is between them, but if one is
+         * then removed the focal is now at the remaining fingers touch position.
+         * If this happens without accounting for the change the image will jump
+         * around, we keep track of the previous two finger focal to adjust for this
+         * change in a reduction from two fingers to one, then if another finger
+         * is added again we adjust the origin to account for the difference between
+         * the original two finger touch and the new two finger touch position.
          */
-        isSwiping.value = IsSwiping.UNDETERMINED;
+        if (numberOfPinchFingers.value !== evt.numberOfPointers) {
+          numberOfPinchFingers.value = evt.numberOfPointers;
+          if (evt.numberOfPointers === 1) {
+            focalOffsetX.value = oldFocalX.value - adjustedFocalX.value;
+            focalOffsetY.value = oldFocalY.value - adjustedFocalY.value;
+          } else if (numberOfPinchFingers.value > 1) {
+            originX.value =
+              originX.value -
+              (oldFocalX.value / localEvtScale - adjustedFocalX.value / localEvtScale);
+            originY.value =
+              originY.value -
+              (oldFocalY.value / localEvtScale - adjustedFocalY.value / localEvtScale);
+          }
+        }
 
         /**
-         * Set initial values for pinch gesture interaction handler
+         * If pinch handler has been activated via two fingers then the fingers
+         * reduced to one we keep track of the old focal using the focal offset
+         * from when the number of fingers was two. We then translate the photo
+         * taking into account the offset, focal, focal offset, origin, and scale.
          */
-        numberOfPinchFingers.value = event.numberOfPointers;
-        offsetX.value = translateX.value;
-        offsetY.value = translateY.value;
-        adjustedFocalX.value = event.focalX - (halfScreenWidth - offsetX.value);
-        adjustedFocalY.value = event.focalY - (halfScreenHeight + offsetY.value);
-        originX.value = adjustedFocalX.value;
-        originY.value = adjustedFocalY.value;
-        offsetScale.value = scale.value;
-      }
+        if (numberOfPinchFingers.value === 1) {
+          oldFocalX.value = adjustedFocalX.value + focalOffsetX.value;
+          oldFocalY.value = adjustedFocalY.value + focalOffsetY.value;
+          translateX.value = offsetX.value - oldFocalX.value + localEvtScale * originX.value;
+          translateY.value = offsetY.value + oldFocalY.value - localEvtScale * originY.value;
 
-      /**
-       * Set pinch to true to stop all pan gesture interactions, we do this
-       * again here for Android outside the check that creates type
-       */
-      isPinch.value = true;
-
-      /**
-       * The scale is clamped to a minimum of 1 and maximum of 8 for aesthetics.
-       * We use the clamped value to determine a local event scale so the focal
-       * point does not become out of sync with the actual photo scaling, e.g.
-       * evt.scale is 20 but scale is 8, using evt.scale for offset will put the
-       * photo and calculations out of sync
-       */
-      scale.value = clamp(offsetScale.value * event.scale, 1, 8);
-      const localEvtScale = scale.value / offsetScale.value;
-
-      /**
-       * When we hit the top or bottom of the scale clamping we run a haptic
-       * trigger, we track if it has been run to not spam the trigger
-       */
-      if (scale.value !== 8 && scale.value !== 1) {
-        hasHitTopScale.value = 0;
-        hasHitBottomScale.value = 0;
-      } else if (scale.value === 8 && hasHitTopScale.value === 0) {
-        hasHitTopScale.value = 1;
-        runOnJS(triggerHaptic)('impactLight');
-      } else if (scale.value === 1 && hasHitBottomScale.value === 0) {
-        hasHitBottomScale.value = 1;
-        runOnJS(triggerHaptic)('impactLight');
-      }
-
-      /**
-       * We calculate the adjusted focal point on the photo using the events
-       * focal position on the screen, screen size, and current photo offset
-       */
-      adjustedFocalX.value = event.focalX - (halfScreenWidth - offsetX.value);
-      adjustedFocalY.value = event.focalY - (halfScreenHeight + offsetY.value);
-
-      /**
-       * If the number of fingers on the screen changes, the position of the
-       * focal point will change and this needs to be accounted for, e.g. if
-       * two fingers are on the screen the focal is between them, but if one is
-       * then removed the focal is now at the remaining fingers touch position.
-       * If this happens without accounting for the change the image will jump
-       * around, we keep track of the previous two finger focal to adjust for this
-       * change in a reduction from two fingers to one, then if another finger
-       * is added again we adjust the origin to account for the difference between
-       * the original two finger touch and the new two finger touch position.
-       */
-      if (numberOfPinchFingers.value !== event.numberOfPointers) {
-        numberOfPinchFingers.value = event.numberOfPointers;
-        if (event.numberOfPointers === 1) {
-          focalOffsetX.value = oldFocalX.value - adjustedFocalX.value;
-          focalOffsetY.value = oldFocalY.value - adjustedFocalY.value;
+          /**
+           * If the number of fingers in the gesture is greater than one the
+           * adjusted focal point is saved as the old focal and the photo is
+           * translated taking into account the offset, focal, origin, and scale.
+           */
         } else if (numberOfPinchFingers.value > 1) {
-          originX.value =
-            originX.value -
-            (oldFocalX.value / localEvtScale - adjustedFocalX.value / localEvtScale);
-          originY.value =
-            originY.value -
-            (oldFocalY.value / localEvtScale - adjustedFocalY.value / localEvtScale);
+          oldFocalX.value = adjustedFocalX.value;
+          oldFocalY.value = adjustedFocalY.value;
+          translateX.value = offsetX.value - adjustedFocalX.value + localEvtScale * originX.value;
+          translateY.value = offsetY.value + adjustedFocalY.value - localEvtScale * originY.value;
         }
-      }
+      },
+      onFinish: () => {
+        if (isPinch.value) {
+          /**
+           * When the pinch is finished if the scale is less than 1 return the
+           * photo to center, if the photo is inside the edges of the screen
+           * return the photo to line up with the edges, otherwise leave the
+           * photo in its current position
+           */
+          translateX.value =
+            scale.value < 1
+              ? withTiming(0)
+              : translateX.value > halfScreenWidth * (scale.value - 1)
+              ? withTiming(halfScreenWidth * (scale.value - 1))
+              : translateX.value < -halfScreenWidth * (scale.value - 1)
+              ? withTiming(-halfScreenWidth * (scale.value - 1))
+              : translateX.value;
 
-      /**
-       * If pinch handler has been activated via two fingers then the fingers
-       * reduced to one we keep track of the old focal using the focal offset
-       * from when the number of fingers was two. We then translate the photo
-       * taking into account the offset, focal, focal offset, origin, and scale.
-       */
-      if (numberOfPinchFingers.value === 1) {
-        oldFocalX.value = adjustedFocalX.value + focalOffsetX.value;
-        oldFocalY.value = adjustedFocalY.value + focalOffsetY.value;
-        translateX.value = offsetX.value - oldFocalX.value + localEvtScale * originX.value;
-        translateY.value = offsetY.value + oldFocalY.value - localEvtScale * originY.value;
+          /**
+           * When the pinch is finished if the height is less than the screen
+           * height return the photo to center, if the photo is inside the
+           * edges of the screen return the photo to line up with the edges,
+           * otherwise leave the photo in its current position
+           */
+          translateY.value =
+            currentImageHeight * scale.value < screenHeight
+              ? withTiming(0)
+              : translateY.value > (currentImageHeight / 2) * scale.value - screenHeight / 2
+              ? withTiming((currentImageHeight / 2) * scale.value - screenHeight / 2)
+              : translateY.value < (-currentImageHeight / 2) * scale.value + screenHeight / 2
+              ? withTiming((-currentImageHeight / 2) * scale.value + screenHeight / 2)
+              : translateY.value;
 
+          /**
+           * If the scale has been reduced below one, i.e. zoomed out, translate
+           * the zoom back to one
+           */
+          offsetScale.value = scale.value < 1 ? 1 : scale.value;
+          scale.value = scale.value < 1 ? withTiming(1) : scale.value;
+          resetTouchValues();
+        }
+      },
+      onStart: (evt) => {
         /**
-         * If the number of fingers in the gesture is greater than one the
-         * adjusted focal point is saved as the old focal and the photo is
-         * translated taking into account the offset, focal, origin, and scale.
-         */
-      } else if (numberOfPinchFingers.value > 1) {
-        oldFocalX.value = adjustedFocalX.value;
-        oldFocalY.value = adjustedFocalY.value;
-        translateX.value = offsetX.value - adjustedFocalX.value + localEvtScale * originX.value;
-        translateY.value = offsetY.value + adjustedFocalY.value - localEvtScale * originY.value;
-      }
-    })
-    .onEnd(() => {
-      if (isPinch.value) {
-        /**
-         * When the pinch is finished if the scale is less than 1 return the
-         * photo to center, if the photo is inside the edges of the screen
-         * return the photo to line up with the edges, otherwise leave the
-         * photo in its current position
+         * Android starts with a zero event with 1 touch instead of two
+         * we therefore must wait to capture starting info until the double
+         * touch begins
          */
-        translateX.value =
-          scale.value < 1
-            ? withTiming(0)
-            : translateX.value > halfScreenWidth * (scale.value - 1)
-            ? withTiming(halfScreenWidth * (scale.value - 1))
-            : translateX.value < -halfScreenWidth * (scale.value - 1)
-            ? withTiming(-halfScreenWidth * (scale.value - 1))
-            : translateX.value;
+        if (!isAndroid) {
+          /**
+           * Cancel any previous motion animation on translations when a touch
+           * begins to interrupt the animation and take over the position handling
+           */
+          cancelAnimation(translateX);
+          cancelAnimation(translateY);
+          cancelAnimation(scale);
 
-        /**
-         * When the pinch is finished if the height is less than the screen
-         * height return the photo to center, if the photo is inside the
-         * edges of the screen return the photo to line up with the edges,
-         * otherwise leave the photo in its current position
-         */
-        translateY.value =
-          currentImageHeight * scale.value < screenHeight
-            ? withTiming(0)
-            : translateY.value > (currentImageHeight / 2) * scale.value - screenHeight / 2
-            ? withTiming((currentImageHeight / 2) * scale.value - screenHeight / 2)
-            : translateY.value < (-currentImageHeight / 2) * scale.value + screenHeight / 2
-            ? withTiming((-currentImageHeight / 2) * scale.value + screenHeight / 2)
-            : translateY.value;
+          /**
+           * Set pinch to true to stop all pan gesture interactions
+           */
+          isPinch.value = true;
+
+          /**
+           * Reset isSwiping as now the pan gesture handler is no longer running
+           */
+          isSwiping.value = IsSwiping.UNDETERMINED;
+
+          /**
+           * Set initial values for pinch gesture interaction handler
+           */
+          numberOfPinchFingers.value = evt.numberOfPointers;
+          offsetX.value = translateX.value;
+          offsetY.value = translateY.value;
+          adjustedFocalX.value = evt.focalX - (halfScreenWidth - offsetX.value);
+          adjustedFocalY.value = evt.focalY - (halfScreenHeight + offsetY.value);
+          originX.value = adjustedFocalX.value;
+          originY.value = adjustedFocalY.value;
+          offsetScale.value = scale.value;
+        }
 
         /**
-         * If the scale has been reduced below one, i.e. zoomed out, translate
-         * the zoom back to one
+         * Reset hasPinched for Android single finger offset
          */
-        offsetScale.value = scale.value < 1 ? 1 : scale.value;
-        scale.value = scale.value < 1 ? withTiming(1) : scale.value;
-        resetTouchValues();
-      }
-    })
-    .withRef(pinchRef)
-    .simultaneousWithExternalGesture(panRef);
+        hasPinched.value = HasPinched.FALSE;
+      },
+    },
+    [currentImageHeight],
+  );
 
   /**
    * Single tap handler for header hiding and showing
    */
-  const singleTap = Gesture.Tap()
-    .minPointers(1)
-    .numberOfTaps(1)
-    .onEnd(() => {
+  const onSingleTap = useAnimatedGestureHandler<TapGestureHandlerGestureEvent>({
+    onActive: () => {
       cancelAnimation(headerFooterVisible);
       headerFooterVisible.value = headerFooterVisible.value > 0 ? withTiming(0) : withTiming(1);
-    })
-    .requireExternalGestureToFail(panRef, pinchRef, doubleTapRef)
-    .withRef(singleTapRef);
+    },
+  });
 
   /**
    * Double tap handler to zoom back out and hide header and footer
    */
-  const doubleTap = Gesture.Tap()
-    .maxDeltaX(8)
-    .maxDeltaY(8)
-    .maxDistance(8)
-    .minPointers(1)
-    .numberOfTaps(2)
-    .onStart((event) => {
-      tapX.value = event.absoluteX;
-      tapY.value = event.absoluteY;
-    })
-    .onEnd((event) => {
-      if (
-        Math.abs(tapX.value - event.absoluteX) < 64 &&
-        Math.abs(tapY.value - event.absoluteY) < 64
-      ) {
+  const onDoubleTap = useAnimatedGestureHandler<TapGestureHandlerGestureEvent>({
+    onActive: (evt) => {
+      if (Math.abs(tapX.value - evt.absoluteX) < 64 && Math.abs(tapY.value - evt.absoluteY) < 64) {
         if (offsetScale.value === 1 && offsetX.value === 0 && offsetY.value === 0) {
           offsetScale.value = 2;
           scale.value = withTiming(2, {
             duration: 200,
             easing: Easing.out(Easing.ease),
           });
-          translateX.value = withTiming(event.absoluteX - halfScreenWidth, {
+          translateX.value = withTiming(evt.absoluteX - halfScreenWidth, {
             duration: 200,
             easing: Easing.out(Easing.ease),
           });
           if (currentImageHeight * 2 > screenHeight) {
             const translateYTopBottom =
-              event.absoluteY > halfScreenHeight
+              evt.absoluteY > halfScreenHeight
                 ? -(currentImageHeight * 2 - screenHeight) / 2
                 : (currentImageHeight * 2 - screenHeight) / 2;
             translateY.value = withTiming(translateYTopBottom, {
@@ -733,14 +714,18 @@ export const useImageGalleryGestures = ({
           }
         }
       }
-    })
-    .withRef(doubleTapRef);
+    },
+    onStart: (evt) => {
+      tapX.value = evt.absoluteX;
+      tapY.value = evt.absoluteY;
+    },
+  });
 
   return {
-    doubleTap,
-    pan,
-    pinch,
-    singleTap,
+    onDoubleTap,
+    onPan,
+    onPinch,
+    onSingleTap,
   };
 };