stream-chat-react-native-core 4.11.0-beta.2 → 5.0.0-offline-support.2

package/lib/commonjs/components/Attachment/Attachment.js

@@ -24,7 +24,7 @@ var _MessagesContext = require("../../contexts/messagesContext/MessagesContext")
 var _native = require("../../native");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/Attachment.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/Attachment.tsx";
 
 var AttachmentWithContext = function AttachmentWithContext(props) {
   var _attachment$actions;

package/lib/commonjs/components/Attachment/AttachmentActions.js

@@ -21,7 +21,7 @@ var _excluded = ["defaultBackgroundColor", "defaultBorderColor", "primaryBackgro
     _excluded2 = ["defaultColor", "primaryColor"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/AttachmentActions.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/AttachmentActions.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   actionButton: {

package/lib/commonjs/components/Attachment/Card.js

@@ -28,7 +28,7 @@ var _utils = require("../../utils/utils");
 var _excluded = ["description", "title"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/Card.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/Card.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   authorName: {

package/lib/commonjs/components/Attachment/FileAttachment.js

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

package/lib/commonjs/components/Attachment/FileAttachmentGroup.js

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

package/lib/commonjs/components/Attachment/FileIcon.js

@@ -52,7 +52,7 @@ var _XLSX = require("../../icons/XLSX");
 var _ZIP = require("../../icons/ZIP");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/FileIcon.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/FileIcon.tsx";
 
 var audioFileTypes = ['audio/1d-interleaved-parityfec', 'audio/32kadpcm', 'audio/3gpp', 'audio/3gpp2', 'audio/aac', 'audio/ac3', 'audio/AMR', 'audio/AMR-WB', 'audio/amr-wb+', 'audio/aptx', 'audio/asc', 'audio/ATRAC-ADVANCED-LOSSLESS', 'audio/ATRAC-X', 'audio/ATRAC3', 'audio/basic', 'audio/BV16', 'audio/BV32', 'audio/clearmode', 'audio/CN', 'audio/DAT12', 'audio/dls', 'audio/dsr-es201108', 'audio/dsr-es202050', 'audio/dsr-es202211', 'audio/dsr-es202212', 'audio/DV', 'audio/DVI4', 'audio/eac3', 'audio/encaprtp', 'audio/EVRC', 'audio/EVRC-QCP', 'audio/EVRC0', 'audio/EVRC1', 'audio/EVRCB', 'audio/EVRCB0', 'audio/EVRCB1', 'audio/EVRCNW', 'audio/EVRCNW0', 'audio/EVRCNW1', 'audio/EVRCWB', 'audio/EVRCWB0', 'audio/EVRCWB1', 'audio/EVS', 'audio/example', 'audio/flexfec', 'audio/fwdred', 'audio/G711-0', 'audio/G719', 'audio/G7221', 'audio/G722', 'audio/G723', 'audio/G726-16', 'audio/G726-24', 'audio/G726-32', 'audio/G726-40', 'audio/G728', 'audio/G729', 'audio/G7291', 'audio/G729D', 'audio/G729E', 'audio/GSM', 'audio/GSM-EFR', 'audio/GSM-HR-08', 'audio/iLBC', 'audio/ip-mr_v2.5', 'audio/L8', 'audio/L16', 'audio/L20', 'audio/L24', 'audio/LPC', 'audio/MELP', 'audio/MELP600', 'audio/MELP1200', 'audio/MELP2400', 'audio/mhas', 'audio/mobile-xmf', 'audio/MPA', 'audio/mp4', 'audio/MP4A-LATM', 'audio/mpa-robust', 'audio/mpeg', 'audio/mpeg4-generic', 'audio/ogg', 'audio/opus', 'audio/parityfec', 'audio/PCMA', 'audio/PCMA-WB', 'audio/PCMU', 'audio/PCMU-WB', 'audio/prs.sid', 'audio/raptorfec', 'audio/RED', 'audio/rtp-enc-aescm128', 'audio/rtploopback', 'audio/rtp-midi', 'audio/rtx', 'audio/SMV', 'audio/SMV0', 'audio/SMV-QCP', 'audio/sofa', 'audio/sp-midi', 'audio/speex', 'audio/t140c', 'audio/t38', 'audio/telephone-event', 'audio/TETRA_ACELP', 'audio/TETRA_ACELP_BB', 'audio/tone', 'audio/TSVCIS', 'audio/UEMCLIP', 'audio/ulpfec', 'audio/usac', 'audio/VDVI', 'audio/VMR-WB', 'audio/vnd.3gpp.iufp', 'audio/vnd.4SB', 'audio/vnd.audiokoz', 'audio/vnd.CELP', 'audio/vnd.cisco.nse', 'audio/vnd.cmles.radio-events', 'audio/vnd.cns.anp1', 'audio/vnd.cns.inf1', 'audio/vnd.dece.audio', 'audio/vnd.digital-winds', 'audio/vnd.dlna.adts', 'audio/vnd.dolby.heaac.1', 'audio/vnd.dolby.heaac.2', 'audio/vnd.dolby.mlp', 'audio/vnd.dolby.mps', 'audio/vnd.dolby.pl2', 'audio/vnd.dolby.pl2x', 'audio/vnd.dolby.pl2z', 'audio/vnd.dolby.pulse.1', 'audio/vnd.dra', 'audio/vnd.dts', 'audio/vnd.dts.hd', 'audio/vnd.dts.uhd', 'audio/vnd.dvb.file', 'audio/vnd.everad.plj', 'audio/vnd.hns.audio', 'audio/vnd.lucent.voice', 'audio/vnd.ms-playready.media.pya', 'audio/vnd.nokia.mobile-xmf', 'audio/vnd.nortel.vbk', 'audio/vnd.nuera.ecelp4800', 'audio/vnd.nuera.ecelp7470', 'audio/vnd.nuera.ecelp9600', 'audio/vnd.octel.sbc', 'audio/vnd.presonus.multitrack', 'audio/vnd.qcelp', 'audio/vnd.rhetorex.32kadpcm', 'audio/vnd.rip', 'audio/vnd.sealedmedia.softseal.mpeg', 'audio/vnd.vmx.cvsd', 'audio/vorbis', 'audio/vorbis-config'];
 var docMimeTypes = ['application/msword', 'application/msword-template', 'application/vnd.oasis.opendocument.text', 'application/vnd.oasis.opendocument.text-template', 'application/vnd.oasis.opendocument.text-flat-xml'];

package/lib/commonjs/components/Attachment/GallaryImage.js

@@ -18,7 +18,7 @@ var _utils = require("../../utils/utils");
 var _excluded = ["uri"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/GallaryImage.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/GallaryImage.tsx";
 
 var GalleryImage = function GalleryImage(props) {
   var uri = props.uri,

package/lib/commonjs/components/Attachment/Gallery.js

@@ -40,7 +40,7 @@ var _native = require("../../native");
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/Gallery.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/Gallery.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/Attachment/Giphy.js

@@ -30,7 +30,7 @@ var _Lightning = require("../../icons/Lightning");
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/Giphy.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/Giphy.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   actionsRow: {

package/lib/commonjs/components/Attachment/ImageLoadingFailedIndicator.js

@@ -22,7 +22,7 @@ var _icons = require("../../icons");
 var _excluded = ["style"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/ImageLoadingFailedIndicator.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/ImageLoadingFailedIndicator.tsx";
 
 var WARNING_ICON_SIZE = 14;
 

package/lib/commonjs/components/Attachment/ImageLoadingIndicator.js

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

package/lib/commonjs/components/Attachment/VideoThumbnail.js

@@ -20,7 +20,7 @@ var _icons = require("../../icons");
 var _excluded = ["style", "thumb_url"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Attachment/VideoThumbnail.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Attachment/VideoThumbnail.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/AttachmentPicker/AttachmentPicker.js

@@ -38,7 +38,7 @@ var _native = require("../../native");
 var _utils = require("../../utils/utils");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/AttachmentPicker.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AttachmentPicker/AttachmentPicker.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/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.js

@@ -16,7 +16,7 @@ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reani
 var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AttachmentPicker/components/AttachmentPickerBottomSheetHandle.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/AttachmentPicker/components/AttachmentPickerError.js

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

package/lib/commonjs/components/AttachmentPicker/components/AttachmentPickerErrorImage.js

@@ -12,7 +12,7 @@ var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 var _icons = require("../../../icons");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AttachmentPicker/components/AttachmentPickerErrorImage.tsx";
 
 var AttachmentPickerErrorImage = function AttachmentPickerErrorImage() {
   var _useTheme = (0, _ThemeContext.useTheme)(),

package/lib/commonjs/components/AttachmentPicker/components/AttachmentSelectionBar.js

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

package/lib/commonjs/components/AttachmentPicker/components/CameraSelectorIcon.js

@@ -12,7 +12,7 @@ var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 var _icons = require("../../../icons");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AttachmentPicker/components/CameraSelectorIcon.tsx";
 
 var CameraSelectorIcon = function CameraSelectorIcon() {
   var _useTheme = (0, _ThemeContext.useTheme)(),

package/lib/commonjs/components/AttachmentPicker/components/FileSelectorIcon.js

@@ -12,7 +12,7 @@ var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 var _icons = require("../../../icons");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AttachmentPicker/components/FileSelectorIcon.tsx";
 
 var FileSelectorIcon = function FileSelectorIcon() {
   var _useTheme = (0, _ThemeContext.useTheme)(),

package/lib/commonjs/components/AttachmentPicker/components/ImageOverlaySelectedComponent.js

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

package/lib/commonjs/components/AttachmentPicker/components/ImageSelectorIcon.js

@@ -12,7 +12,7 @@ var _ThemeContext = require("../../../contexts/themeContext/ThemeContext");
 var _icons = require("../../../icons");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AttachmentPicker/components/ImageSelectorIcon.tsx";
 
 var ImageSelectorIcon = function ImageSelectorIcon(_ref) {
   var selectedPicker = _ref.selectedPicker;

package/lib/commonjs/components/AutoCompleteInput/AutoCompleteInput.js

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

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

package/lib/commonjs/components/AutoCompleteInput/AutoCompleteSuggestionHeader.js

@@ -20,7 +20,7 @@ var _Lightning = require("../../icons/Lightning");
 var _Smile = require("../../icons/Smile");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionHeader.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   container: {

package/lib/commonjs/components/AutoCompleteInput/AutoCompleteSuggestionItem.js

@@ -20,7 +20,7 @@ var _AtMentions = require("../../icons/AtMentions");
 var _Avatar = require("../Avatar/Avatar");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionItem.tsx";
 
 var styles = _reactNative.StyleSheet.create({
   args: {

package/lib/commonjs/components/AutoCompleteInput/AutoCompleteSuggestionList.js

@@ -20,7 +20,7 @@ var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _excluded = ["children"];
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx";
 
 var SuggestionsItem = function SuggestionsItem(props) {
   var children = props.children,

package/lib/commonjs/components/Avatar/Avatar.js

@@ -9,9 +9,7 @@ exports.Avatar = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
@@ -19,10 +17,12 @@ var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
+var _useImageErrorHandler2 = require("../../hooks/useImageErrorHandler");
+
 var _getResizedImageUrl = require("../../utils/getResizedImageUrl");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Avatar/Avatar.tsx";
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Avatar/Avatar.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); }
 
@@ -75,16 +75,15 @@ var Avatar = function Avatar(props) {
       accent_green = _useTheme$theme$color.accent_green,
       white = _useTheme$theme$color.white;
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      imageError = _useState2[0],
-      setImageError = _useState2[1];
+  var _useImageErrorHandler = (0, _useImageErrorHandler2.useImageErrorHandler)(),
+      imageError = _useImageErrorHandler.imageError,
+      setImageError = _useImageErrorHandler.setImageError;
 
   return _react["default"].createElement(_reactNative.View, {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 74,
+      lineNumber: 75,
       columnNumber: 5
     }
   }, _react["default"].createElement(_reactNative.View, {
@@ -96,10 +95,23 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 75,
+      lineNumber: 76,
       columnNumber: 7
     }
-  }, _react["default"].createElement(_reactNative.Image, {
+  }, imageError ? _react["default"].createElement(_reactNative.View, {
+    style: {
+      backgroundColor: '#ececec',
+      borderRadius: size / 2,
+      height: size,
+      width: size
+    },
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 89,
+      columnNumber: 11
+    }
+  }) : _react["default"].createElement(_reactNative.Image, {
     accessibilityLabel: testID || 'avatar-image',
     onError: function onError() {
       return setImageError(true);
@@ -112,6 +124,7 @@ var Avatar = function Avatar(props) {
       })
     },
     style: [image, size ? {
+      backgroundColor: '#ececec',
       borderRadius: size / 2,
       height: size,
       width: size
@@ -120,22 +133,22 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 87,
-      columnNumber: 9
+      lineNumber: 98,
+      columnNumber: 11
     }
   })), online && _react["default"].createElement(_reactNative.View, {
     style: [styles.presenceIndicatorContainer, presenceIndicatorContainer, presenceIndicatorContainerStyle],
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 120,
+      lineNumber: 135,
       columnNumber: 9
     }
   }, _react["default"].createElement(_reactNativeSvg["default"], {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 127,
+      lineNumber: 142,
       columnNumber: 11
     }
   }, _react["default"].createElement(_reactNativeSvg.Circle, (0, _extends2["default"])({
@@ -145,7 +158,7 @@ var Avatar = function Avatar(props) {
     __self: _this,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 128,
+      lineNumber: 143,
       columnNumber: 13
     }
   })))));

package/lib/commonjs/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Avatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","alignItems","justifyContent","overflow","presenceIndicatorContainer","height","position","right","top","width","getInitials","fullName","split","slice","map","name","charAt","join","Avatar","props","containerStyle","imageProp","image","imageStyle","online","presenceIndicatorProp","presenceIndicator","presenceIndicatorContainerStyle","size","testID","theme","avatar","colors","accent_green","white","imageError","setImageError","borderRadius","uri","includes","url","displayName"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Svg, { Circle, CircleProps } from 'react-native-svg';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { getResizedImageUrl } from '../../utils/getResizedImageUrl';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  presenceIndicatorContainer: {\n    height: 12,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    width: 12,\n  },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type AvatarProps = {\n  /** size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image url */\n  image?: string;\n  /** name of the picture, used for fallback */\n  imageStyle?: StyleProp<ImageStyle>;\n  name?: string;\n  online?: boolean;\n  presenceIndicator?: CircleProps;\n  presenceIndicatorContainerStyle?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\n/**\n * Avatar - A round avatar image with fallback to user's initials.\n */\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n  const {\n    containerStyle,\n    image: imageProp,\n    imageStyle,\n    name,\n    online,\n    presenceIndicator: presenceIndicatorProp,\n    presenceIndicatorContainerStyle,\n    size,\n    testID,\n  } = props;\n  const {\n    theme: {\n      avatar: { container, image, presenceIndicator, presenceIndicatorContainer },\n      colors: { accent_green, white },\n    },\n  } = useTheme();\n\n  const [imageError, setImageError] = useState(false);\n\n  return (\n    <View>\n      <View\n        style={[\n          styles.container,\n          {\n            borderRadius: size / 2,\n            height: size,\n            width: size,\n          },\n          container,\n          containerStyle,\n        ]}\n      >\n        <Image\n          accessibilityLabel={testID || 'avatar-image'}\n          onError={() => setImageError(true)}\n          source={{\n            uri:\n              imageError ||\n              !imageProp ||\n              imageProp.includes(randomImageBaseUrl) ||\n              imageProp.includes(randomSvgBaseUrl)\n                ? imageProp?.includes(streamCDN)\n                  ? imageProp\n                  : `${randomImageBaseUrl}${name ? `?name=${getInitials(name)}&size=${size}` : ''}`\n                : getResizedImageUrl({\n                    height: size,\n                    url: imageProp,\n                    width: size,\n                  }),\n          }}\n          style={[\n            image,\n            size\n              ? {\n                  borderRadius: size / 2,\n                  height: size,\n                  width: size,\n                }\n              : {},\n            imageStyle,\n          ]}\n          testID={testID || 'avatar-image'}\n        />\n      </View>\n      {online && (\n        <View\n          style={[\n            styles.presenceIndicatorContainer,\n            presenceIndicatorContainer,\n            presenceIndicatorContainerStyle,\n          ]}\n        >\n          <Svg>\n            <Circle\n              fill={accent_green}\n              stroke={white}\n              {...presenceIndicator}\n              {...presenceIndicatorProp}\n            />\n          </Svg>\n        </View>\n      )}\n    </View>\n  );\n};\n\nAvatar.displayName = 'Avatar{avatar}';\n"]}
+{"version":3,"sources":["Avatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","alignItems","justifyContent","overflow","presenceIndicatorContainer","height","position","right","top","width","getInitials","fullName","split","slice","map","name","charAt","join","Avatar","props","containerStyle","imageProp","image","imageStyle","online","presenceIndicatorProp","presenceIndicator","presenceIndicatorContainerStyle","size","testID","theme","avatar","colors","accent_green","white","imageError","setImageError","borderRadius","backgroundColor","uri","includes","url","displayName"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AACA;;AAEA;;AACA;;AACA;;;;;;;;;AAEA,IAAMA,kBAAkB,GAAG,kCAA3B;AACA,IAAMC,gBAAgB,GAAG,kCAAzB;AACA,IAAMC,SAAS,GAAG,mBAAlB;;AAEA,IAAMC,MAAM,GAAGC,wBAAWC,MAAX,CAAkB;AAC/BC,EAAAA,SAAS,EAAE;AACTC,IAAAA,UAAU,EAAE,QADH;AAETC,IAAAA,cAAc,EAAE,QAFP;AAGTC,IAAAA,QAAQ,EAAE;AAHD,GADoB;AAM/BC,EAAAA,0BAA0B,EAAE;AAC1BC,IAAAA,MAAM,EAAE,EADkB;AAE1BC,IAAAA,QAAQ,EAAE,UAFgB;AAG1BC,IAAAA,KAAK,EAAE,CAHmB;AAI1BC,IAAAA,GAAG,EAAE,CAJqB;AAK1BC,IAAAA,KAAK,EAAE;AALmB;AANG,CAAlB,CAAf;;AAeA,IAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD;AAAA,SAClBA,QAAQ,CACLC,KADH,CACS,GADT,EAEGC,KAFH,CAES,CAFT,EAEY,CAFZ,EAGGC,GAHH,CAGO,UAACC,IAAD;AAAA,WAAUA,IAAI,CAACC,MAAL,CAAY,CAAZ,CAAV;AAAA,GAHP,EAIGC,IAJH,CAIQ,GAJR,CADkB;AAAA,CAApB;;AAyBO,IAAMC,MAA6B,GAAG,SAAhCA,MAAgC,CAACC,KAAD,EAAW;AACtD,MACEC,cADF,GAUID,KAVJ,CACEC,cADF;AAAA,MAESC,SAFT,GAUIF,KAVJ,CAEEG,KAFF;AAAA,MAGEC,UAHF,GAUIJ,KAVJ,CAGEI,UAHF;AAAA,MAIER,IAJF,GAUII,KAVJ,CAIEJ,IAJF;AAAA,MAKES,MALF,GAUIL,KAVJ,CAKEK,MALF;AAAA,MAMqBC,qBANrB,GAUIN,KAVJ,CAMEO,iBANF;AAAA,MAOEC,+BAPF,GAUIR,KAVJ,CAOEQ,+BAPF;AAAA,MAQEC,IARF,GAUIT,KAVJ,CAQES,IARF;AAAA,MASEC,MATF,GAUIV,KAVJ,CASEU,MATF;;AAWA,kBAKI,6BALJ;AAAA,kCACEC,KADF;AAAA,8CAEIC,MAFJ;AAAA,MAEc/B,SAFd,yBAEcA,SAFd;AAAA,MAEyBsB,KAFzB,yBAEyBA,KAFzB;AAAA,MAEgCI,iBAFhC,yBAEgCA,iBAFhC;AAAA,MAEmDtB,0BAFnD,yBAEmDA,0BAFnD;AAAA,8CAGI4B,MAHJ;AAAA,MAGcC,YAHd,yBAGcA,YAHd;AAAA,MAG4BC,KAH5B,yBAG4BA,KAH5B;;AAOA,8BAAsC,kDAAtC;AAAA,MAAQC,UAAR,yBAAQA,UAAR;AAAA,MAAoBC,aAApB,yBAAoBA,aAApB;;AAEA,SACE,gCAAC,iBAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACLvC,MAAM,CAACG,SADF,EAEL;AACEqC,MAAAA,YAAY,EAAET,IAAI,GAAG,CADvB;AAEEvB,MAAAA,MAAM,EAAEuB,IAFV;AAGEnB,MAAAA,KAAK,EAAEmB;AAHT,KAFK,EAOL5B,SAPK,EAQLoB,cARK,CADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAYGe,UAAU,GACT,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE;AACLG,MAAAA,eAAe,EAAE,SADZ;AAELD,MAAAA,YAAY,EAAET,IAAI,GAAG,CAFhB;AAGLvB,MAAAA,MAAM,EAAEuB,IAHH;AAILnB,MAAAA,KAAK,EAAEmB;AAJF,KADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IADS,GAUT,gCAAC,kBAAD;AACE,IAAA,kBAAkB,EAAEC,MAAM,IAAI,cADhC;AAEE,IAAA,OAAO,EAAE;AAAA,aAAMO,aAAa,CAAC,IAAD,CAAnB;AAAA,KAFX;AAGE,IAAA,MAAM,EAAE;AACNG,MAAAA,GAAG,EACDJ,UAAU,IACV,CAACd,SADD,IAEAA,SAAS,CAACmB,QAAV,CAAmB9C,kBAAnB,CAFA,IAGA2B,SAAS,CAACmB,QAAV,CAAmB7C,gBAAnB,CAHA,GAII0B,SAAS,QAAT,IAAAA,SAAS,CAAEmB,QAAX,CAAoB5C,SAApB,IACEyB,SADF,QAEK3B,kBAFL,IAGIqB,IAAI,cAAYL,WAAW,CAACK,IAAD,CAAvB,cAAsCa,IAAtC,GAA+C,EAHvD,CAJJ,GASI,4CAAmB;AACjBvB,QAAAA,MAAM,EAAEuB,IADS;AAEjBa,QAAAA,GAAG,EAAEpB,SAFY;AAGjBZ,QAAAA,KAAK,EAAEmB;AAHU,OAAnB;AAXA,KAHV;AAoBE,IAAA,KAAK,EAAE,CACLN,KADK,EAELM,IAAI,GACA;AACEU,MAAAA,eAAe,EAAE,SADnB;AAEED,MAAAA,YAAY,EAAET,IAAI,GAAG,CAFvB;AAGEvB,MAAAA,MAAM,EAAEuB,IAHV;AAIEnB,MAAAA,KAAK,EAAEmB;AAJT,KADA,GAOA,EATC,EAULL,UAVK,CApBT;AAgCE,IAAA,MAAM,EAAEM,MAAM,IAAI,cAhCpB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAtBJ,CADF,EA2DGL,MAAM,IACL,gCAAC,iBAAD;AACE,IAAA,KAAK,EAAE,CACL3B,MAAM,CAACO,0BADF,EAELA,0BAFK,EAGLuB,+BAHK,CADT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAOE,gCAAC,0BAAD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KACE,gCAAC,sBAAD;AACE,IAAA,IAAI,EAAEM,YADR;AAEE,IAAA,MAAM,EAAEC;AAFV,KAGMR,iBAHN,EAIMD,qBAJN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KADF,CAPF,CA5DJ,CADF;AAgFD,CArGM;;;AAuGPP,MAAM,CAACwB,WAAP,GAAqB,gBAArB","sourcesContent":["import React from 'react';\nimport { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\nimport Svg, { Circle, CircleProps } from 'react-native-svg';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useImageErrorHandler } from '../../hooks/useImageErrorHandler';\nimport { getResizedImageUrl } from '../../utils/getResizedImageUrl';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    alignItems: 'center',\n    justifyContent: 'center',\n    overflow: 'hidden',\n  },\n  presenceIndicatorContainer: {\n    height: 12,\n    position: 'absolute',\n    right: 0,\n    top: 0,\n    width: 12,\n  },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type AvatarProps = {\n  /** size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image url */\n  image?: string;\n  /** name of the picture, used for fallback */\n  imageStyle?: StyleProp<ImageStyle>;\n  name?: string;\n  online?: boolean;\n  presenceIndicator?: CircleProps;\n  presenceIndicatorContainerStyle?: StyleProp<ViewStyle>;\n  testID?: string;\n};\n\n/**\n * Avatar - A round avatar image with fallback to user's initials.\n */\nexport const Avatar: React.FC<AvatarProps> = (props) => {\n  const {\n    containerStyle,\n    image: imageProp,\n    imageStyle,\n    name,\n    online,\n    presenceIndicator: presenceIndicatorProp,\n    presenceIndicatorContainerStyle,\n    size,\n    testID,\n  } = props;\n  const {\n    theme: {\n      avatar: { container, image, presenceIndicator, presenceIndicatorContainer },\n      colors: { accent_green, white },\n    },\n  } = useTheme();\n\n  const { imageError, setImageError } = useImageErrorHandler();\n\n  return (\n    <View>\n      <View\n        style={[\n          styles.container,\n          {\n            borderRadius: size / 2,\n            height: size,\n            width: size,\n          },\n          container,\n          containerStyle,\n        ]}\n      >\n        {imageError ? (\n          <View\n            style={{\n              backgroundColor: '#ececec',\n              borderRadius: size / 2,\n              height: size,\n              width: size,\n            }}\n          />\n        ) : (\n          <Image\n            accessibilityLabel={testID || 'avatar-image'}\n            onError={() => setImageError(true)}\n            source={{\n              uri:\n                imageError ||\n                !imageProp ||\n                imageProp.includes(randomImageBaseUrl) ||\n                imageProp.includes(randomSvgBaseUrl)\n                  ? imageProp?.includes(streamCDN)\n                    ? imageProp\n                    : `${randomImageBaseUrl}${\n                        name ? `?name=${getInitials(name)}&size=${size}` : ''\n                      }`\n                  : getResizedImageUrl({\n                      height: size,\n                      url: imageProp,\n                      width: size,\n                    }),\n            }}\n            style={[\n              image,\n              size\n                ? {\n                    backgroundColor: '#ececec',\n                    borderRadius: size / 2,\n                    height: size,\n                    width: size,\n                  }\n                : {},\n              imageStyle,\n            ]}\n            testID={testID || 'avatar-image'}\n          />\n        )}\n      </View>\n      {online && (\n        <View\n          style={[\n            styles.presenceIndicatorContainer,\n            presenceIndicatorContainer,\n            presenceIndicatorContainerStyle,\n          ]}\n        >\n          <Svg>\n            <Circle\n              fill={accent_green}\n              stroke={white}\n              {...presenceIndicator}\n              {...presenceIndicatorProp}\n            />\n          </Svg>\n        </View>\n      )}\n    </View>\n  );\n};\n\nAvatar.displayName = 'Avatar{avatar}';\n"]}

package/lib/commonjs/components/Avatar/GroupAvatar.js

@@ -1,7 +1,5 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,22 +7,18 @@ exports.GroupAvatar = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _reactNative = require("react-native");
 
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 
+var _useImageErrorHandler2 = require("../../hooks/useImageErrorHandler");
+
 var _getResizedImageUrl = require("../../utils/getResizedImageUrl");
 
 var _this = this,
-    _jsxFileName = "/home/runner/work/stream-chat-react-native/stream-chat-react-native/package/src/components/Avatar/GroupAvatar.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; }
+    _jsxFileName = "/Users/vishalnarkhede/projects/stream-chat-react-native/package/src/components/Avatar/GroupAvatar.tsx";
 
 var randomImageBaseUrl = 'https://getstream.io/random_png/';
 var randomSvgBaseUrl = 'https://getstream.io/random_svg/';
@@ -57,10 +51,9 @@ var GroupAvatar = function GroupAvatar(props) {
       container = _useTheme$theme$group.container,
       image = _useTheme$theme$group.image;
 
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      imageError = _useState2[0],
-      setImageError = _useState2[1];
+  var _useImageErrorHandler = (0, _useImageErrorHandler2.useImageErrorHandler)(),
+      imageError = _useImageErrorHandler.imageError,
+      setImageError = _useImageErrorHandler.setImageError;
 
   var imagesOrNames = images || names || [];
   var avatarImages = imagesOrNames.slice(0, 4).reduce(function (returnArray, currentImage, index) {
@@ -106,7 +99,20 @@ var GroupAvatar = function GroupAvatar(props) {
       lineNumber: 109,
       columnNumber: 5
     }
-  }, avatarImages.map(function (column, colIndex) {
+  }, imageError ? _react["default"].createElement(_reactNative.View, {
+    style: {
+      backgroundColor: '#ececec',
+      borderRadius: size / 2,
+      height: size,
+      width: size
+    },
+    __self: _this,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 119,
+      columnNumber: 9
+    }
+  }) : avatarImages.map(function (column, colIndex) {
     return _react["default"].createElement(_reactNative.View, {
       key: "avatar-column-" + colIndex,
       style: [styles.flex, {
@@ -115,8 +121,8 @@ var GroupAvatar = function GroupAvatar(props) {
       __self: _this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 119,
-        columnNumber: 9
+        lineNumber: 129,
+        columnNumber: 11
       }
     }, column.map(function (_ref, rowIndex) {
       var height = _ref.height,
@@ -137,6 +143,7 @@ var GroupAvatar = function GroupAvatar(props) {
           })
         },
         style: [image, size ? {
+          backgroundColor: '#ececec',
           height: height,
           width: width
         } : {}],
@@ -144,8 +151,8 @@ var GroupAvatar = function GroupAvatar(props) {
         __self: _this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 129,
-          columnNumber: 13
+          lineNumber: 139,
+          columnNumber: 15
         }
       });
     }));

package/lib/commonjs/components/Avatar/GroupAvatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["GroupAvatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","overflow","flex","getInitials","fullName","split","slice","map","name","charAt","join","GroupAvatar","props","containerStyle","images","names","size","testID","theme","groupAvatar","image","imageError","setImageError","imagesOrNames","avatarImages","reduce","returnArray","currentImage","index","url","startsWith","length","height","width","borderRadius","column","colIndex","flexDirection","rowIndex","uri","includes","displayName"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { getResizedImageUrl } from '../../utils/getResizedImageUrl';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n  },\n  flex: { flex: 1 },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type GroupAvatarProps = {\n  /** total size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image urls */\n  images?: string[];\n  /** name of the users, used for fallback */\n  names?: string[];\n  testID?: string;\n};\n\n/**\n * GroupAvatar - A round group of avatar images with fallbacks to users' initials\n */\nexport const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {\n  const { containerStyle, images, names, size, testID } = props;\n  const {\n    theme: {\n      groupAvatar: { container, image },\n    },\n  } = useTheme();\n\n  const [imageError, setImageError] = useState(false);\n\n  /**\n   * [\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   * ]\n   */\n  const imagesOrNames = images || names || [];\n  const avatarImages = imagesOrNames.slice(0, 4).reduce((returnArray, currentImage, index) => {\n    const url = currentImage.startsWith('http')\n      ? currentImage\n      : `${randomImageBaseUrl}${\n          names\n            ? `?name=${getInitials(names[index])}&size=${\n                imagesOrNames.length <= 2 ? size : size / 2\n              }`\n            : ''\n        }`;\n    if (imagesOrNames.length <= 2) {\n      returnArray[0] = [\n        ...(returnArray[0] || []),\n        {\n          height: imagesOrNames.length === 1 ? size : size / 2,\n          name: names ? names[index] : '',\n          url,\n          width: size,\n        },\n      ];\n    } else {\n      if (index < 2) {\n        returnArray[0] = [\n          ...(returnArray[0] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: size / 2,\n          },\n        ];\n      } else {\n        returnArray[1] = [\n          ...(returnArray[1] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: imagesOrNames.length === 3 ? size : size / 2,\n          },\n        ];\n      }\n    }\n    return returnArray;\n  }, [] as { height: number; name: string; url: string; width: number }[][]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { borderRadius: size / 2, height: size, width: size },\n        container,\n        containerStyle,\n      ]}\n      testID={testID || 'group-avatar'}\n    >\n      {avatarImages.map((column, colIndex) => (\n        <View\n          key={`avatar-column-${colIndex}`}\n          style={[\n            styles.flex,\n            {\n              flexDirection: imagesOrNames.length === 2 ? 'column' : 'row',\n            },\n          ]}\n        >\n          {column.map(({ height, name, url, width }, rowIndex) => (\n            <Image\n              accessibilityLabel={testID || 'avatar-image'}\n              key={`avatar-${url}-${rowIndex}`}\n              onError={() => setImageError(true)}\n              source={{\n                uri:\n                  imageError || url.includes(randomSvgBaseUrl)\n                    ? url.includes(streamCDN)\n                      ? url\n                      : `${randomImageBaseUrl}${\n                          name ? `?name=${getInitials(name)}&size=${height}` : ''\n                        }`\n                    : getResizedImageUrl({\n                        height,\n                        url,\n                        width,\n                      }),\n              }}\n              style={[\n                image,\n                size\n                  ? {\n                      height,\n                      width,\n                    }\n                  : {},\n              ]}\n              testID={`group-avatar-image-${colIndex}-${rowIndex}`}\n            />\n          ))}\n        </View>\n      ))}\n    </View>\n  );\n};\n\nGroupAvatar.displayName = 'GroupAvatar{groupAvatar}';\n"]}
+{"version":3,"sources":["GroupAvatar.tsx"],"names":["randomImageBaseUrl","randomSvgBaseUrl","streamCDN","styles","StyleSheet","create","container","overflow","flex","getInitials","fullName","split","slice","map","name","charAt","join","GroupAvatar","props","containerStyle","images","names","size","testID","theme","groupAvatar","image","imageError","setImageError","imagesOrNames","avatarImages","reduce","returnArray","currentImage","index","url","startsWith","length","height","width","borderRadius","backgroundColor","column","colIndex","flexDirection","rowIndex","uri","includes","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';\n\nimport { useTheme } from '../../contexts/themeContext/ThemeContext';\nimport { useImageErrorHandler } from '../../hooks/useImageErrorHandler';\nimport { getResizedImageUrl } from '../../utils/getResizedImageUrl';\n\nconst randomImageBaseUrl = 'https://getstream.io/random_png/';\nconst randomSvgBaseUrl = 'https://getstream.io/random_svg/';\nconst streamCDN = 'stream-io-cdn.com';\n\nconst styles = StyleSheet.create({\n  container: {\n    overflow: 'hidden',\n  },\n  flex: { flex: 1 },\n});\n\nconst getInitials = (fullName: string) =>\n  fullName\n    .split(' ')\n    .slice(0, 2)\n    .map((name) => name.charAt(0))\n    .join(' ');\n\nexport type GroupAvatarProps = {\n  /** total size in pixels */\n  size: number;\n  containerStyle?: StyleProp<ViewStyle>;\n  /** image urls */\n  images?: string[];\n  /** name of the users, used for fallback */\n  names?: string[];\n  testID?: string;\n};\n\n/**\n * GroupAvatar - A round group of avatar images with fallbacks to users' initials\n */\nexport const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {\n  const { containerStyle, images, names, size, testID } = props;\n  const {\n    theme: {\n      groupAvatar: { container, image },\n    },\n  } = useTheme();\n\n  const { imageError, setImageError } = useImageErrorHandler();\n  /**\n   * [\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   *    [\n   *        { height: number; name: string; url: string; width: number },\n   *        { height: number; name: string; url: string; width: number },\n   *    ],\n   * ]\n   */\n  const imagesOrNames = images || names || [];\n  const avatarImages = imagesOrNames.slice(0, 4).reduce((returnArray, currentImage, index) => {\n    const url = currentImage.startsWith('http')\n      ? currentImage\n      : `${randomImageBaseUrl}${\n          names\n            ? `?name=${getInitials(names[index])}&size=${\n                imagesOrNames.length <= 2 ? size : size / 2\n              }`\n            : ''\n        }`;\n    if (imagesOrNames.length <= 2) {\n      returnArray[0] = [\n        ...(returnArray[0] || []),\n        {\n          height: imagesOrNames.length === 1 ? size : size / 2,\n          name: names ? names[index] : '',\n          url,\n          width: size,\n        },\n      ];\n    } else {\n      if (index < 2) {\n        returnArray[0] = [\n          ...(returnArray[0] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: size / 2,\n          },\n        ];\n      } else {\n        returnArray[1] = [\n          ...(returnArray[1] || []),\n          {\n            height: size / 2,\n            name: names ? names[index] : '',\n            url,\n            width: imagesOrNames.length === 3 ? size : size / 2,\n          },\n        ];\n      }\n    }\n    return returnArray;\n  }, [] as { height: number; name: string; url: string; width: number }[][]);\n\n  return (\n    <View\n      style={[\n        styles.container,\n        { borderRadius: size / 2, height: size, width: size },\n        container,\n        containerStyle,\n      ]}\n      testID={testID || 'group-avatar'}\n    >\n      {imageError ? (\n        <View\n          style={{\n            backgroundColor: '#ececec',\n            borderRadius: size / 2,\n            height: size,\n            width: size,\n          }}\n        />\n      ) : (\n        avatarImages.map((column, colIndex) => (\n          <View\n            key={`avatar-column-${colIndex}`}\n            style={[\n              styles.flex,\n              {\n                flexDirection: imagesOrNames.length === 2 ? 'column' : 'row',\n              },\n            ]}\n          >\n            {column.map(({ height, name, url, width }, rowIndex) => (\n              <Image\n                accessibilityLabel={testID || 'avatar-image'}\n                key={`avatar-${url}-${rowIndex}`}\n                onError={() => setImageError(true)}\n                source={{\n                  uri:\n                    imageError || url.includes(randomSvgBaseUrl)\n                      ? url.includes(streamCDN)\n                        ? url\n                        : `${randomImageBaseUrl}${\n                            name ? `?name=${getInitials(name)}&size=${height}` : ''\n                          }`\n                      : getResizedImageUrl({\n                          height,\n                          url,\n                          width,\n                        }),\n                }}\n                style={[\n                  image,\n                  size\n                    ? {\n                        backgroundColor: '#ececec',\n                        height,\n                        width,\n                      }\n                    : {},\n                ]}\n                testID={`group-avatar-image-${colIndex}-${rowIndex}`}\n              />\n            ))}\n          </View>\n        ))\n      )}\n    </View>\n  );\n};\n\nGroupAvatar.displayName = 'GroupAvatar{groupAvatar}';\n"]}