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

package/src/components/Attachment/Gallery.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Pressable, StyleSheet, Text, View } from 'react-native';
+import { ImageErrorEvent, Pressable, StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
@@ -7,7 +7,10 @@ import { GalleryImage } from './GalleryImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
-import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
+import {
+  GalleryImageBorderRadius,
+  getGalleryImageBorderRadius,
+} from './utils/getGalleryImageBorderRadius';
 
 import { openUrlSafely } from './utils/openUrlSafely';
 
@@ -32,82 +35,61 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 
 import { useLoadingImage } from '../../hooks/useLoadingImage';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { isVideoPlayerAvailable } from '../../native';
+import { primitives } from '../../theme';
 import { FileTypes } from '../../types/types';
 import { getUrlWithoutParams } from '../../utils/utils';
 
-export type GalleryPropsWithContext = Pick<
-  ImageGalleryContextValue,
-  'setSelectedMessage' | 'setMessages'
-> &
+export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalleryStateStore'> &
   Pick<
     MessageContextValue,
     | 'alignment'
-    | 'groupStyles'
     | 'images'
     | 'videos'
     | 'onLongPress'
     | 'onPress'
     | 'onPressIn'
     | 'preventPress'
-    | 'threadList'
+    | 'message'
+    | 'messageContentOrder'
   > &
   Pick<
     MessagesContextValue,
     | 'additionalPressableProps'
-    | 'legacyImageViewerSwipeBehaviour'
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
-    | 'ImageReloadIndicator'
     | 'myMessageTheme'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
-    hasThreadReplies?: boolean;
-    /**
-     * `message` prop has been introduced here as part of `legacyImageViewerSwipeBehaviour` prop.
-     * https://github.com/GetStream/stream-chat-react-native/commit/d5eac6193047916f140efe8e396a671675c9a63f
-     * messageId and messageText may seem redundant now, but to avoid breaking change as part
-     * of minor release, we are keeping those props.
-     *
-     * Also `message` type should ideally be imported from MessageContextValue and not be explicitely mentioned
-     * here, but due to some circular dependencies within the SDK, it causes "excessive deep nesting" issue with
-     * typescript within Channel component. We should take it as a mini-project and resolve all these circular imports.
-     *
-     * TODO: Fix circular dependencies of imports
-     */
-    message?: LocalMessage;
+    messageHasOnlyOneMedia: boolean;
   };
 
 const GalleryWithContext = (props: GalleryPropsWithContext) => {
   const {
     additionalPressableProps,
     alignment,
-    groupStyles,
-    hasThreadReplies,
+    imageGalleryStateStore,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
-    ImageReloadIndicator,
     images,
-    legacyImageViewerSwipeBehaviour,
     message,
     onLongPress,
     onPress,
     onPressIn,
     preventPress,
-    setMessages,
     setOverlay,
-    setSelectedMessage,
-    threadList,
     videos,
     VideoThumbnail,
+    messageHasOnlyOneMedia = false,
   } = props;
 
   const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
-      messageSimple: {
+      messageItemView: {
         gallery: {
           galleryContainer,
           galleryItemColumn,
@@ -122,6 +104,8 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     },
   } = useTheme();
 
+  const styles = useStyles();
+
   const sizeConfig = {
     gridHeight,
     gridWidth,
@@ -155,12 +139,17 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
   return (
     <View
       style={[
-        styles.galleryContainer,
+        styles.container,
         {
           flexDirection: invertedDirections ? 'column' : 'row',
-          height,
-          width,
+          alignSelf: alignment === 'right' ? 'flex-end' : 'flex-start',
         },
+        imagesAndVideos.length !== 1
+          ? { width: gridWidth, height: gridHeight }
+          : {
+              minHeight: height,
+              minWidth: width,
+            },
         galleryContainer,
       ]}
       testID='gallery-container'
@@ -171,6 +160,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
           <View
             key={`gallery-${invertedDirections ? 'row' : 'column'}-${colIndex}`}
             style={[
+              styles.galleryItemColumn,
               {
                 flexDirection: invertedDirections ? 'row' : 'column',
               },
@@ -180,22 +170,18 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
           >
             {rows.map((thumbnail, rowIndex) => {
               const borderRadius = getGalleryImageBorderRadius({
-                alignment,
                 colIndex,
-                groupStyles,
-                hasThreadReplies,
                 height,
                 invertedDirections,
-                messageText: message?.text,
                 numOfColumns,
                 numOfRows,
                 rowIndex,
                 sizeConfig,
-                threadList,
                 width,
+                messageHasOnlyOneMedia,
               });
 
-              if (message === undefined) {
+              if (!message) {
                 return null;
               }
 
@@ -204,13 +190,12 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                   additionalPressableProps={additionalPressableProps}
                   borderRadius={borderRadius}
                   colIndex={colIndex}
+                  imageGalleryStateStore={imageGalleryStateStore}
                   ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
                   ImageLoadingIndicator={ImageLoadingIndicator}
-                  ImageReloadIndicator={ImageReloadIndicator}
                   imagesAndVideos={imagesAndVideos}
                   invertedDirections={invertedDirections || false}
                   key={rowIndex}
-                  legacyImageViewerSwipeBehaviour={legacyImageViewerSwipeBehaviour}
                   message={message}
                   numOfColumns={numOfColumns}
                   numOfRows={numOfRows}
@@ -219,9 +204,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                   onPressIn={onPressIn}
                   preventPress={preventPress}
                   rowIndex={rowIndex}
-                  setMessages={setMessages}
                   setOverlay={setOverlay}
-                  setSelectedMessage={setSelectedMessage}
                   thumbnail={thumbnail}
                   VideoThumbnail={VideoThumbnail}
                 />
@@ -235,12 +218,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
 };
 
 type GalleryThumbnailProps = {
-  borderRadius: {
-    borderBottomLeftRadius: number;
-    borderBottomRightRadius: number;
-    borderTopLeftRadius: number;
-    borderTopRightRadius: number;
-  };
+  borderRadius: GalleryImageBorderRadius;
   colIndex: number;
   imagesAndVideos: Attachment[];
   invertedDirections: boolean;
@@ -252,13 +230,11 @@ type GalleryThumbnailProps = {
 } & Pick<
   MessagesContextValue,
   | 'additionalPressableProps'
-  | 'legacyImageViewerSwipeBehaviour'
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
-  | 'ImageReloadIndicator'
 > &
-  Pick<ImageGalleryContextValue, 'setSelectedMessage' | 'setMessages'> &
+  Pick<ImageGalleryContextValue, 'imageGalleryStateStore'> &
   Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<OverlayContextValue, 'setOverlay'>;
 
@@ -266,12 +242,11 @@ const GalleryThumbnail = ({
   additionalPressableProps,
   borderRadius,
   colIndex,
+  imageGalleryStateStore,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
-  ImageReloadIndicator,
   imagesAndVideos,
   invertedDirections,
-  legacyImageViewerSwipeBehaviour,
   message,
   numOfColumns,
   numOfRows,
@@ -280,41 +255,30 @@ const GalleryThumbnail = ({
   onPressIn,
   preventPress,
   rowIndex,
-  setMessages,
   setOverlay,
-  setSelectedMessage,
   thumbnail,
   VideoThumbnail,
 }: GalleryThumbnailProps) => {
   const {
     theme: {
-      colors: { overlay },
-      messageSimple: {
-        gallery: {
-          image,
-          imageBorderRadius,
-          imageContainer,
-          imageContainerStyle,
-          moreImagesContainer,
-          moreImagesText,
-        },
+      messageItemView: {
+        gallery: { image, imageBorderRadius, imageContainer, moreImagesContainer, moreImagesText },
       },
+      semantics,
     },
   } = useTheme();
   const { t } = useTranslationContext();
+  const styles = useStyles();
 
   const openImageViewer = () => {
-    if (!legacyImageViewerSwipeBehaviour && message) {
-      // Added if-else to keep the logic readable, instead of DRY.
-      // if - legacyImageViewerSwipeBehaviour is disabled
-      // else - legacyImageViewerSwipeBehaviour is enabled
-      setMessages([message]);
-      setSelectedMessage({ messageId: message.id, url: thumbnail.url });
-      setOverlay('gallery');
-    } else if (legacyImageViewerSwipeBehaviour) {
-      setSelectedMessage({ messageId: message?.id, url: thumbnail.url });
-      setOverlay('gallery');
+    if (!message) {
+      return;
     }
+    imageGalleryStateStore.openImageGallery({
+      messages: [message],
+      selectedAttachmentUrl: thumbnail.url,
+    });
+    setOverlay('gallery');
   };
 
   const defaultOnPress = () => {
@@ -366,9 +330,8 @@ const GalleryThumbnail = ({
       style={({ pressed }) => [
         styles.imageContainer,
         {
-          height: thumbnail.height,
           opacity: pressed ? 0.8 : 1,
-          width: thumbnail.width,
+          flex: thumbnail.flex,
         },
         imageContainer,
       ]}
@@ -377,33 +340,24 @@ const GalleryThumbnail = ({
     >
       {thumbnail.type === FileTypes.Video ? (
         <VideoThumbnail
-          style={[
-            imageBorderRadius ?? borderRadius,
-            {
-              height: thumbnail.height - 1,
-              width: thumbnail.width - 1,
-            },
-            image,
-          ]}
+          style={[styles.image, imageBorderRadius ?? borderRadius, image]}
           thumb_url={thumbnail.thumb_url}
         />
       ) : (
-        <View style={[styles.imageContainerStyle, imageContainerStyle]}>
-          <GalleryImageThumbnail
-            borderRadius={imageBorderRadius ?? borderRadius}
-            ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
-            ImageLoadingIndicator={ImageLoadingIndicator}
-            ImageReloadIndicator={ImageReloadIndicator}
-            thumbnail={thumbnail}
-          />
-        </View>
+        <GalleryImageThumbnail
+          borderRadius={imageBorderRadius ?? borderRadius}
+          ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
+          ImageLoadingIndicator={ImageLoadingIndicator}
+          thumbnail={thumbnail}
+        />
       )}
       {colIndex === numOfColumns - 1 && rowIndex === numOfRows - 1 && imagesAndVideos.length > 4 ? (
         <View
           style={[
             StyleSheet.absoluteFillObject,
             styles.moreImagesContainer,
-            { backgroundColor: overlay },
+            { backgroundColor: semantics.backgroundCoreOverlayDark },
+            borderRadius,
             moreImagesContainer,
           ]}
         >
@@ -420,15 +374,10 @@ const GalleryImageThumbnail = ({
   borderRadius,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
-  ImageReloadIndicator,
   thumbnail,
 }: Pick<
   GalleryThumbnailProps,
-  | 'ImageLoadingFailedIndicator'
-  | 'ImageLoadingIndicator'
-  | 'ImageReloadIndicator'
-  | 'thumbnail'
-  | 'borderRadius'
+  'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
 >) => {
   const {
     isLoadingImage,
@@ -440,54 +389,45 @@ const GalleryImageThumbnail = ({
 
   const {
     theme: {
-      messageSimple: { gallery },
+      messageItemView: { gallery },
     },
   } = useTheme();
 
+  const styles = useStyles();
+
+  const onLoadStart = useStableCallback(() => {
+    setLoadingImageError(false);
+    setLoadingImage(true);
+  });
+
+  const onLoad = useStableCallback(() => {
+    setTimeout(() => {
+      setLoadingImage(false);
+      setLoadingImageError(false);
+    }, 0);
+  });
+
+  const onError = useStableCallback(({ nativeEvent: { error } }: ImageErrorEvent) => {
+    console.warn(error);
+    setLoadingImage(false);
+    setLoadingImageError(true);
+  });
+
   return (
-    <View
-      style={[
-        {
-          height: thumbnail.height - 1,
-          width: thumbnail.width - 1,
-        },
-        gallery.thumbnail,
-      ]}
-    >
+    <View style={[styles.image, borderRadius]}>
       {isLoadingImageError ? (
-        <>
-          <ImageLoadingFailedIndicator style={styles.imageLoadingErrorIndicatorStyle} />
-          <ImageReloadIndicator
-            onReloadImage={onReloadImage}
-            style={styles.imageReloadContainerStyle}
-          />
-        </>
+        <ImageLoadingFailedIndicator onReloadImage={onReloadImage} />
       ) : (
         <>
           <GalleryImage
-            onError={({ nativeEvent: { error } }) => {
-              console.warn(error);
-              setLoadingImage(false);
-              setLoadingImageError(true);
-            }}
-            onLoadEnd={() => setTimeout(() => setLoadingImage(false), 0)}
-            onLoadStart={() => 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 && (
-            <View style={styles.imageLoadingIndicatorContainer}>
-              <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
-            </View>
-          )}
+          {isLoadingImage ? <ImageLoadingIndicator /> : null}
         </>
       )}
     </View>
@@ -496,22 +436,25 @@ const GalleryImageThumbnail = ({
 
 const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWithContext) => {
   const {
-    groupStyles: prevGroupStyles,
-    hasThreadReplies: prevHasThreadReplies,
+    alignment: prevAlignment,
     images: prevImages,
     message: prevMessage,
     myMessageTheme: prevMyMessageTheme,
     videos: prevVideos,
   } = prevProps;
   const {
-    groupStyles: nextGroupStyles,
-    hasThreadReplies: nextHasThreadReplies,
+    alignment: nextAlignment,
     images: nextImages,
     message: nextMessage,
     myMessageTheme: nextMyMessageTheme,
     videos: nextVideos,
   } = nextProps;
 
+  const alignmentEqual = prevAlignment === nextAlignment;
+  if (!alignmentEqual) {
+    return false;
+  }
+
   const messageEqual =
     prevMessage?.id === nextMessage?.id &&
     `${prevMessage?.updated_at}` === `${nextMessage?.updated_at}`;
@@ -519,17 +462,6 @@ const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWit
     return false;
   }
 
-  const groupStylesEqual =
-    prevGroupStyles.length === nextGroupStyles.length && prevGroupStyles[0] === nextGroupStyles[0];
-  if (!groupStylesEqual) {
-    return false;
-  }
-
-  const hasThreadRepliesEqual = prevHasThreadReplies === nextHasThreadReplies;
-  if (!hasThreadRepliesEqual) {
-    return false;
-  }
-
   const imagesEqual =
     prevImages.length === nextImages.length &&
     prevImages.every(
@@ -570,13 +502,10 @@ export type GalleryProps = Partial<GalleryPropsWithContext>;
  */
 export const Gallery = (props: GalleryProps) => {
   const {
-    additionalPressableProps: propAdditionalPressableProps,
     alignment: propAlignment,
-    groupStyles: propGroupStyles,
-    hasThreadReplies,
+    additionalPressableProps: propAdditionalPressableProps,
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
-    ImageReloadIndicator: PropImageReloadIndicator,
     images: propImages,
     message: propMessage,
     myMessageTheme: propMyMessageTheme,
@@ -585,61 +514,59 @@ export const Gallery = (props: GalleryProps) => {
     onPressIn: propOnPressIn,
     preventPress: propPreventPress,
     setOverlay: propSetOverlay,
-    setSelectedMessage: propSetSelectedMessage,
-    threadList: propThreadList,
     videos: propVideos,
     VideoThumbnail: PropVideoThumbnail,
+    messageContentOrder: propMessageContentOrder,
   } = props;
 
-  const { setMessages, setSelectedMessage: contextSetSelectedMessage } = useImageGalleryContext();
+  const { imageGalleryStateStore } = useImageGalleryContext();
   const {
     alignment: contextAlignment,
-    groupStyles: contextGroupStyles,
     images: contextImages,
     message: contextMessage,
     onLongPress: contextOnLongPress,
     onPress: contextOnPress,
     onPressIn: contextOnPressIn,
     preventPress: contextPreventPress,
-    threadList: contextThreadList,
     videos: contextVideos,
+    messageContentOrder: contextMessageContentOrder,
   } = useMessageContext();
   const {
     additionalPressableProps: contextAdditionalPressableProps,
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
-    ImageReloadIndicator: ContextImageReloadIndicator,
-    legacyImageViewerSwipeBehaviour,
     myMessageTheme: contextMyMessageTheme,
     VideoThumbnail: ContextVideoThumnbnail,
   } = useMessagesContext();
   const { setOverlay: contextSetOverlay } = useOverlayContext();
 
-  const images = propImages || contextImages;
-  const videos = propVideos || contextVideos;
+  const images = propImages ?? contextImages ?? [];
+  const videos = propVideos ?? contextVideos ?? [];
+  const imagesAndVideos = [...images, ...videos];
   const message = propMessage || contextMessage;
-
+  const alignment = propAlignment || contextAlignment;
   if (!images.length && !videos.length) {
     return null;
   }
 
   const additionalPressableProps = propAdditionalPressableProps || contextAdditionalPressableProps;
-  const alignment = propAlignment || contextAlignment;
-  const groupStyles = propGroupStyles || contextGroupStyles;
   const onLongPress = propOnLongPress || contextOnLongPress;
   const onPressIn = propOnPressIn || contextOnPressIn;
   const onPress = propOnPress || contextOnPress;
   const preventPress =
     typeof propPreventPress === 'boolean' ? propPreventPress : contextPreventPress;
-  const setSelectedMessage = propSetSelectedMessage || contextSetSelectedMessage;
   const setOverlay = propSetOverlay || contextSetOverlay;
-  const threadList = propThreadList || contextThreadList;
   const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
   const ImageLoadingFailedIndicator =
     PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
   const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
-  const ImageReloadIndicator = PropImageReloadIndicator || ContextImageReloadIndicator;
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
+  const messageContentOrder = propMessageContentOrder || contextMessageContentOrder;
+
+  const messageHasOnlyOneMedia =
+    messageContentOrder?.length === 1 &&
+    messageContentOrder?.includes('gallery') &&
+    imagesAndVideos.length === 1;
 
   return (
     <MemoizedGallery
@@ -647,74 +574,97 @@ export const Gallery = (props: GalleryProps) => {
         additionalPressableProps,
         alignment,
         channelId: message?.cid,
-        groupStyles,
-        hasThreadReplies: hasThreadReplies || !!message?.reply_count,
+        imageGalleryStateStore,
         ImageLoadingFailedIndicator,
         ImageLoadingIndicator,
-        ImageReloadIndicator,
         images,
-        legacyImageViewerSwipeBehaviour,
         message,
         myMessageTheme,
         onLongPress,
         onPress,
         onPressIn,
         preventPress,
-        setMessages,
         setOverlay,
-        setSelectedMessage,
-        threadList,
         videos,
         VideoThumbnail,
+        messageHasOnlyOneMedia,
+        messageContentOrder,
       }}
     />
   );
 };
 
-const styles = 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: {
-    ...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}}';
+const useStyles = () => {
+  const {
+    theme: { semantics },
+  } = useTheme();
+  const { isMyMessage } = useMessageContext();
+  return useMemo(() => {
+    return StyleSheet.create({
+      errorTextSize: {
+        fontSize: primitives.typographyFontSizeXs,
+        lineHeight: primitives.typographyLineHeightTight,
+        fontWeight: primitives.typographyFontWeightRegular,
+        color: semantics.accentError,
+      },
+      galleryItemColumn: {
+        gap: primitives.spacingXxs,
+        flex: 1,
+      },
+      container: {
+        flexDirection: 'row',
+        gap: primitives.spacingXxs,
+      },
+      imageContainer: {},
+      image: {
+        flex: 1,
+        backgroundColor: isMyMessage
+          ? semantics.chatBgAttachmentOutgoing
+          : semantics.chatBgAttachmentIncoming,
+        overflow: 'hidden',
+      },
+      imageLoadingErrorIndicatorStyle: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      imageLoadingIndicatorContainer: {
+        height: '100%',
+        justifyContent: 'center',
+        position: 'absolute',
+        width: '100%',
+      },
+      imageLoadingIndicatorStyle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        position: 'absolute',
+      },
+      imageReloadContainerStyle: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      moreImagesContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      moreImagesText: {
+        color: semantics.textOnAccent,
+        fontSize: primitives.typographyFontSize2xl,
+        lineHeight: primitives.typographyLineHeightRelaxed,
+        fontWeight: primitives.typographyFontWeightSemiBold,
+      },
+      imageLoadingErrorContainer: {
+        ...StyleSheet.absoluteFillObject,
+        alignItems: 'center',
+        justifyContent: 'center',
+      },
+      imageLoadingErrorWrapper: {
+        ...StyleSheet.absoluteFillObject,
+        overflow: 'hidden',
+      },
+    });
+  }, [semantics, isMyMessage]);
+};
+
+Gallery.displayName = 'Gallery{messageItemView{gallery}}';