stream-chat-react-native-core 5.44.2 → 6.0.0-beta.1

package/lib/commonjs/components/ImageGallery/hooks/useAnimatedGalleryStyle.js

@@ -0,0 +1,54 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAnimatedGalleryStyle = void 0;
+var _reactNativeReanimated = require("react-native-reanimated");
+var _useViewport2 = require("../../../hooks/useViewport");
+var oneEighth = 1 / 8;
+var useAnimatedGalleryStyle = function useAnimatedGalleryStyle(_ref) {
+  var index = _ref.index,
+    offsetScale = _ref.offsetScale,
+    previous = _ref.previous,
+    scale = _ref.scale,
+    screenHeight = _ref.screenHeight,
+    selected = _ref.selected,
+    translateX = _ref.translateX,
+    translateY = _ref.translateY;
+  var _useViewport = (0, _useViewport2.useViewport)(),
+    vw = _useViewport.vw;
+  var screenWidth = vw(100);
+  var halfScreenWidth = vw(50);
+  var animatedGalleryStyle = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
+    var xScaleOffset = -7 * screenWidth * (0.5 + index);
+    var yScaleOffset = -screenHeight * 3.5;
+    return {
+      transform: [{
+        translateX: selected ? translateX.value + xScaleOffset : scale.value < 1 || scale.value !== offsetScale.value ? xScaleOffset : previous ? translateX.value - halfScreenWidth * (scale.value - 1) + xScaleOffset : translateX.value + halfScreenWidth * (scale.value - 1) + xScaleOffset
+      }, {
+        translateY: selected ? translateY.value + yScaleOffset : yScaleOffset
+      }, {
+        scale: selected ? scale.value / 8 : oneEighth
+      }, {
+        scaleX: -1
+      }]
+    };
+  }, [previous, selected]);
+  var animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
+    var xScaleOffset = -7 * screenWidth * (0.5 + index);
+    var yScaleOffset = -screenHeight * 3.5;
+    return {
+      transform: [{
+        scaleX: -1
+      }, {
+        translateY: yScaleOffset
+      }, {
+        translateX: -xScaleOffset
+      }, {
+        scale: oneEighth
+      }]
+    };
+  }, [index]);
+  return [animatedGalleryStyle, animatedStyles];
+};
+exports.useAnimatedGalleryStyle = useAnimatedGalleryStyle;
+//# sourceMappingURL=useAnimatedGalleryStyle.js.map

package/lib/commonjs/components/ImageGallery/hooks/useAnimatedGalleryStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNativeReanimated","require","_useViewport2","oneEighth","useAnimatedGalleryStyle","_ref","index","offsetScale","previous","scale","screenHeight","selected","translateX","translateY","_useViewport","useViewport","vw","screenWidth","halfScreenWidth","animatedGalleryStyle","useAnimatedStyle","xScaleOffset","yScaleOffset","transform","value","scaleX","animatedStyles","exports"],"sourceRoot":"../../../../../src","sources":["components/ImageGallery/hooks/useAnimatedGalleryStyle.tsx"],"mappings":";;;;AACA,IAAAA,sBAAA,GAAAC,OAAA;AAEA,IAAAC,aAAA,GAAAD,OAAA;AAaA,IAAME,SAAS,GAAG,CAAC,GAAG,CAAC;AAEhB,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,IAAA,EASvB;EAAA,IARXC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,WAAW,GAAAF,IAAA,CAAXE,WAAW;IACXC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,YAAY,GAAAL,IAAA,CAAZK,YAAY;IACZC,QAAQ,GAAAN,IAAA,CAARM,QAAQ;IACRC,UAAU,GAAAP,IAAA,CAAVO,UAAU;IACVC,UAAU,GAAAR,IAAA,CAAVQ,UAAU;EAEV,IAAAC,YAAA,GAAe,IAAAC,yBAAW,EAAC,CAAC;IAApBC,EAAE,GAAAF,YAAA,CAAFE,EAAE;EAEV,IAAMC,WAAW,GAAGD,EAAE,CAAC,GAAG,CAAC;EAC3B,IAAME,eAAe,GAAGF,EAAE,CAAC,EAAE,CAAC;EAU9B,IAAMG,oBAAoB,GAAG,IAAAC,uCAAgB,EAAa,YAAM;IAC9D,IAAMC,YAAY,GAAG,CAAC,CAAC,GAAGJ,WAAW,IAAI,GAAG,GAAGX,KAAK,CAAC;IACrD,IAAMgB,YAAY,GAAG,CAACZ,YAAY,GAAG,GAAG;IACxC,OAAO;MACLa,SAAS,EAAE,CACT;QACEX,UAAU,EAAED,QAAQ,GAChBC,UAAU,CAACY,KAAK,GAAGH,YAAY,GAC/BZ,KAAK,CAACe,KAAK,GAAG,CAAC,IAAIf,KAAK,CAACe,KAAK,KAAKjB,WAAW,CAACiB,KAAK,GACpDH,YAAY,GACZb,QAAQ,GACRI,UAAU,CAACY,KAAK,GAAGN,eAAe,IAAIT,KAAK,CAACe,KAAK,GAAG,CAAC,CAAC,GAAGH,YAAY,GACrET,UAAU,CAACY,KAAK,GAAGN,eAAe,IAAIT,KAAK,CAACe,KAAK,GAAG,CAAC,CAAC,GAAGH;MAC/D,CAAC,EACD;QACER,UAAU,EAAEF,QAAQ,GAAGE,UAAU,CAACW,KAAK,GAAGF,YAAY,GAAGA;MAC3D,CAAC,EACD;QACEb,KAAK,EAAEE,QAAQ,GAAGF,KAAK,CAACe,KAAK,GAAG,CAAC,GAAGrB;MACtC,CAAC,EACD;QAAEsB,MAAM,EAAE,CAAC;MAAE,CAAC;IAElB,CAAC;EACH,CAAC,EAAE,CAACjB,QAAQ,EAAEG,QAAQ,CAAC,CAAC;EAExB,IAAMe,cAAc,GAAG,IAAAN,uCAAgB,EAAC,YAAM;IAC5C,IAAMC,YAAY,GAAG,CAAC,CAAC,GAAGJ,WAAW,IAAI,GAAG,GAAGX,KAAK,CAAC;IACrD,IAAMgB,YAAY,GAAG,CAACZ,YAAY,GAAG,GAAG;IACxC,OAAO;MACLa,SAAS,EAAE,CACT;QAAEE,MAAM,EAAE,CAAC;MAAE,CAAC,EACd;QAAEZ,UAAU,EAAES;MAAa,CAAC,EAC5B;QACEV,UAAU,EAAE,CAACS;MACf,CAAC,EACD;QAAEZ,KAAK,EAAEN;MAAU,CAAC;IAExB,CAAC;EACH,CAAC,EAAE,CAACG,KAAK,CAAC,CAAC;EAEX,OAAO,CAACa,oBAAoB,EAAEO,cAAc,CAAC;AAC/C,CAAC;AAACC,OAAA,CAAAvB,uBAAA,GAAAA,uBAAA","ignoreList":[]}

package/lib/commonjs/components/ImageGallery/hooks/useImageGalleryGestures.js

@@ -1,9 +1,14 @@
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useImageGalleryGestures = exports.clamp = exports.IsSwiping = exports.HasPinched = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 var _reactNative = require("react-native");
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
 var _reactNativeReanimated = require("react-native-reanimated");
+var _ImageGalleryContext = require("../../../contexts/imageGalleryContext/ImageGalleryContext");
 var _OverlayContext = require("../../../contexts/overlayContext/OverlayContext");
 var _native = require("../../../native");
 var HasPinched = function (HasPinched) {
@@ -36,7 +41,19 @@ var useImageGalleryGestures = function useImageGalleryGestures(_ref) {
     translateX = _ref.translateX,
     translateY = _ref.translateY,
     translationX = _ref.translationX;
+  var _useState = (0, _react.useState)(selectedIndex),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    index = _useState2[0],
+    setIndex = _useState2[1];
+  var _useImageGalleryConte = (0, _ImageGalleryContext.useImageGalleryContext)(),
+    setMessages = _useImageGalleryConte.setMessages,
+    setSelectedMessage = _useImageGalleryConte.setSelectedMessage;
+  var doubleTapRef = (0, _react.useRef)(undefined);
+  var panRef = (0, _react.useRef)(undefined);
+  var pinchRef = (0, _react.useRef)(undefined);
+  var singleTapRef = (0, _react.useRef)(undefined);
   var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
+    overlay = _useOverlayContext.overlay,
     setOverlay = _useOverlayContext.setOverlay;
   var isAndroid = _reactNative.Platform.OS === 'android';
   var hasHitBottomScale = (0, _reactNativeReanimated.useSharedValue)(1);
@@ -47,10 +64,9 @@ var useImageGalleryGestures = function useImageGalleryGestures(_ref) {
   var oldFocalY = (0, _reactNativeReanimated.useSharedValue)(0);
   var focalX = (0, _reactNativeReanimated.useSharedValue)(0);
   var focalY = (0, _reactNativeReanimated.useSharedValue)(0);
-  var index = (0, _reactNativeReanimated.useSharedValue)(0);
-  if (index.value !== selectedIndex) {
-    index.value = selectedIndex;
-  }
+  (0, _react.useEffect)(function () {
+    setIndex(selectedIndex);
+  }, [selectedIndex]);
   var offsetX = (0, _reactNativeReanimated.useSharedValue)(0);
   var offsetY = (0, _reactNativeReanimated.useSharedValue)(0);
   var focalOffsetX = (0, _reactNativeReanimated.useSharedValue)(0);
@@ -86,250 +102,239 @@ var useImageGalleryGestures = function useImageGalleryGestures(_ref) {
     scale.value = 1;
     offsetScale.value = 1;
   };
-  var onPan = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function onActive(evt) {
-      if (evt.numberOfPointers === 1 && !isPinch.value) {
-        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;
+  var pan = _reactNativeGestureHandler.Gesture.Pan().enabled(overlay === 'gallery').maxPointers(isAndroid ? 0 : 1).minDistance(10).onStart(function () {
+    if (!isPinch.value) {
+      (0, _reactNativeReanimated.cancelAnimation)(translateX);
+      (0, _reactNativeReanimated.cancelAnimation)(translateY);
+      (0, _reactNativeReanimated.cancelAnimation)(scale);
+      offsetX.value = translateX.value;
+      offsetY.value = translateY.value;
+    }
+    hasPinched.value = HasPinched.FALSE;
+  }).onChange(function (event) {
+    if (event.numberOfPointers === 1 && !isPinch.value) {
+      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;
+      }
+      if (isSwiping.value === IsSwiping.UNDETERMINED) {
+        var maxXYRatio = isAndroid ? 1 : 0.25;
+        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)) {
+          isSwiping.value = IsSwiping.TRUE;
         }
-        if (isSwiping.value === IsSwiping.UNDETERMINED) {
-          var 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;
-          }
+        if (Math.abs(event.translationY) > 25) {
+          isSwiping.value = IsSwiping.FALSE;
         }
-        var localEvtScale = scale.value / offsetScale.value;
-        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;
-        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: function onFinish(evt) {
-      if (!isPinch.value && evt.numberOfPointers < 2) {
-        var finalXPosition = evt.translationX - evt.velocityX * 0.3;
-        var finalYPosition = evt.translationY + evt.velocityY * 0.1;
-        if (index.value < photoLength - 1 && Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value < 0 && finalXPosition < -halfScreenWidth && isSwiping.value === IsSwiping.TRUE) {
-          (0, _reactNativeReanimated.cancelAnimation)(translationX);
-          translationX.value = (0, _reactNativeReanimated.withTiming)(-(screenWidth + MARGIN) * (index.value + 1), {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          }, function () {
-            resetMovementValues();
-            index.value = index.value + 1;
-            (0, _reactNativeReanimated.runOnJS)(setSelectedIndex)(index.value);
-          });
-        } else if (index.value > 0 && Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value > 0 && finalXPosition > halfScreenWidth && isSwiping.value === IsSwiping.TRUE) {
-          (0, _reactNativeReanimated.cancelAnimation)(translationX);
-          translationX.value = (0, _reactNativeReanimated.withTiming)(-(screenWidth + MARGIN) * (index.value - 1), {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          }, function () {
-            resetMovementValues();
-            index.value = index.value - 1;
-            (0, _reactNativeReanimated.runOnJS)(setSelectedIndex)(index.value);
-          });
-        }
-        translateX.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(0) : translateX.value > halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(halfScreenWidth * (scale.value - 1), {
-          duration: 200
-        }) : translateX.value < -halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(-halfScreenWidth * (scale.value - 1), {
-          duration: 200
-        }) : (0, _reactNativeReanimated.withDecay)({
-          clamp: [-halfScreenWidth * (scale.value - 1), halfScreenWidth * (scale.value - 1)],
-          deceleration: 0.99,
-          velocity: -evt.velocityX
+      var localEvtScale = scale.value / offsetScale.value;
+      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;
+      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(function (event) {
+    if (!isPinch.value && event.numberOfPointers < 2) {
+      var finalXPosition = event.translationX - event.velocityX * 0.3;
+      var finalYPosition = event.translationY + event.velocityY * 0.1;
+      if (index < photoLength - 1 && Math.abs(halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value < 0 && finalXPosition < -halfScreenWidth && isSwiping.value === IsSwiping.TRUE) {
+        (0, _reactNativeReanimated.cancelAnimation)(translationX);
+        translationX.value = (0, _reactNativeReanimated.withTiming)(-(screenWidth + MARGIN) * (index + 1), {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        }, function () {
+          resetMovementValues();
+          (0, _reactNativeReanimated.runOnJS)(setIndex)(index + 1);
+          (0, _reactNativeReanimated.runOnJS)(setSelectedIndex)(index + 1);
         });
-        translateY.value = currentImageHeight * scale.value < screenHeight ? (0, _reactNativeReanimated.withTiming)(0) : translateY.value > currentImageHeight / 2 * scale.value - halfScreenHeight ? (0, _reactNativeReanimated.withTiming)(currentImageHeight / 2 * scale.value - halfScreenHeight) : translateY.value < -currentImageHeight / 2 * scale.value + halfScreenHeight ? (0, _reactNativeReanimated.withTiming)(-currentImageHeight / 2 * scale.value + halfScreenHeight) : (0, _reactNativeReanimated.withDecay)({
-          clamp: [-currentImageHeight / 2 * scale.value + halfScreenHeight, currentImageHeight / 2 * scale.value - halfScreenHeight],
-          deceleration: 0.99,
-          velocity: evt.velocityY
+      } else if (index > 0 && Math.abs(-halfScreenWidth * (scale.value - 1) + offsetX.value) < 3 && translateX.value > 0 && finalXPosition > halfScreenWidth && isSwiping.value === IsSwiping.TRUE) {
+        (0, _reactNativeReanimated.cancelAnimation)(translationX);
+        translationX.value = (0, _reactNativeReanimated.withTiming)(-(screenWidth + MARGIN) * (index - 1), {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        }, function () {
+          resetMovementValues();
+          (0, _reactNativeReanimated.runOnJS)(setIndex)(index - 1);
+          (0, _reactNativeReanimated.runOnJS)(setSelectedIndex)(index - 1);
         });
-        resetTouchValues();
-        scale.value = scale.value !== offsetScale.value ? (0, _reactNativeReanimated.withTiming)(offsetScale.value) : offsetScale.value;
-        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)) {
-          (0, _reactNativeReanimated.cancelAnimation)(translateX);
-          (0, _reactNativeReanimated.cancelAnimation)(translateY);
-          (0, _reactNativeReanimated.cancelAnimation)(scale);
-          overlayOpacity.value = (0, _reactNativeReanimated.withTiming)(0, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          }, function () {
-            (0, _reactNativeReanimated.runOnJS)(setOverlay)('none');
-          });
-          scale.value = (0, _reactNativeReanimated.withTiming)(0.6, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateY.value = evt.velocityY > 1000 ? (0, _reactNativeReanimated.withDecay)({
-            velocity: evt.velocityY
-          }) : (0, _reactNativeReanimated.withTiming)(halfScreenHeight + currentImageHeight / 2 * scale.value, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateX.value = (0, _reactNativeReanimated.withDecay)({
-            velocity: -evt.velocityX
-          });
-        }
       }
-    },
-    onStart: function onStart() {
-      if (!isPinch.value) {
+      translateX.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(0) : translateX.value > halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(halfScreenWidth * (scale.value - 1), {
+        duration: 200
+      }) : translateX.value < -halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(-halfScreenWidth * (scale.value - 1), {
+        duration: 200
+      }) : (0, _reactNativeReanimated.withDecay)({
+        clamp: [-halfScreenWidth * (scale.value - 1), halfScreenWidth * (scale.value - 1)],
+        deceleration: 0.99,
+        velocity: -event.velocityX
+      });
+      translateY.value = currentImageHeight * scale.value < screenHeight ? (0, _reactNativeReanimated.withTiming)(0) : translateY.value > currentImageHeight / 2 * scale.value - halfScreenHeight ? (0, _reactNativeReanimated.withTiming)(currentImageHeight / 2 * scale.value - halfScreenHeight) : translateY.value < -currentImageHeight / 2 * scale.value + halfScreenHeight ? (0, _reactNativeReanimated.withTiming)(-currentImageHeight / 2 * scale.value + halfScreenHeight) : (0, _reactNativeReanimated.withDecay)({
+        clamp: [-currentImageHeight / 2 * scale.value + halfScreenHeight, currentImageHeight / 2 * scale.value - halfScreenHeight],
+        deceleration: 0.99,
+        velocity: event.velocityY
+      });
+      resetTouchValues();
+      scale.value = scale.value !== offsetScale.value ? (0, _reactNativeReanimated.withTiming)(offsetScale.value) : offsetScale.value;
+      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)) {
         (0, _reactNativeReanimated.cancelAnimation)(translateX);
         (0, _reactNativeReanimated.cancelAnimation)(translateY);
         (0, _reactNativeReanimated.cancelAnimation)(scale);
-        offsetX.value = translateX.value;
-        offsetY.value = translateY.value;
+        overlayOpacity.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        }, function () {
+          (0, _reactNativeReanimated.runOnJS)(setSelectedMessage)(undefined);
+          (0, _reactNativeReanimated.runOnJS)(setMessages)([]);
+          (0, _reactNativeReanimated.runOnJS)(setOverlay)('none');
+        });
+        scale.value = (0, _reactNativeReanimated.withTiming)(0.6, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        });
+        translateY.value = event.velocityY > 1000 ? (0, _reactNativeReanimated.withDecay)({
+          velocity: event.velocityY
+        }) : (0, _reactNativeReanimated.withTiming)(halfScreenHeight + currentImageHeight / 2 * scale.value, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        });
+        translateX.value = (0, _reactNativeReanimated.withDecay)({
+          velocity: -event.velocityX
+        });
       }
-      hasPinched.value = HasPinched.FALSE;
     }
-  }, [currentImageHeight, photoLength]);
-  var onPinch = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function onActive(evt) {
-      if (!isPinch.value && isAndroid) {
-        hasPinched.value = HasPinched.TRUE;
-        (0, _reactNativeReanimated.cancelAnimation)(translateX);
-        (0, _reactNativeReanimated.cancelAnimation)(translateY);
-        (0, _reactNativeReanimated.cancelAnimation)(scale);
-        isSwiping.value = IsSwiping.UNDETERMINED;
-        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;
-      }
+  }).simultaneousWithExternalGesture(pinchRef).withRef(panRef);
+  var pinch = _reactNativeGestureHandler.Gesture.Pinch().onStart(function (event) {
+    if (!isAndroid) {
+      (0, _reactNativeReanimated.cancelAnimation)(translateX);
+      (0, _reactNativeReanimated.cancelAnimation)(translateY);
+      (0, _reactNativeReanimated.cancelAnimation)(scale);
       isPinch.value = true;
-      scale.value = clamp(offsetScale.value * evt.scale, 1, 8);
-      var localEvtScale = scale.value / offsetScale.value;
-      if (scale.value !== 8 && scale.value !== 1) {
-        hasHitTopScale.value = 0;
-        hasHitBottomScale.value = 0;
-      } else if (scale.value === 8 && hasHitTopScale.value === 0) {
-        hasHitTopScale.value = 1;
-        (0, _reactNativeReanimated.runOnJS)(_native.triggerHaptic)('impactLight');
-      } else if (scale.value === 1 && hasHitBottomScale.value === 0) {
-        hasHitBottomScale.value = 1;
-        (0, _reactNativeReanimated.runOnJS)(_native.triggerHaptic)('impactLight');
-      }
-      adjustedFocalX.value = evt.focalX - (halfScreenWidth - offsetX.value);
-      adjustedFocalY.value = evt.focalY - (halfScreenHeight + offsetY.value);
-      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);
-        }
-      }
-      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;
+      isSwiping.value = IsSwiping.UNDETERMINED;
+      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;
+    }
+    hasPinched.value = HasPinched.FALSE;
+  }).onChange(function (event) {
+    if (!isPinch.value && isAndroid) {
+      hasPinched.value = HasPinched.TRUE;
+      (0, _reactNativeReanimated.cancelAnimation)(translateX);
+      (0, _reactNativeReanimated.cancelAnimation)(translateY);
+      (0, _reactNativeReanimated.cancelAnimation)(scale);
+      isSwiping.value = IsSwiping.UNDETERMINED;
+      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;
+    }
+    isPinch.value = true;
+    scale.value = clamp(offsetScale.value * event.scale, 1, 8);
+    var localEvtScale = scale.value / offsetScale.value;
+    if (scale.value !== 8 && scale.value !== 1) {
+      hasHitTopScale.value = 0;
+      hasHitBottomScale.value = 0;
+    } else if (scale.value === 8 && hasHitTopScale.value === 0) {
+      hasHitTopScale.value = 1;
+      (0, _reactNativeReanimated.runOnJS)(_native.triggerHaptic)('impactLight');
+    } else if (scale.value === 1 && hasHitBottomScale.value === 0) {
+      hasHitBottomScale.value = 1;
+      (0, _reactNativeReanimated.runOnJS)(_native.triggerHaptic)('impactLight');
+    }
+    adjustedFocalX.value = event.focalX - (halfScreenWidth - offsetX.value);
+    adjustedFocalY.value = event.focalY - (halfScreenHeight + offsetY.value);
+    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;
       } 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;
-      }
-    },
-    onFinish: function onFinish() {
-      if (isPinch.value) {
-        translateX.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(0) : translateX.value > halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(halfScreenWidth * (scale.value - 1)) : translateX.value < -halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(-halfScreenWidth * (scale.value - 1)) : translateX.value;
-        translateY.value = currentImageHeight * scale.value < screenHeight ? (0, _reactNativeReanimated.withTiming)(0) : translateY.value > currentImageHeight / 2 * scale.value - screenHeight / 2 ? (0, _reactNativeReanimated.withTiming)(currentImageHeight / 2 * scale.value - screenHeight / 2) : translateY.value < -currentImageHeight / 2 * scale.value + screenHeight / 2 ? (0, _reactNativeReanimated.withTiming)(-currentImageHeight / 2 * scale.value + screenHeight / 2) : translateY.value;
-        offsetScale.value = scale.value < 1 ? 1 : scale.value;
-        scale.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(1) : scale.value;
-        resetTouchValues();
+        originX.value = originX.value - (oldFocalX.value / localEvtScale - adjustedFocalX.value / localEvtScale);
+        originY.value = originY.value - (oldFocalY.value / localEvtScale - adjustedFocalY.value / localEvtScale);
       }
-    },
-    onStart: function onStart(evt) {
-      if (!isAndroid) {
-        (0, _reactNativeReanimated.cancelAnimation)(translateX);
-        (0, _reactNativeReanimated.cancelAnimation)(translateY);
-        (0, _reactNativeReanimated.cancelAnimation)(scale);
-        isPinch.value = true;
-        isSwiping.value = IsSwiping.UNDETERMINED;
-        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;
-      }
-      hasPinched.value = HasPinched.FALSE;
     }
-  }, [currentImageHeight]);
-  var onSingleTap = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function onActive() {
-      (0, _reactNativeReanimated.cancelAnimation)(headerFooterVisible);
-      headerFooterVisible.value = headerFooterVisible.value > 0 ? (0, _reactNativeReanimated.withTiming)(0) : (0, _reactNativeReanimated.withTiming)(1);
+    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;
+    } 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;
     }
-  });
-  var onDoubleTap = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
-    onActive: function 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 = (0, _reactNativeReanimated.withTiming)(2, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateX.value = (0, _reactNativeReanimated.withTiming)(evt.absoluteX - halfScreenWidth, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          if (currentImageHeight * 2 > screenHeight) {
-            var translateYTopBottom = evt.absoluteY > halfScreenHeight ? -(currentImageHeight * 2 - screenHeight) / 2 : (currentImageHeight * 2 - screenHeight) / 2;
-            translateY.value = (0, _reactNativeReanimated.withTiming)(translateYTopBottom, {
-              duration: 200,
-              easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-            });
-          }
-        } else {
-          offsetScale.value = 1;
-          scale.value = (0, _reactNativeReanimated.withTiming)(1, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          offsetX.value = 0;
-          offsetY.value = 0;
-          translateX.value = (0, _reactNativeReanimated.withTiming)(0, {
-            duration: 200,
-            easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
-          });
-          translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
+  }).onEnd(function () {
+    if (isPinch.value) {
+      translateX.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(0) : translateX.value > halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(halfScreenWidth * (scale.value - 1)) : translateX.value < -halfScreenWidth * (scale.value - 1) ? (0, _reactNativeReanimated.withTiming)(-halfScreenWidth * (scale.value - 1)) : translateX.value;
+      translateY.value = currentImageHeight * scale.value < screenHeight ? (0, _reactNativeReanimated.withTiming)(0) : translateY.value > currentImageHeight / 2 * scale.value - screenHeight / 2 ? (0, _reactNativeReanimated.withTiming)(currentImageHeight / 2 * scale.value - screenHeight / 2) : translateY.value < -currentImageHeight / 2 * scale.value + screenHeight / 2 ? (0, _reactNativeReanimated.withTiming)(-currentImageHeight / 2 * scale.value + screenHeight / 2) : translateY.value;
+      offsetScale.value = scale.value < 1 ? 1 : scale.value;
+      scale.value = scale.value < 1 ? (0, _reactNativeReanimated.withTiming)(1) : scale.value;
+      resetTouchValues();
+    }
+  }).withRef(pinchRef).simultaneousWithExternalGesture(panRef);
+  var singleTap = _reactNativeGestureHandler.Gesture.Tap().minPointers(1).numberOfTaps(1).onEnd(function () {
+    (0, _reactNativeReanimated.cancelAnimation)(headerFooterVisible);
+    headerFooterVisible.value = headerFooterVisible.value > 0 ? (0, _reactNativeReanimated.withTiming)(0) : (0, _reactNativeReanimated.withTiming)(1);
+  }).requireExternalGestureToFail(panRef, pinchRef, doubleTapRef).withRef(singleTapRef);
+  var doubleTap = _reactNativeGestureHandler.Gesture.Tap().maxDeltaX(8).maxDeltaY(8).maxDistance(8).minPointers(1).numberOfTaps(2).onStart(function (event) {
+    tapX.value = event.absoluteX;
+    tapY.value = event.absoluteY;
+  }).onEnd(function (event) {
+    if (Math.abs(tapX.value - event.absoluteX) < 64 && Math.abs(tapY.value - event.absoluteY) < 64) {
+      if (offsetScale.value === 1 && offsetX.value === 0 && offsetY.value === 0) {
+        offsetScale.value = 2;
+        scale.value = (0, _reactNativeReanimated.withTiming)(2, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        });
+        translateX.value = (0, _reactNativeReanimated.withTiming)(event.absoluteX - halfScreenWidth, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        });
+        if (currentImageHeight * 2 > screenHeight) {
+          var translateYTopBottom = event.absoluteY > halfScreenHeight ? -(currentImageHeight * 2 - screenHeight) / 2 : (currentImageHeight * 2 - screenHeight) / 2;
+          translateY.value = (0, _reactNativeReanimated.withTiming)(translateYTopBottom, {
             duration: 200,
             easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
           });
-          if (headerFooterVisible.value !== 0) {
-            (0, _reactNativeReanimated.cancelAnimation)(headerFooterVisible);
-            headerFooterVisible.value = (0, _reactNativeReanimated.withTiming)(0);
-          }
+        }
+      } else {
+        offsetScale.value = 1;
+        scale.value = (0, _reactNativeReanimated.withTiming)(1, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        });
+        offsetX.value = 0;
+        offsetY.value = 0;
+        translateX.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        });
+        translateY.value = (0, _reactNativeReanimated.withTiming)(0, {
+          duration: 200,
+          easing: _reactNativeReanimated.Easing.out(_reactNativeReanimated.Easing.ease)
+        });
+        if (headerFooterVisible.value !== 0) {
+          (0, _reactNativeReanimated.cancelAnimation)(headerFooterVisible);
+          headerFooterVisible.value = (0, _reactNativeReanimated.withTiming)(0);
         }
       }
-    },
-    onStart: function onStart(evt) {
-      tapX.value = evt.absoluteX;
-      tapY.value = evt.absoluteY;
     }
-  });
+  }).withRef(doubleTapRef);
   return {
-    onDoubleTap: onDoubleTap,
-    onPan: onPan,
-    onPinch: onPinch,
-    onSingleTap: onSingleTap
+    doubleTap: doubleTap,
+    pan: pan,
+    pinch: pinch,
+    singleTap: singleTap
   };
 };
 exports.useImageGalleryGestures = useImageGalleryGestures;