stream-chat-react-native-core 8.13.7 → 9.0.0-beta.10

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

@@ -18,7 +18,9 @@ var _MessagesContext = require("../../contexts/messagesContext/MessagesContext")
 var _OverlayContext = require("../../contexts/overlayContext/OverlayContext");
 var _ThemeContext = require("../../contexts/themeContext/ThemeContext");
 var _useLoadingImage2 = require("../../hooks/useLoadingImage");
+var _useStableCallback = require("../../hooks/useStableCallback");
 var _native = require("../../native");
+var _theme = require("../../theme");
 var _types = require("../../types/types");
 var _utils = require("../../utils/utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -29,28 +31,24 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var GalleryWithContext = function GalleryWithContext(props) {
   var additionalPressableProps = props.additionalPressableProps,
     alignment = props.alignment,
-    groupStyles = props.groupStyles,
-    hasThreadReplies = props.hasThreadReplies,
+    imageGalleryStateStore = props.imageGalleryStateStore,
     ImageLoadingFailedIndicator = props.ImageLoadingFailedIndicator,
     ImageLoadingIndicator = props.ImageLoadingIndicator,
-    ImageReloadIndicator = props.ImageReloadIndicator,
     images = props.images,
-    legacyImageViewerSwipeBehaviour = props.legacyImageViewerSwipeBehaviour,
     message = props.message,
     onLongPress = props.onLongPress,
     onPress = props.onPress,
     onPressIn = props.onPressIn,
     preventPress = props.preventPress,
-    setMessages = props.setMessages,
     setOverlay = props.setOverlay,
-    setSelectedMessage = props.setSelectedMessage,
-    threadList = props.threadList,
     videos = props.videos,
-    VideoThumbnail = props.VideoThumbnail;
+    VideoThumbnail = props.VideoThumbnail,
+    _props$messageHasOnly = props.messageHasOnlyOneMedia,
+    messageHasOnlyOneMedia = _props$messageHasOnly === void 0 ? false : _props$messageHasOnly;
   var _useChatConfigContext = (0, _ChatConfigContext.useChatConfigContext)(),
     resizableCDNHosts = _useChatConfigContext.resizableCDNHosts;
   var _useTheme = (0, _ThemeContext.useTheme)(),
-    _useTheme$theme$messa = _useTheme.theme.messageSimple.gallery,
+    _useTheme$theme$messa = _useTheme.theme.messageItemView.gallery,
     galleryContainer = _useTheme$theme$messa.galleryContainer,
     galleryItemColumn = _useTheme$theme$messa.galleryItemColumn,
     gridHeight = _useTheme$theme$messa.gridHeight,
@@ -59,6 +57,7 @@ var GalleryWithContext = function GalleryWithContext(props) {
     maxWidth = _useTheme$theme$messa.maxWidth,
     minHeight = _useTheme$theme$messa.minHeight,
     minWidth = _useTheme$theme$messa.minWidth;
+  var styles = useStyles();
   var sizeConfig = {
     gridHeight: gridHeight,
     gridWidth: gridWidth,
@@ -89,48 +88,48 @@ var GalleryWithContext = function GalleryWithContext(props) {
   }
   var numOfColumns = thumbnailGrid.length;
   return (0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.galleryContainer, {
+    style: [styles.container, {
       flexDirection: invertedDirections ? 'column' : 'row',
-      height: height,
-      width: width
+      alignSelf: alignment === 'right' ? 'flex-end' : 'flex-start'
+    }, imagesAndVideos.length !== 1 ? {
+      width: gridWidth,
+      height: gridHeight
+    } : {
+      minHeight: height,
+      minWidth: width
     }, galleryContainer],
     testID: "gallery-container",
     children: thumbnailGrid.map(function (rows, colIndex) {
       var numOfRows = rows.length;
       return (0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [{
+        style: [styles.galleryItemColumn, {
           flexDirection: invertedDirections ? 'row' : 'column'
         }, galleryItemColumn],
         testID: `gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`,
         children: rows.map(function (thumbnail, rowIndex) {
           var borderRadius = (0, _getGalleryImageBorderRadius.getGalleryImageBorderRadius)({
-            alignment: alignment,
             colIndex: colIndex,
-            groupStyles: groupStyles,
-            hasThreadReplies: hasThreadReplies,
             height: height,
             invertedDirections: invertedDirections,
-            messageText: message == null ? void 0 : message.text,
             numOfColumns: numOfColumns,
             numOfRows: numOfRows,
             rowIndex: rowIndex,
             sizeConfig: sizeConfig,
-            threadList: threadList,
-            width: width
+            width: width,
+            messageHasOnlyOneMedia: messageHasOnlyOneMedia
           });
-          if (message === undefined) {
+          if (!message) {
             return null;
           }
           return (0, _jsxRuntime.jsx)(GalleryThumbnail, {
             additionalPressableProps: additionalPressableProps,
             borderRadius: borderRadius,
             colIndex: colIndex,
+            imageGalleryStateStore: imageGalleryStateStore,
             ImageLoadingFailedIndicator: ImageLoadingFailedIndicator,
             ImageLoadingIndicator: ImageLoadingIndicator,
-            ImageReloadIndicator: ImageReloadIndicator,
             imagesAndVideos: imagesAndVideos,
             invertedDirections: invertedDirections || false,
-            legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
             message: message,
             numOfColumns: numOfColumns,
             numOfRows: numOfRows,
@@ -139,9 +138,7 @@ var GalleryWithContext = function GalleryWithContext(props) {
             onPressIn: onPressIn,
             preventPress: preventPress,
             rowIndex: rowIndex,
-            setMessages: setMessages,
             setOverlay: setOverlay,
-            setSelectedMessage: setSelectedMessage,
             thumbnail: thumbnail,
             VideoThumbnail: VideoThumbnail
           }, rowIndex);
@@ -154,12 +151,11 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
   var additionalPressableProps = _ref.additionalPressableProps,
     borderRadius = _ref.borderRadius,
     colIndex = _ref.colIndex,
+    imageGalleryStateStore = _ref.imageGalleryStateStore,
     ImageLoadingFailedIndicator = _ref.ImageLoadingFailedIndicator,
     ImageLoadingIndicator = _ref.ImageLoadingIndicator,
-    ImageReloadIndicator = _ref.ImageReloadIndicator,
     imagesAndVideos = _ref.imagesAndVideos,
     invertedDirections = _ref.invertedDirections,
-    legacyImageViewerSwipeBehaviour = _ref.legacyImageViewerSwipeBehaviour,
     message = _ref.message,
     numOfColumns = _ref.numOfColumns,
     numOfRows = _ref.numOfRows,
@@ -168,38 +164,30 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     _onPressIn = _ref.onPressIn,
     preventPress = _ref.preventPress,
     rowIndex = _ref.rowIndex,
-    setMessages = _ref.setMessages,
     setOverlay = _ref.setOverlay,
-    setSelectedMessage = _ref.setSelectedMessage,
     thumbnail = _ref.thumbnail,
     VideoThumbnail = _ref.VideoThumbnail;
   var _useTheme2 = (0, _ThemeContext.useTheme)(),
     _useTheme2$theme = _useTheme2.theme,
-    overlay = _useTheme2$theme.colors.overlay,
-    _useTheme2$theme$mess = _useTheme2$theme.messageSimple.gallery,
+    _useTheme2$theme$mess = _useTheme2$theme.messageItemView.gallery,
     image = _useTheme2$theme$mess.image,
     imageBorderRadius = _useTheme2$theme$mess.imageBorderRadius,
     imageContainer = _useTheme2$theme$mess.imageContainer,
-    imageContainerStyle = _useTheme2$theme$mess.imageContainerStyle,
     moreImagesContainer = _useTheme2$theme$mess.moreImagesContainer,
-    moreImagesText = _useTheme2$theme$mess.moreImagesText;
+    moreImagesText = _useTheme2$theme$mess.moreImagesText,
+    semantics = _useTheme2$theme.semantics;
   var _useTranslationContex = (0, _contexts.useTranslationContext)(),
     t = _useTranslationContex.t;
+  var styles = useStyles();
   var openImageViewer = function openImageViewer() {
-    if (!legacyImageViewerSwipeBehaviour && message) {
-      setMessages([message]);
-      setSelectedMessage({
-        messageId: message.id,
-        url: thumbnail.url
-      });
-      setOverlay('gallery');
-    } else if (legacyImageViewerSwipeBehaviour) {
-      setSelectedMessage({
-        messageId: message == null ? void 0 : message.id,
-        url: thumbnail.url
-      });
-      setOverlay('gallery');
+    if (!message) {
+      return;
     }
+    imageGalleryStateStore.openImageGallery({
+      messages: [message],
+      selectedAttachmentUrl: thumbnail.url
+    });
+    setOverlay('gallery');
   };
   var defaultOnPress = function defaultOnPress() {
     if (thumbnail.url) {
@@ -250,32 +238,24 @@ var GalleryThumbnail = function GalleryThumbnail(_ref) {
     style: function style(_ref2) {
       var pressed = _ref2.pressed;
       return [styles.imageContainer, {
-        height: thumbnail.height,
         opacity: pressed ? 0.8 : 1,
-        width: thumbnail.width
+        flex: thumbnail.flex
       }, imageContainer];
     },
     testID: `gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}-item-${rowIndex}`
   }, additionalPressableProps, {
     children: [thumbnail.type === _types.FileTypes.Video ? (0, _jsxRuntime.jsx)(VideoThumbnail, {
-      style: [imageBorderRadius != null ? imageBorderRadius : borderRadius, {
-        height: thumbnail.height - 1,
-        width: thumbnail.width - 1
-      }, image],
+      style: [styles.image, imageBorderRadius != null ? imageBorderRadius : borderRadius, image],
       thumb_url: thumbnail.thumb_url
-    }) : (0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [styles.imageContainerStyle, imageContainerStyle],
-      children: (0, _jsxRuntime.jsx)(GalleryImageThumbnail, {
-        borderRadius: imageBorderRadius != null ? imageBorderRadius : borderRadius,
-        ImageLoadingFailedIndicator: ImageLoadingFailedIndicator,
-        ImageLoadingIndicator: ImageLoadingIndicator,
-        ImageReloadIndicator: ImageReloadIndicator,
-        thumbnail: thumbnail
-      })
+    }) : (0, _jsxRuntime.jsx)(GalleryImageThumbnail, {
+      borderRadius: imageBorderRadius != null ? imageBorderRadius : borderRadius,
+      ImageLoadingFailedIndicator: ImageLoadingFailedIndicator,
+      ImageLoadingIndicator: ImageLoadingIndicator,
+      thumbnail: thumbnail
     }), colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? (0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [_reactNative.StyleSheet.absoluteFillObject, styles.moreImagesContainer, {
-        backgroundColor: overlay
-      }, moreImagesContainer],
+        backgroundColor: semantics.backgroundCoreOverlayDark
+      }, borderRadius, moreImagesContainer],
       children: (0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.moreImagesText, moreImagesText],
         children: String(t('+{{count}}', {
@@ -289,7 +269,6 @@ var GalleryImageThumbnail = function GalleryImageThumbnail(_ref3) {
   var borderRadius = _ref3.borderRadius,
     ImageLoadingFailedIndicator = _ref3.ImageLoadingFailedIndicator,
     ImageLoadingIndicator = _ref3.ImageLoadingIndicator,
-    ImageReloadIndicator = _ref3.ImageReloadIndicator,
     thumbnail = _ref3.thumbnail;
   var _useLoadingImage = (0, _useLoadingImage2.useLoadingImage)(),
     isLoadingImage = _useLoadingImage.isLoadingImage,
@@ -298,73 +277,57 @@ var GalleryImageThumbnail = function GalleryImageThumbnail(_ref3) {
     setLoadingImage = _useLoadingImage.setLoadingImage,
     setLoadingImageError = _useLoadingImage.setLoadingImageError;
   var _useTheme3 = (0, _ThemeContext.useTheme)(),
-    gallery = _useTheme3.theme.messageSimple.gallery;
+    gallery = _useTheme3.theme.messageItemView.gallery;
+  var styles = useStyles();
+  var onLoadStart = (0, _useStableCallback.useStableCallback)(function () {
+    setLoadingImageError(false);
+    setLoadingImage(true);
+  });
+  var onLoad = (0, _useStableCallback.useStableCallback)(function () {
+    setTimeout(function () {
+      setLoadingImage(false);
+      setLoadingImageError(false);
+    }, 0);
+  });
+  var onError = (0, _useStableCallback.useStableCallback)(function (_ref4) {
+    var error = _ref4.nativeEvent.error;
+    console.warn(error);
+    setLoadingImage(false);
+    setLoadingImageError(true);
+  });
   return (0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [{
-      height: thumbnail.height - 1,
-      width: thumbnail.width - 1
-    }, gallery.thumbnail],
-    children: isLoadingImageError ? (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-      children: [(0, _jsxRuntime.jsx)(ImageLoadingFailedIndicator, {
-        style: styles.imageLoadingErrorIndicatorStyle
-      }), (0, _jsxRuntime.jsx)(ImageReloadIndicator, {
-        onReloadImage: onReloadImage,
-        style: styles.imageReloadContainerStyle
-      })]
+    style: [styles.image, borderRadius],
+    children: isLoadingImageError ? (0, _jsxRuntime.jsx)(ImageLoadingFailedIndicator, {
+      onReloadImage: onReloadImage
     }) : (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [(0, _jsxRuntime.jsx)(_GalleryImage.GalleryImage, {
-        onError: function onError(_ref4) {
-          var error = _ref4.nativeEvent.error;
-          console.warn(error);
-          setLoadingImage(false);
-          setLoadingImageError(true);
-        },
-        onLoadEnd: function onLoadEnd() {
-          return setTimeout(function () {
-            return setLoadingImage(false);
-          }, 0);
-        },
-        onLoadStart: function onLoadStart() {
-          return setLoadingImage(true);
-        },
+        onError: onError,
+        onLoad: onLoad,
+        onLoadStart: onLoadStart,
         resizeMode: thumbnail.resizeMode,
-        style: [borderRadius, {
-          height: thumbnail.height - 1,
-          width: thumbnail.width - 1
-        }, gallery.image],
+        style: gallery.image,
         uri: thumbnail.url
-      }), isLoadingImage && (0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: styles.imageLoadingIndicatorContainer,
-        children: (0, _jsxRuntime.jsx)(ImageLoadingIndicator, {
-          style: styles.imageLoadingIndicatorStyle
-        })
-      })]
+      }), isLoadingImage ? (0, _jsxRuntime.jsx)(ImageLoadingIndicator, {}) : null]
     })
   });
 };
 var areEqual = function areEqual(prevProps, nextProps) {
-  var prevGroupStyles = prevProps.groupStyles,
-    prevHasThreadReplies = prevProps.hasThreadReplies,
+  var prevAlignment = prevProps.alignment,
     prevImages = prevProps.images,
     prevMessage = prevProps.message,
     prevMyMessageTheme = prevProps.myMessageTheme,
     prevVideos = prevProps.videos;
-  var nextGroupStyles = nextProps.groupStyles,
-    nextHasThreadReplies = nextProps.hasThreadReplies,
+  var nextAlignment = nextProps.alignment,
     nextImages = nextProps.images,
     nextMessage = nextProps.message,
     nextMyMessageTheme = nextProps.myMessageTheme,
     nextVideos = nextProps.videos;
-  var messageEqual = (prevMessage == null ? void 0 : prevMessage.id) === (nextMessage == null ? void 0 : nextMessage.id) && `${prevMessage == null ? void 0 : prevMessage.updated_at}` === `${nextMessage == null ? void 0 : nextMessage.updated_at}`;
-  if (!messageEqual) {
+  var alignmentEqual = prevAlignment === nextAlignment;
+  if (!alignmentEqual) {
     return false;
   }
-  var groupStylesEqual = prevGroupStyles.length === nextGroupStyles.length && prevGroupStyles[0] === nextGroupStyles[0];
-  if (!groupStylesEqual) {
-    return false;
-  }
-  var hasThreadRepliesEqual = prevHasThreadReplies === nextHasThreadReplies;
-  if (!hasThreadRepliesEqual) {
+  var messageEqual = (prevMessage == null ? void 0 : prevMessage.id) === (nextMessage == null ? void 0 : nextMessage.id) && `${prevMessage == null ? void 0 : prevMessage.updated_at}` === `${nextMessage == null ? void 0 : nextMessage.updated_at}`;
+  if (!messageEqual) {
     return false;
   }
   var imagesEqual = prevImages.length === nextImages.length && prevImages.every(function (image, index) {
@@ -387,13 +350,11 @@ var areEqual = function areEqual(prevProps, nextProps) {
 };
 var MemoizedGallery = _react.default.memo(GalleryWithContext, areEqual);
 var Gallery = exports.Gallery = function Gallery(props) {
-  var propAdditionalPressableProps = props.additionalPressableProps,
-    propAlignment = props.alignment,
-    propGroupStyles = props.groupStyles,
-    hasThreadReplies = props.hasThreadReplies,
+  var _ref5, _ref6;
+  var propAlignment = props.alignment,
+    propAdditionalPressableProps = props.additionalPressableProps,
     PropImageLoadingFailedIndicator = props.ImageLoadingFailedIndicator,
     PropImageLoadingIndicator = props.ImageLoadingIndicator,
-    PropImageReloadIndicator = props.ImageReloadIndicator,
     propImages = props.images,
     propMessage = props.message,
     propMyMessageTheme = props.myMessageTheme,
@@ -402,133 +363,135 @@ var Gallery = exports.Gallery = function Gallery(props) {
     propOnPressIn = props.onPressIn,
     propPreventPress = props.preventPress,
     propSetOverlay = props.setOverlay,
-    propSetSelectedMessage = props.setSelectedMessage,
-    propThreadList = props.threadList,
     propVideos = props.videos,
-    PropVideoThumbnail = props.VideoThumbnail;
+    PropVideoThumbnail = props.VideoThumbnail,
+    propMessageContentOrder = props.messageContentOrder;
   var _useImageGalleryConte = (0, _ImageGalleryContext.useImageGalleryContext)(),
-    setMessages = _useImageGalleryConte.setMessages,
-    contextSetSelectedMessage = _useImageGalleryConte.setSelectedMessage;
+    imageGalleryStateStore = _useImageGalleryConte.imageGalleryStateStore;
   var _useMessageContext = (0, _MessageContext.useMessageContext)(),
     contextAlignment = _useMessageContext.alignment,
-    contextGroupStyles = _useMessageContext.groupStyles,
     contextImages = _useMessageContext.images,
     contextMessage = _useMessageContext.message,
     contextOnLongPress = _useMessageContext.onLongPress,
     contextOnPress = _useMessageContext.onPress,
     contextOnPressIn = _useMessageContext.onPressIn,
     contextPreventPress = _useMessageContext.preventPress,
-    contextThreadList = _useMessageContext.threadList,
-    contextVideos = _useMessageContext.videos;
+    contextVideos = _useMessageContext.videos,
+    contextMessageContentOrder = _useMessageContext.messageContentOrder;
   var _useMessagesContext = (0, _MessagesContext.useMessagesContext)(),
     contextAdditionalPressableProps = _useMessagesContext.additionalPressableProps,
     ContextImageLoadingFailedIndicator = _useMessagesContext.ImageLoadingFailedIndicator,
     ContextImageLoadingIndicator = _useMessagesContext.ImageLoadingIndicator,
-    ContextImageReloadIndicator = _useMessagesContext.ImageReloadIndicator,
-    legacyImageViewerSwipeBehaviour = _useMessagesContext.legacyImageViewerSwipeBehaviour,
     contextMyMessageTheme = _useMessagesContext.myMessageTheme,
     ContextVideoThumnbnail = _useMessagesContext.VideoThumbnail;
   var _useOverlayContext = (0, _OverlayContext.useOverlayContext)(),
     contextSetOverlay = _useOverlayContext.setOverlay;
-  var images = propImages || contextImages;
-  var videos = propVideos || contextVideos;
+  var images = (_ref5 = propImages != null ? propImages : contextImages) != null ? _ref5 : [];
+  var videos = (_ref6 = propVideos != null ? propVideos : contextVideos) != null ? _ref6 : [];
+  var imagesAndVideos = [].concat((0, _toConsumableArray2.default)(images), (0, _toConsumableArray2.default)(videos));
   var message = propMessage || contextMessage;
+  var alignment = propAlignment || contextAlignment;
   if (!images.length && !videos.length) {
     return null;
   }
   var additionalPressableProps = propAdditionalPressableProps || contextAdditionalPressableProps;
-  var alignment = propAlignment || contextAlignment;
-  var groupStyles = propGroupStyles || contextGroupStyles;
   var onLongPress = propOnLongPress || contextOnLongPress;
   var onPressIn = propOnPressIn || contextOnPressIn;
   var onPress = propOnPress || contextOnPress;
   var preventPress = typeof propPreventPress === 'boolean' ? propPreventPress : contextPreventPress;
-  var setSelectedMessage = propSetSelectedMessage || contextSetSelectedMessage;
   var setOverlay = propSetOverlay || contextSetOverlay;
-  var threadList = propThreadList || contextThreadList;
   var VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
   var ImageLoadingFailedIndicator = PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
   var ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
-  var ImageReloadIndicator = PropImageReloadIndicator || ContextImageReloadIndicator;
   var myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
+  var messageContentOrder = propMessageContentOrder || contextMessageContentOrder;
+  var messageHasOnlyOneMedia = (messageContentOrder == null ? void 0 : messageContentOrder.length) === 1 && (messageContentOrder == null ? void 0 : messageContentOrder.includes('gallery')) && imagesAndVideos.length === 1;
   return (0, _jsxRuntime.jsx)(MemoizedGallery, {
     additionalPressableProps: additionalPressableProps,
     alignment: alignment,
     channelId: message == null ? void 0 : message.cid,
-    groupStyles: groupStyles,
-    hasThreadReplies: hasThreadReplies || !!(message != null && message.reply_count),
+    imageGalleryStateStore: imageGalleryStateStore,
     ImageLoadingFailedIndicator: ImageLoadingFailedIndicator,
     ImageLoadingIndicator: ImageLoadingIndicator,
-    ImageReloadIndicator: ImageReloadIndicator,
     images: images,
-    legacyImageViewerSwipeBehaviour: legacyImageViewerSwipeBehaviour,
     message: message,
     myMessageTheme: myMessageTheme,
     onLongPress: onLongPress,
     onPress: onPress,
     onPressIn: onPressIn,
     preventPress: preventPress,
-    setMessages: setMessages,
     setOverlay: setOverlay,
-    setSelectedMessage: setSelectedMessage,
-    threadList: threadList,
     videos: videos,
-    VideoThumbnail: VideoThumbnail
+    VideoThumbnail: VideoThumbnail,
+    messageHasOnlyOneMedia: messageHasOnlyOneMedia,
+    messageContentOrder: messageContentOrder
   });
 };
-var styles = _reactNative.StyleSheet.create({
-  errorTextSize: {
-    fontSize: 10
-  },
-  galleryContainer: {
-    borderTopLeftRadius: 13,
-    borderTopRightRadius: 13,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    overflow: 'hidden'
-  },
-  imageContainer: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'center',
-    padding: 1
-  },
-  imageContainerStyle: {
-    alignItems: 'center',
-    flex: 1,
-    justifyContent: 'center'
-  },
-  imageLoadingErrorIndicatorStyle: {
-    bottom: 4,
-    left: 4,
-    position: 'absolute'
-  },
-  imageLoadingIndicatorContainer: {
-    height: '100%',
-    justifyContent: 'center',
-    position: 'absolute',
-    width: '100%'
-  },
-  imageLoadingIndicatorStyle: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'absolute'
-  },
-  imageReloadContainerStyle: Object.assign({}, _reactNative.StyleSheet.absoluteFillObject, {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }),
-  moreImagesContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-    margin: 1
-  },
-  moreImagesText: {
-    color: '#FFFFFF',
-    fontSize: 26,
-    fontWeight: '700'
-  }
-});
-Gallery.displayName = 'Gallery{messageSimple{gallery}}';
+var useStyles = function useStyles() {
+  var _useTheme4 = (0, _ThemeContext.useTheme)(),
+    semantics = _useTheme4.theme.semantics;
+  var _useMessageContext2 = (0, _MessageContext.useMessageContext)(),
+    isMyMessage = _useMessageContext2.isMyMessage;
+  return (0, _react.useMemo)(function () {
+    return _reactNative.StyleSheet.create({
+      errorTextSize: {
+        fontSize: _theme.primitives.typographyFontSizeXs,
+        lineHeight: _theme.primitives.typographyLineHeightTight,
+        fontWeight: _theme.primitives.typographyFontWeightRegular,
+        color: semantics.accentError
+      },
+      galleryItemColumn: {
+        gap: _theme.primitives.spacingXxs,
+        flex: 1
+      },
+      container: {
+        flexDirection: 'row',
+        gap: _theme.primitives.spacingXxs
+      },
+      imageContainer: {},
+      image: {
+        flex: 1,
+        backgroundColor: isMyMessage ? semantics.chatBgAttachmentOutgoing : semantics.chatBgAttachmentIncoming,
+        overflow: 'hidden'
+      },
+      imageLoadingErrorIndicatorStyle: Object.assign({}, _reactNative.StyleSheet.absoluteFillObject, {
+        alignItems: 'center',
+        justifyContent: 'center'
+      }),
+      imageLoadingIndicatorContainer: {
+        height: '100%',
+        justifyContent: 'center',
+        position: 'absolute',
+        width: '100%'
+      },
+      imageLoadingIndicatorStyle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute'
+      },
+      imageReloadContainerStyle: Object.assign({}, _reactNative.StyleSheet.absoluteFillObject, {
+        alignItems: 'center',
+        justifyContent: 'center'
+      }),
+      moreImagesContainer: {
+        alignItems: 'center',
+        justifyContent: 'center'
+      },
+      moreImagesText: {
+        color: semantics.textOnAccent,
+        fontSize: _theme.primitives.typographyFontSize2xl,
+        lineHeight: _theme.primitives.typographyLineHeightRelaxed,
+        fontWeight: _theme.primitives.typographyFontWeightSemiBold
+      },
+      imageLoadingErrorContainer: Object.assign({}, _reactNative.StyleSheet.absoluteFillObject, {
+        alignItems: 'center',
+        justifyContent: 'center'
+      }),
+      imageLoadingErrorWrapper: Object.assign({}, _reactNative.StyleSheet.absoluteFillObject, {
+        overflow: 'hidden'
+      })
+    });
+  }, [semantics, isMyMessage]);
+};
+Gallery.displayName = 'Gallery{messageItemView{gallery}}';
 //# sourceMappingURL=Gallery.js.map