stream-chat-react-native-core 4.7.3 → 4.9.0-beta.1

package/lib/typescript/contexts/messagesContext/MessagesContext.d.ts

@@ -1,5 +1,7 @@
 import React, { PropsWithChildren } from 'react';
 import type { TouchableOpacityProps } from 'react-native';
+import type { ImageLoadingFailedIndicatorProps } from 'src/components/Attachment/ImageLoadingFailedIndicator';
+import type { ImageLoadingIndicatorProps } from 'src/components/Attachment/ImageLoadingIndicator';
 import type { MessagePinnedHeaderProps } from 'src/components/Message/MessageSimple/MessagePinnedHeader';
 import type { Attachment, ChannelState, MessageResponse } from 'stream-chat';
 import type { AttachmentProps } from '../../components/Attachment/Attachment';
@@ -96,6 +98,14 @@ export declare type MessagesContextValue<StreamChatGenerics extends DefaultStrea
      * The giphy version to render - check the keys of the [Image Object](https://developers.giphy.com/docs/api/schema#image-object) for possible values. Uses 'fixed_height' by default
      * */
     giphyVersion: keyof NonNullable<Attachment['giphy']>;
+    /**
+     * The indicator rendered when loading an image fails.
+     */
+    ImageLoadingFailedIndicator: React.ComponentType<ImageLoadingFailedIndicatorProps>;
+    /**
+     * The indicator rendered when image is loading. By default renders <ActivityIndicator/>
+     */
+    ImageLoadingIndicator: React.ComponentType<ImageLoadingIndicatorProps>;
     /**
      * When true, messageList will be scrolled at first unread message, when opened.
      */

package/lib/typescript/contexts/themeContext/utils/theme.d.ts

@@ -450,6 +450,10 @@ export declare type Theme = {
             shuffle: TextStyle;
             title: TextStyle;
         };
+        loadingIndicator: {
+            container: ViewStyle;
+            roundedView: ViewStyle;
+        };
         pinnedHeader: {
             container: ViewStyle;
             label: TextStyle;

package/lib/typescript/i18n/he.json

@@ -0,0 +1,67 @@
+{
+  "1 Reply": "תגובה אחת",
+  "1 Thread Reply": "תגובה אחת לשרשור",
+  "Allow access to your Gallery": "אפשר גישה לגלריה שלך",
+  "Also send to channel": "שלח/י הודעה לשיחה",
+  "Are you sure you want to permanently delete this message?": "האם את/ה בטוח/ה שאת/ה רוצה למחוק את ההודעה הזו לצמיתות?",
+  "Block User": "חסום משתמש",
+  "Cancel": "ביטול",
+  "Cannot Flag Message": "סימון הודעה לא אפשרי",
+  "Copy Message": "העתק/י הודעה",
+  "Delete": "מחק",
+  "Delete Message": "מחק/י הודעה",
+  "Do you want to send a copy of this message to a moderator for further investigation?": "האם את/ה רוצה לשלוח עותק של הודעה זו למנחה להמשך חקירה?",
+  "Edit Message": "ערוך הודעה",
+  "Editing Message": "הודעה בעריכה",
+  "Emoji matching": "התאמת אמוג'י",
+  "Empty message...": "הודעה ריקה...",
+  "Error loading": "שגיאה ארעה בעת הטעינה",
+  "Error loading channel list...": "שגיאה ארעה בטעינת השיחות...",
+  "Error loading messages for this channel...": "שגיאה ארעה בטעינת הודעות עבור שיחה זאת...",
+  "Error while loading, please reload/refresh": "שגיאה ארעה בזמן הטעינה, אנא טען מחדש/רענן",
+  "File type not supported": "סוג הקובץ אינו נתמך",
+  "Flag": "סמן",
+  "Flag Message": "סמן הודעה",
+  "Flag action failed either due to a network issue or the message is already flagged": "פעולת הסימון נכשלה בגלל בעיית רשת או שההודעה כבר סומנה.",
+  "Instant Commands": "פעולות מיידיות",
+  "Links are disabled": "הקישורים מבוטלים",
+  "Loading channels...": "השיחות בטעינה...",
+  "Loading messages...": "ההודעות בטעינה..",
+  "Loading...": "טוען...",
+  "Message Reactions": "תגובות להודעה",
+  "Message deleted": "ההודעה נמחקה",
+  "Message flagged": "ההודעה סומנה",
+  "Mute User": "השתק/י משתמש",
+  "Not supported": "לא נתמך",
+  "Nothing yet...": "אינפורמציה תתקבל בהמשך...",
+  "Ok": "אוקיי",
+  "Only visible to you": "גלוי רק לך",
+  "Photo": "תמונה",
+  "Photos": "תמונות",
+  "Pin to Conversation": "הצמד/י לשיחה",
+  "Please enable access to your photos and videos so you can share them.": "אפשר/י גישה לתמונות ולסרטונים שלך כדי שתוכל/י לשתף אותם.",
+  "Please select a channel first": "אנא בחר/י שיחה תחילה",
+  "Reconnecting...": "מתחבר מחדש...",
+  "Reply": "השב/י",
+  "Reply to Message": "השב/י להודעה",
+  "Resend": "שלח/י שוב",
+  "Search GIFs": "חפש/י GIFs",
+  "Send a message": "שלח/י הודעה",
+  "Sending links is not allowed in this conversation": "שליחת קישורים אינה מותרת בשיחה זו",
+  "Slow mode ON": "מצב איטי מופעל",
+  "The message has been reported to a moderator.": "ההודעה דווחה למנהל",
+  "Thread Reply": "הגב/י בשרשור",
+  "Unblock User": "בטל/י חסימת משתמש",
+  "Unknown User": "משתמש לא ידוע",
+  "Unmute User": "בטל/י השתקת משתמש",
+  "Unpin from Conversation": "בטל/י הצמדה לשיחה",
+  "Unread Messages": "הודעות שטרם נקרו",
+  "You": "את/ה",
+  "You can't send messages in this channel": "את/ב לא יכול/ה לשלוח הודעות בשיחה זו",
+  "{{ firstUser }} and {{ nonSelfUserLength }} more are typing": "{{ firstUser }} ו-{{ nonSelfUserLength }} משתמש/ים אחר/ים מקלידים",
+  "{{ index }} of {{ photoLength }}": "{{ index }} מתוך {{ photoLength }}",
+  "{{ replyCount }} Replies": "{{ replyCount }} תגובות",
+  "{{ replyCount }} Thread Replies": "{{ replyCount }} תגובות שרשור",
+  "{{ user }} is typing": "{{ user }} מקליד/ה",
+  "🏙 Attachment...": "🏙 קובץ מצורף..."
+}

package/lib/typescript/index.d.ts

@@ -14,4 +14,5 @@ export { default as itTranslations } from './i18n/it.json';
 export { default as nlTranslations } from './i18n/nl.json';
 export { default as ruTranslations } from './i18n/ru.json';
 export { default as trTranslations } from './i18n/tr.json';
+export { default as heTranslations } from './i18n/he.json';
 export { version } from './version.json';

package/lib/typescript/mock-builders/api/channelMocks.d.ts

@@ -0,0 +1,14 @@
+import type { Channel, FormatMessageResponse, MessageResponse } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+declare const CHANNEL: Channel<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_MESSAGES_TEXT: Channel<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_DELETED_MESSAGES: Channel<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_NO_MESSAGES: Channel<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_MESSAGE_COMMAND: Channel<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_MESSAGES_ATTACHMENTS: Channel<DefaultStreamChatGenerics>;
+declare const LATEST_MESSAGE: MessageResponse<DefaultStreamChatGenerics>;
+declare const FORMATTED_MESSAGE: FormatMessageResponse<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_MENTIONED_USERS: Channel<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_EMPTY_MESSAGE: Channel<DefaultStreamChatGenerics>;
+declare const CHANNEL_WITH_MESSAGES: Channel<DefaultStreamChatGenerics>;
+export { CHANNEL, CHANNEL_WITH_EMPTY_MESSAGE, CHANNEL_WITH_MESSAGES, CHANNEL_WITH_MENTIONED_USERS, FORMATTED_MESSAGE, LATEST_MESSAGE, CHANNEL_WITH_MESSAGES_ATTACHMENTS, CHANNEL_WITH_MESSAGE_COMMAND as CHANNEL_WITH_MESSAGES_COMMAND, CHANNEL_WITH_NO_MESSAGES, CHANNEL_WITH_DELETED_MESSAGES, CHANNEL_WITH_MESSAGES_TEXT, };

package/lib/typescript/utils/Streami18n.d.ts

@@ -11,6 +11,7 @@ import 'dayjs/locale/ko';
 import 'dayjs/locale/nl';
 import 'dayjs/locale/ru';
 import 'dayjs/locale/tr';
+import 'dayjs/locale/he';
 /**
  * These locale imports also set these locales globally.
  * So as a last step we import the english locale to make
@@ -154,10 +155,6 @@ export declare class Streami18n {
                 "Please enable access to your photos and videos so you can share them.": string;
                 "Please select a channel first": string;
                 "Reconnecting...": string;
-                /**
-                 * Hindi notation for meridiems are quite fuzzy in practice. While there exists
-                 * a rigid notion of a 'Pahar' it is not used as rigidly in modern Hindi.
-                 */
                 Reply: string;
                 "Reply to Message": string;
                 Resend: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "4.7.3",
+  "version": "4.9.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/GallaryImage.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ImageBackground, ImageProps } from 'react-native';
+
+import { makeImageCompatibleUrl } from '../../utils/utils';
+
+export const GalleryImage: React.FC<
+  Omit<ImageProps, 'height' | 'source'> & {
+    uri: string;
+  }
+> = (props) => {
+  const { uri, ...rest } = props;
+
+  return (
+    <ImageBackground
+      {...rest}
+      accessibilityLabel='gallery-image'
+      source={{
+        uri: makeImageCompatibleUrl(uri),
+      }}
+    />
+  );
+};

package/src/components/Attachment/Gallery.tsx

@@ -1,6 +1,8 @@
 import React, { useMemo } from 'react';
-import { Image, ImageProps, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
+import { GalleryImage } from './GallaryImage';
+import { useLoadingImage } from './hooks/useLoadingImage';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import { getGalleryImageBorderRadius } from './utils/getGalleryImageBorderRadius';
@@ -27,25 +29,7 @@ import {
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { isVideoPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
-
-const GalleryImage: React.FC<
-  Omit<ImageProps, 'height' | 'source'> & {
-    uri: string;
-  }
-> = (props) => {
-  const { uri, ...rest } = props;
-
-  return (
-    <Image
-      {...rest}
-      source={{
-        uri: makeImageCompatibleUrl(uri),
-      }}
-      testID='image-attachment-single'
-    />
-  );
-};
+import { getUrlWithoutParams } from '../../utils/utils';
 
 const MemoizedGalleryImage = React.memo(
   GalleryImage,
@@ -54,7 +38,7 @@ const MemoizedGalleryImage = React.memo(
 ) as typeof GalleryImage;
 
 const styles = StyleSheet.create({
-  flex: { flex: 1 },
+  errorTextSize: { fontSize: 10 },
   galleryContainer: {
     borderTopLeftRadius: 13,
     borderTopRightRadius: 13,
@@ -62,7 +46,19 @@ const styles = StyleSheet.create({
     flexWrap: 'wrap',
     overflow: 'hidden',
   },
-  imageContainer: { display: 'flex', flexDirection: 'row', justifyContent: 'center', padding: 1 },
+  imageContainer: {
+    alignItems: 'center',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    padding: 1,
+  },
+  imageContainerStyle: { alignItems: 'center', flex: 1, justifyContent: 'center' },
+  imageLoadingIndicatorStyle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+  },
   moreImagesContainer: {
     alignItems: 'center',
     justifyContent: 'center',
@@ -88,7 +84,11 @@ export type GalleryPropsWithContext<
   > &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    'additionalTouchableProps' | 'legacyImageViewerSwipeBehaviour' | 'VideoThumbnail'
+    | 'additionalTouchableProps'
+    | 'legacyImageViewerSwipeBehaviour'
+    | 'VideoThumbnail'
+    | 'ImageLoadingIndicator'
+    | 'ImageLoadingFailedIndicator'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
@@ -118,6 +118,8 @@ const GalleryWithContext = <
     alignment,
     groupStyles,
     hasThreadReplies,
+    ImageLoadingFailedIndicator,
+    ImageLoadingIndicator,
     images,
     legacyImageViewerSwipeBehaviour,
     message,
@@ -133,6 +135,9 @@ const GalleryWithContext = <
     VideoThumbnail,
   } = props;
 
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
   const {
     theme: {
       colors: { overlay },
@@ -304,18 +309,37 @@ const GalleryWithContext = <
                       ]}
                     />
                   ) : (
-                    <MemoizedGalleryImage
-                      resizeMode={resizeMode}
-                      style={[
-                        borderRadius,
-                        image,
-                        {
-                          height: height - 1,
-                          width: width - 1,
-                        },
-                      ]}
-                      uri={url}
-                    />
+                    <View style={styles.imageContainerStyle}>
+                      <MemoizedGalleryImage
+                        onError={(error) => {
+                          console.warn(error);
+                          setLoadingImage(false);
+                          setLoadingImageError(true);
+                        }}
+                        onLoadEnd={() => setLoadingImage(false)}
+                        onLoadStart={() => setLoadingImage(true)}
+                        resizeMode={resizeMode}
+                        style={[
+                          borderRadius,
+                          image,
+                          {
+                            height: height - 1,
+                            width: width - 1,
+                          },
+                        ]}
+                        uri={url}
+                      />
+                      {isLoadingImage && (
+                        <View style={{ position: 'absolute' }}>
+                          <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
+                        </View>
+                      )}
+                      {isLoadingImageError && (
+                        <View style={{ position: 'absolute' }}>
+                          <ImageLoadingFailedIndicator style={styles.imageLoadingIndicatorStyle} />
+                        </View>
+                      )}
+                    </View>
                   )}
                   {colIndex === numOfColumns - 1 &&
                   rowIndex === numOfRows - 1 &&
@@ -412,6 +436,8 @@ export const Gallery = <
     alignment: propAlignment,
     groupStyles: propGroupStyles,
     hasThreadReplies,
+    ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
+    ImageLoadingIndicator: PropImageLoadingIndicator,
     images: propImages,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
@@ -439,6 +465,8 @@ export const Gallery = <
   } = useMessageContext<StreamChatGenerics>();
   const {
     additionalTouchableProps: contextAdditionalTouchableProps,
+    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
+    ImageLoadingIndicator: ContextImageLoadingIndicator,
     legacyImageViewerSwipeBehaviour,
     VideoThumbnail: ContextVideoThumnbnail,
   } = useMessagesContext<StreamChatGenerics>();
@@ -461,6 +489,9 @@ export const Gallery = <
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
   const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
+  const ImageLoadingFailedIndicator =
+    PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
+  const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
 
   return (
     <MemoizedGallery
@@ -470,6 +501,8 @@ export const Gallery = <
         channelId: message?.cid,
         groupStyles,
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
+        ImageLoadingFailedIndicator,
+        ImageLoadingIndicator,
         images,
         legacyImageViewerSwipeBehaviour,
         message,

package/src/components/Attachment/Giphy.tsx

@@ -3,6 +3,8 @@ import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
+import { useLoadingImage } from './hooks/useLoadingImage';
+
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -40,6 +42,11 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     paddingVertical: 16,
   },
+  centerChild: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+  },
   container: {
     overflow: 'hidden',
     width: 270,
@@ -84,6 +91,17 @@ const styles = StyleSheet.create({
     padding: 8,
     width: '60%',
   },
+  imageErrorIndicatorStyle: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  imageLoadingIndicatorStyle: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+    position: 'absolute',
+  },
   selectionContainer: {
     borderBottomRightRadius: 0,
     borderRadius: 16,
@@ -128,7 +146,13 @@ export type GiphyPropsWithContext<
     | 'onPressIn'
     | 'preventPress'
   > &
-  Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps'> & {
+  Pick<
+    MessagesContextValue<StreamChatGenerics>,
+    | 'giphyVersion'
+    | 'additionalTouchableProps'
+    | 'ImageLoadingIndicator'
+    | 'ImageLoadingFailedIndicator'
+  > & {
     attachment: Attachment<StreamChatGenerics>;
   } & Pick<OverlayContextValue, 'setOverlay'>;
 
@@ -142,6 +166,8 @@ const GiphyWithContext = <
     attachment,
     giphyVersion,
     handleAction,
+    ImageLoadingFailedIndicator,
+    ImageLoadingIndicator,
     isMyMessage,
     message,
     onLongPress,
@@ -155,6 +181,9 @@ const GiphyWithContext = <
 
   const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
 
+  const { isLoadingImage, isLoadingImageError, setLoadingImage, setLoadingImageError } =
+    useLoadingImage();
+
   const {
     theme: {
       colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, label_bg_transparent, white },
@@ -214,6 +243,13 @@ const GiphyWithContext = <
       </View>
       <View style={styles.selectionImageContainer}>
         <Image
+          onError={(error) => {
+            console.warn(error);
+            setLoadingImage(false);
+            setLoadingImageError(true);
+          }}
+          onLoadEnd={() => setLoadingImage(false)}
+          onLoadStart={() => setLoadingImage(true)}
           resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
           style={[styles.giphy, giphyDimensions, giphy]}
@@ -299,16 +335,36 @@ const GiphyWithContext = <
       <View
         style={[
           styles.container,
+          styles.centerChild,
           { backgroundColor: isMyMessage ? grey_gainsboro : white },
           container,
         ]}
       >
         <Image
+          accessibilityLabel='giphy-attachment-image'
+          onError={(error) => {
+            console.warn(error);
+            setLoadingImage(false);
+            setLoadingImageError(true);
+          }}
+          onLoadEnd={() => setLoadingImage(false)}
+          onLoadStart={() => setLoadingImage(true)}
           resizeMode='contain'
           source={{ uri: makeImageCompatibleUrl(uri) }}
           style={[styles.giphy, giphyDimensions, giphy]}
           testID='giphy-attachment-image'
         />
+
+        {isLoadingImageError && (
+          <View style={{ position: 'absolute' }}>
+            <ImageLoadingFailedIndicator style={styles.imageErrorIndicatorStyle} />
+          </View>
+        )}
+        {isLoadingImage && (
+          <View style={{ position: 'absolute' }}>
+            <ImageLoadingIndicator style={styles.imageLoadingIndicatorStyle} />
+          </View>
+        )}
         <View style={[styles.giphyMask, giphyMask]}>
           <View
             style={[
@@ -387,12 +443,23 @@ export const Giphy = <
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
   const { setImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
+
+  const {
+    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
+    ImageLoadingIndicator: ContextImageLoadingIndicator,
+  } = useMessagesContext<StreamChatGenerics>();
+  const ImageLoadingFailedIndicator =
+    ContextImageLoadingFailedIndicator || props.ImageLoadingFailedIndicator;
+  const ImageLoadingIndicator = ContextImageLoadingIndicator || props.ImageLoadingIndicator;
+
   return (
     <MemoizedGiphy
       {...{
         additionalTouchableProps,
         giphyVersion,
         handleAction,
+        ImageLoadingFailedIndicator,
+        ImageLoadingIndicator,
         isMyMessage,
         message,
         onLongPress,

package/src/components/Attachment/ImageLoadingFailedIndicator.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { StyleSheet, Text, View, ViewProps } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
+
+import { Warning } from '../../icons';
+
+const WARNING_ICON_SIZE = 14;
+
+const styles = StyleSheet.create({
+  container: {
+    alignContent: 'center',
+    alignItems: 'center',
+    borderRadius: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  errorText: {
+    fontSize: 8,
+    justifyContent: 'center',
+    paddingHorizontal: 8,
+  },
+  warningIconStyle: {
+    borderRadius: 24,
+    marginLeft: 4,
+    marginTop: 6,
+  },
+});
+
+export type ImageLoadingFailedIndicatorProps = ViewProps;
+
+export const ImageLoadingFailedIndicator = (props: ImageLoadingFailedIndicatorProps) => {
+  const {
+    theme: {
+      colors: { accent_red, overlay, white },
+    },
+  } = useTheme();
+
+  const { t } = useTranslationContext();
+
+  const { style, ...rest } = props;
+  return (
+    <View {...rest} accessibilityHint='image-loading-error' style={[style]}>
+      <View style={[styles.container, { backgroundColor: overlay }]}>
+        <Warning
+          height={WARNING_ICON_SIZE}
+          pathFill={accent_red}
+          style={styles.warningIconStyle}
+          width={WARNING_ICON_SIZE}
+        />
+        <Text style={[styles.errorText, { color: white }]}>{t('Error loading')}</Text>
+      </View>
+    </View>
+  );
+};

package/src/components/Attachment/ImageLoadingIndicator.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { ActivityIndicator, StyleSheet, View, ViewProps } from 'react-native';
+
+import { useTheme } from '../../contexts/themeContext/ThemeContext';
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+    width: '100%',
+  },
+});
+
+export type ImageLoadingIndicatorProps = ViewProps;
+
+export const ImageLoadingIndicator = (props: ImageLoadingIndicatorProps) => {
+  const {
+    theme: {
+      messageSimple: {
+        loadingIndicator: { container },
+      },
+    },
+  } = useTheme();
+  const { style, ...rest } = props;
+  return (
+    <View {...rest} accessibilityHint='image-loading' style={[styles.container, container, style]}>
+      <ActivityIndicator />
+    </View>
+  );
+};

package/src/components/Attachment/__tests__/Attachment.test.js

@@ -4,6 +4,7 @@ import { fireEvent, render, waitFor } from '@testing-library/react-native';
 import { v4 as uuidv4 } from 'uuid';
 
 import { MessageProvider } from '../../../contexts/messageContext/MessageContext';
+import { MessagesProvider } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import {
   generateAttachmentAction,
@@ -12,6 +13,9 @@ import {
   generateImageAttachment,
 } from '../../../mock-builders/generator/attachment';
 import { generateMessage } from '../../../mock-builders/generator/message';
+
+import { ImageLoadingFailedIndicator } from '../../Attachment/ImageLoadingFailedIndicator';
+import { ImageLoadingIndicator } from '../../Attachment/ImageLoadingIndicator';
 import { Attachment } from '../Attachment';
 import { AttachmentActions } from '../AttachmentActions';
 
@@ -19,9 +23,11 @@ const getAttachmentComponent = (props) => {
   const message = generateMessage();
   return (
     <ThemeProvider>
-      <MessageProvider value={{ message }}>
-        <Attachment {...props} />
-      </MessageProvider>
+      <MessagesProvider value={{ ImageLoadingFailedIndicator, ImageLoadingIndicator }}>
+        <MessageProvider value={{ message }}>
+          <Attachment {...props} />
+        </MessageProvider>
+      </MessagesProvider>
     </ThemeProvider>
   );
 };