stream-chat-react-native-core 5.0.0 → 5.1.1-beta.1

package/lib/commonjs/components/MessageInput/ImageUploadPreview.js

@@ -26,7 +26,7 @@ var _Warning = require("../../icons/Warning");
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/ImageUploadPreview.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/ImageUploadPreview.tsx";
 
 var IMAGE_PREVIEW_SIZE = 100;
 var WARNING_ICON_SIZE = 16;
@@ -86,12 +86,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       uploadImage = props.uploadImage;
 
   var _useTheme = (0, _ThemeContext.useTheme)(),
-      _useTheme$theme = _useTheme.theme,
-      _useTheme$theme$color = _useTheme$theme.colors,
-      overlay = _useTheme$theme$color.overlay,
-      white = _useTheme$theme$color.white,
-      _useTheme$theme$messa = _useTheme$theme.messageInput.imageUploadPreview,
-      dismiss = _useTheme$theme$messa.dismiss,
+      _useTheme$theme$messa = _useTheme.theme.messageInput.imageUploadPreview,
       flatList = _useTheme$theme$messa.flatList,
       itemContainer = _useTheme$theme$messa.itemContainer,
       upload = _useTheme$theme$messa.upload;
@@ -115,7 +110,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 110,
+        lineNumber: 117,
         columnNumber: 7
       }
     }, _react["default"].createElement(_reactNative.View, {
@@ -123,7 +118,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 111,
+        lineNumber: 118,
         columnNumber: 9
       }
     }, _react["default"].createElement(_Warning.Warning, {
@@ -134,7 +129,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 112,
+        lineNumber: 119,
         columnNumber: 11
       }
     }), _react["default"].createElement(_reactNative.Text, {
@@ -144,7 +139,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 118,
+        lineNumber: 125,
         columnNumber: 11
       }
     }, t('Not supported')))) : null;
@@ -162,7 +157,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 129,
+        lineNumber: 136,
         columnNumber: 7
       }
     }, _react["default"].createElement(_UploadProgressIndicator.UploadProgressIndicator, {
@@ -176,7 +171,7 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 130,
+        lineNumber: 137,
         columnNumber: 9
       }
     }, _react["default"].createElement(_reactNative.Image, {
@@ -188,37 +183,25 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 137,
+        lineNumber: 144,
         columnNumber: 11
       }
-    })), _react["default"].createElement(_reactNative.TouchableOpacity, {
+    })), _react["default"].createElement(DismissUpload, {
       onPress: function onPress() {
         removeImage(item.id);
       },
-      style: [styles.dismiss, {
-        backgroundColor: overlay
-      }, dismiss],
-      testID: "remove-image-upload-preview",
-      __self: _this,
-      __source: {
-        fileName: _jsxFileName,
-        lineNumber: 143,
-        columnNumber: 9
-      }
-    }, _react["default"].createElement(_Close.Close, {
-      pathFill: white,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
         lineNumber: 150,
-        columnNumber: 11
+        columnNumber: 9
       }
-    })), _react["default"].createElement(UnsupportedImageTypeIndicator, {
+    }), _react["default"].createElement(UnsupportedImageTypeIndicator, {
       indicatorType: indicatorType,
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 152,
+        lineNumber: 155,
         columnNumber: 9
       }
     }));
@@ -242,12 +225,47 @@ var ImageUploadPreviewWithContext = function ImageUploadPreviewWithContext(props
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 158,
+      lineNumber: 161,
       columnNumber: 5
     }
   }) : null;
 };
 
+var DismissUpload = function DismissUpload(_ref3) {
+  var onPress = _ref3.onPress;
+
+  var _useTheme3 = (0, _ThemeContext.useTheme)(),
+      _useTheme3$theme = _useTheme3.theme,
+      _useTheme3$theme$colo = _useTheme3$theme.colors,
+      overlay = _useTheme3$theme$colo.overlay,
+      white = _useTheme3$theme$colo.white,
+      _useTheme3$theme$mess = _useTheme3$theme.messageInput.imageUploadPreview,
+      dismiss = _useTheme3$theme$mess.dismiss,
+      dismissIconColor = _useTheme3$theme$mess.dismissIconColor;
+
+  return _react["default"].createElement(_reactNative.TouchableOpacity, {
+    onPress: onPress,
+    style: [styles.dismiss, {
+      backgroundColor: overlay
+    }, dismiss],
+    testID: "remove-image-upload-preview",
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 189,
+      columnNumber: 5
+    }
+  }, _react["default"].createElement(_Close.Close, {
+    pathFill: dismissIconColor || white,
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 194,
+      columnNumber: 7
+    }
+  }));
+};
+
 var areEqual = function areEqual(prevProps, nextProps) {
   var prevImageUploads = prevProps.imageUploads;
   var nextImageUploads = nextProps.imageUploads;
@@ -272,7 +290,7 @@ var ImageUploadPreview = function ImageUploadPreview(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 204,
+      lineNumber: 230,
       columnNumber: 5
     }
   }));

package/lib/commonjs/components/MessageInput/ImageUploadPreview.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ImageUploadPreview.tsx"],"names":["IMAGE_PREVIEW_SIZE","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","position","right","top","fileSizeText","fontSize","paddingHorizontal","flatList","paddingBottom","iconContainer","alignItems","flexDirection","justifyContent","itemContainer","height","marginLeft","unsupportedImage","bottom","marginHorizontal","upload","width","warningIconStyle","marginTop","warningText","color","ImageUploadPreviewWithContext","props","imageUploads","removeImage","uploadImage","theme","colors","overlay","white","messageInput","imageUploadPreview","UnsupportedImageTypeIndicator","indicatorType","accent_red","t","ProgressIndicatorTypes","NOT_SUPPORTED","backgroundColor","renderItem","index","item","state","itemMarginForIndex","length","marginRight","newImage","uri","file","url","id","_","offset","areEqual","prevProps","nextProps","prevImageUploads","nextImageUploads","every","prevImageUpload","MemoizedImageUploadPreviewWithContext","React","memo","ImageUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { FlatList, Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport {\n  ImageUpload,\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../icons/Close';\nimport { Warning } from '../../icons/Warning';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';\n\nconst IMAGE_PREVIEW_SIZE = 100;\nconst WARNING_ICON_SIZE = 16;\n\nconst styles = StyleSheet.create({\n  dismiss: {\n    borderRadius: 24,\n    position: 'absolute',\n    right: 8,\n    top: 8,\n  },\n  fileSizeText: {\n    fontSize: 12,\n    paddingHorizontal: 10,\n  },\n  flatList: { paddingBottom: 12 },\n  iconContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'center',\n  },\n  itemContainer: {\n    flexDirection: 'row',\n    height: IMAGE_PREVIEW_SIZE,\n    marginLeft: 8,\n  },\n  unsupportedImage: {\n    borderRadius: 20,\n    bottom: 8,\n    flexDirection: 'row',\n    marginHorizontal: 3,\n    position: 'absolute',\n  },\n  upload: {\n    borderRadius: 10,\n    height: IMAGE_PREVIEW_SIZE,\n    width: IMAGE_PREVIEW_SIZE,\n  },\n  warningIconStyle: {\n    borderRadius: 24,\n    marginTop: 6,\n  },\n  warningText: {\n    alignItems: 'center',\n    color: 'black',\n    fontSize: 10,\n    justifyContent: 'center',\n    marginHorizontal: 4,\n  },\n});\n\ntype ImageUploadPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageInputContextValue<StreamChatGenerics>,\n  'imageUploads' | 'removeImage' | 'uploadImage'\n>;\n\nexport type ImageUploadPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<ImageUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\ntype ImageUploadPreviewItem = { index: number; item: ImageUpload };\n\nconst ImageUploadPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { imageUploads, removeImage, uploadImage } = props;\n\n  const {\n    theme: {\n      colors: { overlay, white },\n      messageInput: {\n        imageUploadPreview: { dismiss, flatList, itemContainer, upload },\n      },\n    },\n  } = useTheme();\n\n  const UnsupportedImageTypeIndicator = ({\n    indicatorType,\n  }: {\n    indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes] | null;\n  }) => {\n    const {\n      theme: {\n        colors: { accent_red, overlay, white },\n      },\n    } = useTheme();\n\n    const { t } = useTranslationContext();\n    return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (\n      <View style={[styles.unsupportedImage, { backgroundColor: overlay }]}>\n        <View style={[styles.iconContainer]}>\n          <Warning\n            height={WARNING_ICON_SIZE}\n            pathFill={accent_red}\n            style={styles.warningIconStyle}\n            width={WARNING_ICON_SIZE}\n          />\n          <Text style={[styles.warningText, { color: white }]}>{t('Not supported')}</Text>\n        </View>\n      </View>\n    ) : null;\n  };\n\n  const renderItem = ({ index, item }: ImageUploadPreviewItem) => {\n    const indicatorType = getIndicatorTypeForFileState(item.state);\n    const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};\n\n    return (\n      <View style={[styles.itemContainer, itemMarginForIndex, itemContainer]}>\n        <UploadProgressIndicator\n          action={() => {\n            uploadImage({ newImage: item });\n          }}\n          style={styles.upload}\n          type={indicatorType}\n        >\n          <Image\n            resizeMode='cover'\n            source={{ uri: item.file.uri || item.url }}\n            style={[styles.upload, upload]}\n          />\n        </UploadProgressIndicator>\n        <TouchableOpacity\n          onPress={() => {\n            removeImage(item.id);\n          }}\n          style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n          testID='remove-image-upload-preview'\n        >\n          <Close pathFill={white} />\n        </TouchableOpacity>\n        <UnsupportedImageTypeIndicator indicatorType={indicatorType} />\n      </View>\n    );\n  };\n\n  return imageUploads.length > 0 ? (\n    <FlatList\n      data={imageUploads}\n      getItemLayout={(_, index) => ({\n        index,\n        length: IMAGE_PREVIEW_SIZE + 8,\n        offset: (IMAGE_PREVIEW_SIZE + 8) * index,\n      })}\n      horizontal\n      keyExtractor={(item) => item.id}\n      renderItem={renderItem}\n      style={[styles.flatList, flatList]}\n    />\n  ) : null;\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n  nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { imageUploads: prevImageUploads } = prevProps;\n  const { imageUploads: nextImageUploads } = nextProps;\n\n  return (\n    prevImageUploads.length === nextImageUploads.length &&\n    prevImageUploads.every(\n      (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,\n    )\n  );\n};\n\nconst MemoizedImageUploadPreviewWithContext = React.memo(\n  ImageUploadPreviewWithContext,\n  areEqual,\n) as typeof ImageUploadPreviewWithContext;\n\n/**\n * UI Component to preview the images set for upload\n */\nexport const ImageUploadPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewProps<StreamChatGenerics>,\n) => {\n  const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();\n\n  return (\n    <MemoizedImageUploadPreviewWithContext\n      {...{ imageUploads, removeImage, uploadImage }}\n      {...props}\n    />\n  );\n};\n\nImageUploadPreview.displayName = 'ImageUploadPreview{messageInput{imageUploadPreview}}';\n"]}
+{"version":3,"sources":["ImageUploadPreview.tsx"],"names":["IMAGE_PREVIEW_SIZE","WARNING_ICON_SIZE","styles","StyleSheet","create","dismiss","borderRadius","position","right","top","fileSizeText","fontSize","paddingHorizontal","flatList","paddingBottom","iconContainer","alignItems","flexDirection","justifyContent","itemContainer","height","marginLeft","unsupportedImage","bottom","marginHorizontal","upload","width","warningIconStyle","marginTop","warningText","color","ImageUploadPreviewWithContext","props","imageUploads","removeImage","uploadImage","theme","messageInput","imageUploadPreview","UnsupportedImageTypeIndicator","indicatorType","colors","accent_red","overlay","white","t","ProgressIndicatorTypes","NOT_SUPPORTED","backgroundColor","renderItem","index","item","state","itemMarginForIndex","length","marginRight","newImage","uri","file","url","id","_","offset","DismissUpload","onPress","dismissIconColor","areEqual","prevProps","nextProps","prevImageUploads","nextImageUploads","every","prevImageUpload","MemoizedImageUploadPreviewWithContext","React","memo","ImageUploadPreview","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n  FlatList,\n  Image,\n  StyleSheet,\n  Text,\n  TouchableOpacity,\n  TouchableOpacityProps,\n  View,\n} from 'react-native';\n\nimport { UploadProgressIndicator } from './UploadProgressIndicator';\n\nimport {\n  ImageUpload,\n  MessageInputContextValue,\n  useMessageInputContext,\n} from '../../contexts/messageInputContext/MessageInputContext';\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useTranslationContext } from '../../contexts/translationContext/TranslationContext';\nimport { Close } from '../../icons/Close';\nimport { Warning } from '../../icons/Warning';\nimport type { DefaultStreamChatGenerics } from '../../types/types';\nimport { getIndicatorTypeForFileState, ProgressIndicatorTypes } from '../../utils/utils';\n\nconst IMAGE_PREVIEW_SIZE = 100;\nconst WARNING_ICON_SIZE = 16;\n\nconst styles = StyleSheet.create({\n  dismiss: {\n    borderRadius: 24,\n    position: 'absolute',\n    right: 8,\n    top: 8,\n  },\n  fileSizeText: {\n    fontSize: 12,\n    paddingHorizontal: 10,\n  },\n  flatList: { paddingBottom: 12 },\n  iconContainer: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    justifyContent: 'center',\n  },\n  itemContainer: {\n    flexDirection: 'row',\n    height: IMAGE_PREVIEW_SIZE,\n    marginLeft: 8,\n  },\n  unsupportedImage: {\n    borderRadius: 20,\n    bottom: 8,\n    flexDirection: 'row',\n    marginHorizontal: 3,\n    position: 'absolute',\n  },\n  upload: {\n    borderRadius: 10,\n    height: IMAGE_PREVIEW_SIZE,\n    width: IMAGE_PREVIEW_SIZE,\n  },\n  warningIconStyle: {\n    borderRadius: 24,\n    marginTop: 6,\n  },\n  warningText: {\n    alignItems: 'center',\n    color: 'black',\n    fontSize: 10,\n    justifyContent: 'center',\n    marginHorizontal: 4,\n  },\n});\n\ntype ImageUploadPreviewPropsWithContext<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Pick<\n  MessageInputContextValue<StreamChatGenerics>,\n  'imageUploads' | 'removeImage' | 'uploadImage'\n>;\n\nexport type ImageUploadPreviewProps<\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n> = Partial<ImageUploadPreviewPropsWithContext<StreamChatGenerics>>;\n\ntype ImageUploadPreviewItem = { index: number; item: ImageUpload };\n\nconst ImageUploadPreviewWithContext = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { imageUploads, removeImage, uploadImage } = props;\n\n  const {\n    theme: {\n      messageInput: {\n        imageUploadPreview: { flatList, itemContainer, upload },\n      },\n    },\n  } = useTheme();\n\n  const UnsupportedImageTypeIndicator = ({\n    indicatorType,\n  }: {\n    indicatorType: typeof ProgressIndicatorTypes[keyof typeof ProgressIndicatorTypes] | null;\n  }) => {\n    const {\n      theme: {\n        colors: { accent_red, overlay, white },\n      },\n    } = useTheme();\n\n    const { t } = useTranslationContext();\n    return indicatorType === ProgressIndicatorTypes.NOT_SUPPORTED ? (\n      <View style={[styles.unsupportedImage, { backgroundColor: overlay }]}>\n        <View style={[styles.iconContainer]}>\n          <Warning\n            height={WARNING_ICON_SIZE}\n            pathFill={accent_red}\n            style={styles.warningIconStyle}\n            width={WARNING_ICON_SIZE}\n          />\n          <Text style={[styles.warningText, { color: white }]}>{t('Not supported')}</Text>\n        </View>\n      </View>\n    ) : null;\n  };\n\n  const renderItem = ({ index, item }: ImageUploadPreviewItem) => {\n    const indicatorType = getIndicatorTypeForFileState(item.state);\n    const itemMarginForIndex = index === imageUploads.length - 1 ? { marginRight: 8 } : {};\n\n    return (\n      <View style={[styles.itemContainer, itemMarginForIndex, itemContainer]}>\n        <UploadProgressIndicator\n          action={() => {\n            uploadImage({ newImage: item });\n          }}\n          style={styles.upload}\n          type={indicatorType}\n        >\n          <Image\n            resizeMode='cover'\n            source={{ uri: item.file.uri || item.url }}\n            style={[styles.upload, upload]}\n          />\n        </UploadProgressIndicator>\n        <DismissUpload\n          onPress={() => {\n            removeImage(item.id);\n          }}\n        />\n        <UnsupportedImageTypeIndicator indicatorType={indicatorType} />\n      </View>\n    );\n  };\n\n  return imageUploads.length > 0 ? (\n    <FlatList\n      data={imageUploads}\n      getItemLayout={(_, index) => ({\n        index,\n        length: IMAGE_PREVIEW_SIZE + 8,\n        offset: (IMAGE_PREVIEW_SIZE + 8) * index,\n      })}\n      horizontal\n      keyExtractor={(item) => item.id}\n      renderItem={renderItem}\n      style={[styles.flatList, flatList]}\n    />\n  ) : null;\n};\n\ntype DismissUploadProps = Pick<TouchableOpacityProps, 'onPress'>;\n\nconst DismissUpload = ({ onPress }: DismissUploadProps) => {\n  const {\n    theme: {\n      colors: { overlay, white },\n      messageInput: {\n        imageUploadPreview: { dismiss, dismissIconColor },\n      },\n    },\n  } = useTheme();\n\n  return (\n    <TouchableOpacity\n      onPress={onPress}\n      style={[styles.dismiss, { backgroundColor: overlay }, dismiss]}\n      testID='remove-image-upload-preview'\n    >\n      <Close pathFill={dismissIconColor || white} />\n    </TouchableOpacity>\n  );\n};\n\nconst areEqual = <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(\n  prevProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n  nextProps: ImageUploadPreviewPropsWithContext<StreamChatGenerics>,\n) => {\n  const { imageUploads: prevImageUploads } = prevProps;\n  const { imageUploads: nextImageUploads } = nextProps;\n\n  return (\n    prevImageUploads.length === nextImageUploads.length &&\n    prevImageUploads.every(\n      (prevImageUpload, index) => prevImageUpload.state === nextImageUploads[index].state,\n    )\n  );\n};\n\nconst MemoizedImageUploadPreviewWithContext = React.memo(\n  ImageUploadPreviewWithContext,\n  areEqual,\n) as typeof ImageUploadPreviewWithContext;\n\n/**\n * UI Component to preview the images set for upload\n */\nexport const ImageUploadPreview = <\n  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,\n>(\n  props: ImageUploadPreviewProps<StreamChatGenerics>,\n) => {\n  const { imageUploads, removeImage, uploadImage } = useMessageInputContext<StreamChatGenerics>();\n\n  return (\n    <MemoizedImageUploadPreviewWithContext\n      {...{ imageUploads, removeImage, uploadImage }}\n      {...props}\n    />\n  );\n};\n\nImageUploadPreview.displayName = 'ImageUploadPreview{messageInput{imageUploadPreview}}';\n"]}

package/lib/commonjs/components/MessageInput/InputButtons.js

@@ -18,7 +18,7 @@ var _OwnCapabilitiesContext = require("../../contexts/ownCapabilitiesContext/Own
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/InputButtons.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/InputButtons.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   attachButtonContainer: {

package/lib/commonjs/components/MessageInput/MessageInput.js

@@ -42,7 +42,7 @@ var _AttachmentSelectionBar = require("../AttachmentPicker/components/Attachment
 var _AutoCompleteInput = require("../AutoCompleteInput/AutoCompleteInput");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/MessageInput.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/MessageInput.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); }
 

package/lib/commonjs/components/MessageInput/MoreOptionsButton.js

@@ -18,7 +18,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _CircleRight = require("../../icons/CircleRight");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/MoreOptionsButton.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/MoreOptionsButton.tsx";
 
 var MoreOptionsButtonWithContext = function MoreOptionsButtonWithContext(props) {
   var disabled = props.disabled,

package/lib/commonjs/components/MessageInput/SendButton.js

@@ -22,7 +22,7 @@ var _SendRight = require("../../icons/SendRight");
 var _SendUp = require("../../icons/SendUp");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/SendButton.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/SendButton.tsx";
 
 var SendButtonWithContext = function SendButtonWithContext(props) {
   var _props$disabled = props.disabled,

package/lib/commonjs/components/MessageInput/SendMessageDisallowedIndicator.js

@@ -14,7 +14,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/SendMessageDisallowedIndicator.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/MessageInput/ShowThreadMessageInChannelButton.js

@@ -22,7 +22,7 @@ var _TranslationContext = require("../../contexts/translationContext/Translation
 var _icons = require("../../icons");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/ShowThreadMessageInChannelButton.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   checkBox: {

package/lib/commonjs/components/MessageInput/UploadProgressIndicator.js

@@ -16,7 +16,7 @@ var _icons = require("../../icons");
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/UploadProgressIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/UploadProgressIndicator.tsx";
 
 var REFRESH_ICON_SIZE = 18;
 

package/lib/commonjs/components/MessageInput/components/InputEditingStateHeader.js

@@ -20,7 +20,7 @@ var _TranslationContext = require("../../../contexts/translationContext/Translat
 var _icons = require("../../../icons");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/components/InputEditingStateHeader.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/components/InputEditingStateHeader.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   editingBoxHeader: {

package/lib/commonjs/components/MessageInput/components/InputGiphySearch.js

@@ -22,7 +22,7 @@ var _AutoCompleteInput = require("../../AutoCompleteInput/AutoCompleteInput");
 var _useCountdown2 = require("../hooks/useCountdown");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/components/InputGiphySearch.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/components/InputGiphySearch.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   autoCompleteInputContainer: {

package/lib/commonjs/components/MessageInput/components/InputReplyStateHeader.js

@@ -20,7 +20,7 @@ var _TranslationContext = require("../../../contexts/translationContext/Translat
 var _icons = require("../../../icons");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageInput/components/InputReplyStateHeader.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageInput/components/InputReplyStateHeader.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   replyBoxHeader: {

package/lib/commonjs/components/MessageList/DateHeader.js

@@ -12,7 +12,7 @@ var _reactNative = require("react-native");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/DateHeader.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/DateHeader.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/MessageList/InlineDateSeparator.js

@@ -14,7 +14,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/InlineDateSeparator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/InlineDateSeparator.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/MessageList/InlineLoadingMoreIndicator.js

@@ -14,7 +14,7 @@ var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListC
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/InlineLoadingMoreIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/InlineLoadingMoreIndicator.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   activityIndicatorContainer: {

package/lib/commonjs/components/MessageList/InlineLoadingMoreRecentIndicator.js

@@ -14,7 +14,7 @@ var _PaginatedMessageListContext = require("../../contexts/paginatedMessageListC
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/InlineLoadingMoreRecentIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/InlineLoadingMoreRecentIndicator.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   activityIndicatorContainer: {

package/lib/commonjs/components/MessageList/InlineLoadingMoreThreadIndicator.js

@@ -14,7 +14,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/InlineLoadingMoreThreadIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/InlineLoadingMoreThreadIndicator.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   activityIndicatorContainer: {

package/lib/commonjs/components/MessageList/InlineUnreadIndicator.js

@@ -20,7 +20,7 @@ var _TranslationContext = require("../../contexts/translationContext/Translation
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/InlineUnreadIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/InlineUnreadIndicator.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); }
 

package/lib/commonjs/components/MessageList/MessageList.js

@@ -50,7 +50,7 @@ var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/MessageList.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/MessageList.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); }
 

package/lib/commonjs/components/MessageList/MessageSystem.js

@@ -14,7 +14,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/MessageSystem.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/MessageSystem.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/MessageList/NetworkDownIndicator.js

@@ -18,7 +18,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _TranslationContext = require("../../contexts/translationContext/TranslationContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/NetworkDownIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/NetworkDownIndicator.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   errorNotification: {

package/lib/commonjs/components/MessageList/ScrollToBottomButton.js

@@ -14,7 +14,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _icons = require("../../icons");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/ScrollToBottomButton.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/ScrollToBottomButton.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/MessageList/TypingIndicator.js

@@ -16,7 +16,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _LoadingDots = require("../Indicators/LoadingDots");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/TypingIndicator.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/TypingIndicator.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/MessageList/TypingIndicatorContainer.js

@@ -22,7 +22,7 @@ var _ThreadContext = require("../../contexts/threadContext/ThreadContext");
 var _TypingContext = require("../../contexts/typingContext/TypingContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageList/TypingIndicatorContainer.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageList/TypingIndicatorContainer.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/MessageOverlay/MessageActionList.js

@@ -24,7 +24,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageOverlay/MessageActionList.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/MessageActionList.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); }
 

package/lib/commonjs/components/MessageOverlay/MessageActionListItem.js

@@ -22,7 +22,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageOverlay/MessageActionListItem.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/MessageActionListItem.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   bottomBorder: {

package/lib/commonjs/components/MessageOverlay/MessageOverlay.js

@@ -42,7 +42,7 @@ var _MessageTextContainer = require("../Message/MessageSimple/MessageTextContain
 var _OverlayReactions = require("../MessageOverlay/OverlayReactions");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageOverlay/MessageOverlay.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/MessageOverlay.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); }
 

package/lib/commonjs/components/MessageOverlay/OverlayBackdrop.js

@@ -12,7 +12,7 @@ var _reactNative = require("react-native");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageOverlay/OverlayBackdrop.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/OverlayBackdrop.tsx";
 
 var OverlayBackdrop = function OverlayBackdrop(props) {
   var _props$style = props.style,

package/lib/commonjs/components/MessageOverlay/OverlayReactionList.js

@@ -32,7 +32,7 @@ var _icons = require("../../icons");
 var _native = require("../../native");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactionList.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactionList.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); }
 

package/lib/commonjs/components/MessageOverlay/OverlayReactions.js

@@ -22,7 +22,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _icons = require("../../icons");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactions.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactions.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); }
 

package/lib/commonjs/components/MessageOverlay/OverlayReactionsAvatar.js

@@ -12,7 +12,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _Avatar = require("../Avatar/Avatar");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactionsAvatar.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/MessageOverlay/OverlayReactionsAvatar.tsx";
 
 var OverlayReactionsAvatar = function OverlayReactionsAvatar(props) {
   var _props$reaction = props.reaction,

package/lib/commonjs/components/ProgressControl/ProgressControl.js

@@ -16,7 +16,7 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/ProgressControl/ProgressControl.tsx";
+    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/ProgressControl/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); }
 
@@ -104,7 +104,7 @@ var ProgressControl = _react["default"].memo(function (props) {
     onFinish: function onFinish() {
       translateX.value = state.value;
       var dragFinishLocationInSeconds = state.value / width * duration;
-      (0, _reactNativeReanimated.runOnJS)(onProgressDrag)(dragFinishLocationInSeconds);
+      if (onProgressDrag) (0, _reactNativeReanimated.runOnJS)(onProgressDrag)(dragFinishLocationInSeconds);
       (0, _reactNativeReanimated.runOnJS)(onPlayPause)(false);
     },
     onStart: function onStart() {
@@ -134,7 +134,7 @@ var ProgressControl = _react["default"].memo(function (props) {
     }
   }), _react["default"].createElement(_reactNativeGestureHandler.PanGestureHandler, {
     maxPointers: 1,
-    onGestureEvent: onGestureEvent,
+    onGestureEvent: onProgressDrag ? onGestureEvent : undefined,
     testID: testID,
     __self: _this,
     __source: {
@@ -147,15 +147,15 @@ var ProgressControl = _react["default"].memo(function (props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 113,
+      lineNumber: 117,
       columnNumber: 11
     }
-  }, _react["default"].createElement(ProgressControlThumb, {
+  }, onProgressDrag && _react["default"].createElement(ProgressControlThumb, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 114,
-      columnNumber: 13
+      lineNumber: 118,
+      columnNumber: 32
     }
   }))));
 }, function (prevProps, nextProps) {