stream-chat-react-native-core 4.6.0 → 4.7.0-beta.1

package/lib/module/components/ImageGallery/components/ImageGrid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageGrid.tsx"],"names":["styles","StyleSheet","create","avatarImage","borderRadius","height","width","avatarImageWrapper","borderWidth","margin","contentContainer","flexGrow","image","GridImage","item","theme","white","colors","imageGallery","grid","gridAvatar","gridAvatarWrapper","gridImage","avatarComponent","imageComponent","restItem","numberOfImageGalleryGridColumns","selectAndClose","uri","user","size","backgroundColor","renderItem","ImageGrid","props","closeGridView","photos","setImage","imageGridItems","map","photo","messageId","url","index","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { ImageBackground, StyleSheet } from 'react-native';\n\nimport { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { vw } from '../../../utils/utils';\nimport { Avatar } from '../../Avatar/Avatar';\n\nimport type { Photo } from '../ImageGallery';\n\nconst styles = StyleSheet.create({\n  avatarImage: {\n    borderRadius: 22,\n    height: 22,\n    width: 22,\n  },\n  avatarImageWrapper: {\n    borderRadius: 24,\n    borderWidth: 1,\n    height: 24,\n    margin: 8,\n    width: 24,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  image: {\n    margin: 1,\n  },\n});\n\nexport type ImageGalleryGridImageComponent<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n  item,\n}: {\n  item: Photo<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n}) => React.ReactElement | null;\n\nexport type ImageGalleryGridImageComponents<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n  imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n};\n\nexport type GridImageItem<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Photo<StreamChatGenerics> &\n  ImageGalleryGridImageComponents<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n\nconst GridImage = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => {\n  const {\n    theme: {\n      colors: { white },\n      imageGallery: {\n        grid: { gridAvatar, gridAvatarWrapper, gridImage },\n      },\n    },\n  } = useTheme();\n  const { avatarComponent, imageComponent, ...restItem } = item;\n\n  const { numberOfImageGalleryGridColumns, selectAndClose, uri, user } = restItem;\n\n  const size = vw(100) / (numberOfImageGalleryGridColumns || 3) - 2;\n\n  if (imageComponent) {\n    return imageComponent({ item: restItem });\n  }\n\n  return (\n    <TouchableOpacity onPress={selectAndClose}>\n      <ImageBackground\n        source={{ uri }}\n        style={[styles.image, { height: size, width: size }, gridImage]}\n      >\n        {avatarComponent\n          ? avatarComponent({ item: restItem })\n          : !!user?.image && (\n              <Avatar\n                containerStyle={[\n                  styles.avatarImageWrapper,\n                  { backgroundColor: white },\n                  gridAvatarWrapper,\n                ]}\n                image={user.image}\n                imageStyle={gridAvatar}\n                size={22}\n              />\n            )}\n      </ImageBackground>\n    </TouchableOpacity>\n  );\n};\n\nconst renderItem = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => <GridImage item={item} />;\n\ntype Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =\n  ImageGalleryGridImageComponents<StreamChatGenerics> & {\n    closeGridView: () => void;\n    photos: Photo<StreamChatGenerics>[];\n    setImage: React.Dispatch<\n      React.SetStateAction<\n        | {\n            messageId?: string | undefined;\n            url?: string | undefined;\n          }\n        | undefined\n      >\n    >;\n    numberOfImageGalleryGridColumns?: number;\n  };\n\nexport const ImageGrid = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: Props<StreamChatGenerics>,\n) => {\n  const {\n    avatarComponent,\n    closeGridView,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    photos,\n    setImage,\n  } = props;\n\n  const {\n    theme: {\n      colors: { white },\n      imageGallery: {\n        grid: { contentContainer },\n      },\n    },\n  } = useTheme();\n\n  const imageGridItems = photos.map((photo) => ({\n    ...photo,\n    avatarComponent,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    selectAndClose: () => {\n      setImage({ messageId: photo.messageId, url: photo.uri });\n      closeGridView();\n    },\n  }));\n\n  return (\n    <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>\n      contentContainerStyle={[\n        styles.contentContainer,\n        { backgroundColor: white },\n        contentContainer,\n      ]}\n      data={imageGridItems as GridImageItem<StreamChatGenerics>[]}\n      keyExtractor={(item, index) => `${item.uri}-${index}`}\n      numColumns={numberOfImageGalleryGridColumns || 3}\n      renderItem={renderItem}\n    />\n  );\n};\n\nImageGrid.displayName = 'ImageGrid{imageGallery{grid}}';\n"]}
+{"version":3,"sources":["ImageGrid.tsx"],"names":["styles","StyleSheet","create","avatarImage","borderRadius","height","width","avatarImageWrapper","borderWidth","margin","contentContainer","flexGrow","image","GridImage","item","gridImage","theme","imageGallery","grid","imageComponent","restItem","numberOfImageGalleryGridColumns","selectAndClose","type","uri","size","renderItem","ImageGrid","props","avatarComponent","closeGridView","photos","setImage","white","colors","imageGridItems","map","photo","messageId","url","backgroundColor","index","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image, StyleSheet, View } from 'react-native';\n\nimport { BottomSheetFlatList, TouchableOpacity } from '@gorhom/bottom-sheet';\n\nimport { VideoThumbnail } from '../../../components/Attachment/VideoThumbnail';\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\nimport type { DefaultStreamChatGenerics } from '../../../types/types';\nimport { vw } from '../../../utils/utils';\n\nimport type { Photo } from '../ImageGallery';\n\nconst styles = StyleSheet.create({\n  avatarImage: {\n    borderRadius: 22,\n    height: 22,\n    width: 22,\n  },\n  avatarImageWrapper: {\n    borderRadius: 24,\n    borderWidth: 1,\n    height: 24,\n    margin: 8,\n    width: 24,\n  },\n  contentContainer: {\n    flexGrow: 1,\n  },\n  image: {\n    margin: 1,\n  },\n});\n\nexport type ImageGalleryGridImageComponent<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = ({\n  item,\n}: {\n  item: Photo<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n}) => React.ReactElement | null;\n\nexport type ImageGalleryGridImageComponents<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = {\n  avatarComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n  imageComponent?: ImageGalleryGridImageComponent<StreamChatGenerics>;\n};\n\nexport type GridImageItem<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Photo<StreamChatGenerics> &\n  ImageGalleryGridImageComponents<StreamChatGenerics> & {\n    selectAndClose: () => void;\n    numberOfImageGalleryGridColumns?: number;\n  };\n\nconst GridImage = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => {\n  const {\n    theme: {\n      imageGallery: {\n        grid: { gridImage },\n      },\n    },\n  } = useTheme();\n  const { imageComponent, ...restItem } = item;\n\n  const { numberOfImageGalleryGridColumns, selectAndClose, type, uri } = restItem;\n\n  const size = vw(100) / (numberOfImageGalleryGridColumns || 3) - 2;\n\n  if (imageComponent) {\n    return imageComponent({ item: restItem });\n  }\n\n  return (\n    <TouchableOpacity onPress={selectAndClose}>\n      {type === 'video' ? (\n        <View style={[styles.image, { height: size, width: size }, gridImage]}>\n          <VideoThumbnail />\n        </View>\n      ) : (\n        <Image source={{ uri }} style={[styles.image, { height: size, width: size }]} />\n      )}\n    </TouchableOpacity>\n  );\n};\n\nconst renderItem = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>({\n  item,\n}: {\n  item: GridImageItem<StreamChatGenerics>;\n}) => <GridImage item={item} />;\n\ntype Props<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =\n  ImageGalleryGridImageComponents<StreamChatGenerics> & {\n    closeGridView: () => void;\n    photos: Photo<StreamChatGenerics>[];\n    setImage: React.Dispatch<\n      React.SetStateAction<\n        | {\n            messageId?: string | undefined;\n            url?: string | undefined;\n          }\n        | undefined\n      >\n    >;\n    numberOfImageGalleryGridColumns?: number;\n  };\n\nexport const ImageGrid = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: Props<StreamChatGenerics>,\n) => {\n  const {\n    avatarComponent,\n    closeGridView,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    photos,\n    setImage,\n  } = props;\n\n  const {\n    theme: {\n      colors: { white },\n      imageGallery: {\n        grid: { contentContainer },\n      },\n    },\n  } = useTheme();\n\n  const imageGridItems = photos.map((photo) => ({\n    ...photo,\n    avatarComponent,\n    imageComponent,\n    numberOfImageGalleryGridColumns,\n    selectAndClose: () => {\n      setImage({ messageId: photo.messageId, url: photo.uri });\n      closeGridView();\n    },\n  }));\n\n  return (\n    <BottomSheetFlatList<GridImageItem<StreamChatGenerics>>\n      contentContainerStyle={[\n        styles.contentContainer,\n        { backgroundColor: white },\n        contentContainer,\n      ]}\n      data={imageGridItems as GridImageItem<StreamChatGenerics>[]}\n      keyExtractor={(item, index) => `${item.uri}-${index}`}\n      numColumns={numberOfImageGalleryGridColumns || 3}\n      renderItem={renderItem}\n    />\n  );\n};\n\nImageGrid.displayName = 'ImageGrid{imageGallery{grid}}';\n"]}

package/lib/module/components/ImageGallery/components/ProgressControl.js

@@ -0,0 +1,153 @@
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressControl = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeGestureHandler = require("react-native-gesture-handler");
+
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+
+var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
+
+var _this = this,
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ImageGallery/components/ProgressControl.tsx";
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var width = 180;
+var height = 2;
+
+var styles = _reactNative.StyleSheet.create({
+  containerStyle: {
+    borderRadius: 50,
+    height: height,
+    width: width
+  },
+  innerStyle: {
+    height: height
+  },
+  progressControlThumbStyle: {
+    backgroundColor: '#fff',
+    borderRadius: 5,
+    height: 20,
+    top: -11,
+    width: 4
+  }
+});
+
+var ProgressControlThumb = function ProgressControlThumb() {
+  return _react["default"].createElement(_reactNative.View, {
+    style: styles.progressControlThumbStyle,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 41,
+      columnNumber: 36
+    }
+  });
+};
+
+var ProgressControl = _react["default"].memo(function (props) {
+  var duration = props.duration,
+      onPlayPause = props.onPlayPause,
+      onProgressDrag = props.onProgressDrag,
+      progress = props.progress;
+
+  var _useTheme = (0, _ThemeContext.useTheme)(),
+      _useTheme$theme$color = _useTheme.theme.colors,
+      grey_dark = _useTheme$theme$color.grey_dark,
+      white_snow = _useTheme$theme$color.white_snow;
+
+  var state = (0, _reactNativeReanimated.useSharedValue)(0);
+  var translateX = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(function () {
+    state.value = progress * width;
+    translateX.value = progress * width;
+  }, [progress]);
+  var animatedStyles = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
+    return {
+      backgroundColor: white_snow,
+      width: state.value
+    };
+  });
+  var thumbStyles = (0, _reactNativeReanimated.useAnimatedStyle)(function () {
+    return {
+      transform: [{
+        translateX: state.value
+      }]
+    };
+  });
+  var onGestureEvent = (0, _reactNativeReanimated.useAnimatedGestureHandler)({
+    onActive: function onActive(event) {
+      state.value = translateX.value + event.translationX;
+      if (state.value > width) state.value = width;else if (state.value < 0) state.value = 0;
+    },
+    onFinish: function onFinish() {
+      translateX.value = state.value;
+      var dragFinishLocationInSeconds = state.value / width * duration;
+      (0, _reactNativeReanimated.runOnJS)(onProgressDrag)(dragFinishLocationInSeconds);
+      (0, _reactNativeReanimated.runOnJS)(onPlayPause)();
+    },
+    onStart: function onStart() {
+      (0, _reactNativeReanimated.runOnJS)(onPlayPause)();
+      (0, _reactNativeReanimated.cancelAnimation)(translateX);
+      state.value = translateX.value;
+    }
+  }, [duration]);
+  return _react["default"].createElement(_reactNative.View, {
+    style: [styles.containerStyle, {
+      backgroundColor: grey_dark
+    }],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 91,
+      columnNumber: 7
+    }
+  }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
+    style: [styles.innerStyle, animatedStyles],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 92,
+      columnNumber: 9
+    }
+  }), _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
+    maxPointers: 1,
+    onGestureEvent: onGestureEvent,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 94,
+      columnNumber: 9
+    }
+  }, _react["default"].createElement(_reactNativeReanimated["default"].View, {
+    style: [thumbStyles],
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 95,
+      columnNumber: 11
+    }
+  }, _react["default"].createElement(ProgressControlThumb, {
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 96,
+      columnNumber: 13
+    }
+  }))));
+}, function (prevProps, nextProps) {
+  if (prevProps.duration === nextProps.duration && prevProps.progress === nextProps.progress) return true;else return false;
+});
+
+exports.ProgressControl = ProgressControl;
+//# sourceMappingURL=ProgressControl.js.map

package/lib/module/components/ImageGallery/components/ProgressControl.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ProgressControl.tsx"],"names":["width","height","styles","StyleSheet","create","containerStyle","borderRadius","innerStyle","progressControlThumbStyle","backgroundColor","top","ProgressControlThumb","ProgressControl","React","memo","props","duration","onPlayPause","onProgressDrag","progress","theme","colors","grey_dark","white_snow","state","translateX","value","animatedStyles","thumbStyles","transform","onGestureEvent","onActive","event","translationX","onFinish","dragFinishLocationInSeconds","onStart","prevProps","nextProps"],"mappings":"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","sourcesContent":["import React, { useEffect } from 'react';\nimport { StyleSheet, View } from 'react-native';\nimport { PanGestureHandler } from 'react-native-gesture-handler';\nimport Animated, {\n  cancelAnimation,\n  runOnJS,\n  useAnimatedGestureHandler,\n  useAnimatedStyle,\n  useSharedValue,\n} from 'react-native-reanimated';\n\nimport type { ImageGalleryFooterVideoControlProps } from './ImageGalleryFooter';\n\nimport { useTheme } from '../../../contexts/themeContext/ThemeContext';\n\ntype ProgressControlProps = Pick<\n  ImageGalleryFooterVideoControlProps,\n  'duration' | 'onPlayPause' | 'onProgressDrag' | 'progress'\n>;\n\nconst width = 180;\nconst height = 2;\nconst styles = StyleSheet.create({\n  containerStyle: {\n    borderRadius: 50,\n    height,\n    width,\n  },\n  innerStyle: {\n    height,\n  },\n  progressControlThumbStyle: {\n    backgroundColor: '#fff',\n    borderRadius: 5,\n    height: 20,\n    top: -11,\n    width: 4,\n  },\n});\n\nconst ProgressControlThumb = () => <View style={styles.progressControlThumbStyle} />;\n\nexport const ProgressControl: React.FC<ProgressControlProps> = React.memo(\n  (props) => {\n    const { duration, onPlayPause, onProgressDrag, progress } = props;\n    const {\n      theme: {\n        colors: { grey_dark, white_snow },\n      },\n    } = useTheme();\n\n    const state = useSharedValue(0);\n    const translateX = useSharedValue(0);\n\n    useEffect(() => {\n      state.value = progress * width;\n      translateX.value = progress * width;\n    }, [progress]);\n\n    const animatedStyles = useAnimatedStyle(() => ({\n      backgroundColor: white_snow,\n      width: state.value,\n    }));\n\n    const thumbStyles = useAnimatedStyle(() => ({\n      transform: [{ translateX: state.value }],\n    }));\n\n    const onGestureEvent = useAnimatedGestureHandler(\n      {\n        onActive: (event) => {\n          state.value = translateX.value + event.translationX;\n          if (state.value > width) state.value = width;\n          else if (state.value < 0) state.value = 0;\n        },\n        onFinish: () => {\n          translateX.value = state.value;\n          const dragFinishLocationInSeconds = (state.value / width) * duration;\n          runOnJS(onProgressDrag)(dragFinishLocationInSeconds);\n          runOnJS(onPlayPause)();\n        },\n        onStart: () => {\n          runOnJS(onPlayPause)();\n          cancelAnimation(translateX);\n          state.value = translateX.value;\n        },\n      },\n      [duration],\n    );\n    return (\n      <View style={[styles.containerStyle, { backgroundColor: grey_dark }]}>\n        <Animated.View style={[styles.innerStyle, animatedStyles]} />\n\n        <PanGestureHandler maxPointers={1} onGestureEvent={onGestureEvent}>\n          <Animated.View style={[thumbStyles]}>\n            <ProgressControlThumb />\n          </Animated.View>\n        </PanGestureHandler>\n      </View>\n    );\n  },\n  (prevProps, nextProps) => {\n    if (prevProps.duration === nextProps.duration && prevProps.progress === nextProps.progress)\n      return true;\n    else return false;\n  },\n);\n"]}

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

@@ -0,0 +1,373 @@
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useImageGalleryGestures = exports.clamp = exports.IsSwiping = exports.HasPinched = void 0;
+
+var _reactNative = require("react-native");
+
+var _reactNativeReanimated = require("react-native-reanimated");
+
+var _OverlayContext = require("../../../contexts/overlayContext/OverlayContext");
+
+var _native = require("../../../native");
+
+var HasPinched;
+exports.HasPinched = HasPinched;
+
+(function (HasPinched) {
+  HasPinched[HasPinched["FALSE"] = 0] = "FALSE";
+  HasPinched[HasPinched["TRUE"] = 1] = "TRUE";
+})(HasPinched || (exports.HasPinched = HasPinched = {}));
+
+var IsSwiping;
+exports.IsSwiping = IsSwiping;
+
+(function (IsSwiping) {
+  IsSwiping[IsSwiping["UNDETERMINED"] = 0] = "UNDETERMINED";
+  IsSwiping[IsSwiping["TRUE"] = 1] = "TRUE";
+  IsSwiping[IsSwiping["FALSE"] = 2] = "FALSE";
+})(IsSwiping || (exports.IsSwiping = IsSwiping = {}));
+
+var MARGIN = 32;
+
+var useImageGalleryGestures = function useImageGalleryGestures(_ref) {
+  var currentImageHeight = _ref.currentImageHeight,
+      halfScreenHeight = _ref.halfScreenHeight,
+      halfScreenWidth = _ref.halfScreenWidth,
+      headerFooterVisible = _ref.headerFooterVisible,
+      offsetScale = _ref.offsetScale,
+      overlayOpacity = _ref.overlayOpacity,
+      photoLength = _ref.photoLength,
+      scale = _ref.scale,
+      screenHeight = _ref.screenHeight,
+      screenWidth = _ref.screenWidth,
+      setSelectedIndex = _ref.setSelectedIndex,
+      translateX = _ref.translateX,
+      translateY = _ref.translateY,
+      translationX = _ref.translationX;
+
+  var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
+      setOverlay = _useOverlayContext.setOverlay;
+
+  var isAndroid = _reactNative.Platform.OS === 'android';
+  var hasHitBottomScale = (0, _reactNativeReanimated.useSharedValue)(1);
+  var hasHitTopScale = (0, _reactNativeReanimated.useSharedValue)(0);
+  var originX = (0, _reactNativeReanimated.useSharedValue)(0);
+  var originY = (0, _reactNativeReanimated.useSharedValue)(0);
+  var oldFocalX = (0, _reactNativeReanimated.useSharedValue)(0);
+  var oldFocalY = (0, _reactNativeReanimated.useSharedValue)(0);
+  var focalX = (0, _reactNativeReanimated.useSharedValue)(0);
+  var focalY = (0, _reactNativeReanimated.useSharedValue)(0);
+  var index = (0, _reactNativeReanimated.useSharedValue)(0);
+  var offsetX = (0, _reactNativeReanimated.useSharedValue)(0);
+  var offsetY = (0, _reactNativeReanimated.useSharedValue)(0);
+  var focalOffsetX = (0, _reactNativeReanimated.useSharedValue)(0);
+  var focalOffsetY = (0, _reactNativeReanimated.useSharedValue)(0);
+  var adjustedFocalX = (0, _reactNativeReanimated.useSharedValue)(0);
+  var adjustedFocalY = (0, _reactNativeReanimated.useSharedValue)(0);
+  var tapX = (0, _reactNativeReanimated.useSharedValue)(0);
+  var tapY = (0, _reactNativeReanimated.useSharedValue)(0);
+  var numberOfPinchFingers = (0, _reactNativeReanimated.useSharedValue)(0);
+  var isSwiping = (0, _reactNativeReanimated.useSharedValue)(0);
+  var isPinch = (0, _reactNativeReanimated.useSharedValue)(false);
+  var hasPinched = (0, _reactNativeReanimated.useSharedValue)(0);
+
+  var resetTouchValues = function resetTouchValues() {
+    'worklet';
+
+    focalX.value = 0;
+    focalY.value = 0;
+    oldFocalX.value = 0;
+    oldFocalY.value = 0;
+    originX.value = 0;
+    originY.value = 0;
+    focalOffsetX.value = 0;
+    focalOffsetY.value = 0;
+    numberOfPinchFingers.value = 0;
+    isPinch.value = false;
+    isSwiping.value = IsSwiping.UNDETERMINED;
+  };
+
+  var resetMovementValues = function resetMovementValues() {
+    'worklet';
+
+    translateX.value = 0;
+    translateY.value = 0;
+    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;
+        }
+
+        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;
+          }
+        }
+
+        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
+        });
+        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
+        });
+        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) {
+        (0, _reactNativeReanimated.cancelAnimation)(translateX);
+        (0, _reactNativeReanimated.cancelAnimation)(translateY);
+        (0, _reactNativeReanimated.cancelAnimation)(scale);
+        offsetX.value = translateX.value;
+        offsetY.value = translateY.value;
+      }
+
+      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;
+      }
+
+      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;
+      } 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();
+      }
+    },
+    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);
+    }
+  });
+  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, {
+            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;
+    }
+  });
+  return {
+    onDoubleTap: onDoubleTap,
+    onPan: onPan,
+    onPinch: onPinch,
+    onSingleTap: onSingleTap
+  };
+};
+
+exports.useImageGalleryGestures = useImageGalleryGestures;
+
+var clamp = function clamp(value, lowerBound, upperBound) {
+  'worklet';
+
+  return Math.min(Math.max(lowerBound, value), upperBound);
+};
+
+exports.clamp = clamp;
+//# sourceMappingURL=useImageGalleryGestures.js.map