stream-chat-react-native-core 4.8.0 → 4.9.0-beta.3

package/lib/typescript/components/Channel/hooks/useCreateMessagesContext.d.ts

@@ -1,6 +1,6 @@
 import type { MessagesContextValue } from '../../../contexts/messagesContext/MessagesContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useCreateMessagesContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTouchableProps, Attachment, AttachmentActions, Card, CardCover, CardFooter, CardHeader, channelId, DateHeader, deletedMessagesVisibilityType, disableTypingIndicator, dismissKeyboardOnMessageTouch, enableMessageGroupingByUser, FileAttachment, FileAttachmentGroup, FileAttachmentIcon, FlatList, forceAlignMessages, formatDate, Gallery, Giphy, giphyVersion, handleBlock, handleCopy, handleDelete, handleEdit, handleFlag, handleMute, handlePinMessage, handleQuotedReply, handleReaction, handleRetry, handleThreadReply, initialScrollToFirstUnreadMessage, InlineDateSeparator, InlineUnreadIndicator, isAttachmentEqual, legacyImageViewerSwipeBehaviour, markdownRules, Message, messageActions, MessageAvatar, MessageContent, messageContentOrder, MessageDeleted, MessageFooter, MessageHeader, MessageList, MessagePinnedHeader, MessageReplies, MessageRepliesAvatars, MessageSimple, MessageStatus, MessageSystem, MessageText, myMessageTheme, onLongPressMessage, onPressInMessage, onPressMessage, OverlayReactionList, ReactionList, removeMessage, Reply, retrySendMessage, ScrollToBottomButton, selectReaction, setEditingState, setQuotedMessageState, supportedReactions, targetedMessage, TypingIndicator, TypingIndicatorContainer, updateMessage, UrlPreview, VideoThumbnail, }: MessagesContextValue<StreamChatGenerics> & {
+export declare const useCreateMessagesContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ additionalTouchableProps, Attachment, AttachmentActions, Card, CardCover, CardFooter, CardHeader, channelId, DateHeader, deletedMessagesVisibilityType, disableTypingIndicator, dismissKeyboardOnMessageTouch, enableMessageGroupingByUser, FileAttachment, FileAttachmentGroup, FileAttachmentIcon, FlatList, forceAlignMessages, formatDate, Gallery, Giphy, giphyVersion, handleBlock, handleCopy, handleDelete, handleEdit, handleFlag, handleMute, handlePinMessage, handleQuotedReply, handleReaction, handleRetry, handleThreadReply, ImageLoadingFailedIndicator, ImageLoadingIndicator, initialScrollToFirstUnreadMessage, InlineDateSeparator, InlineUnreadIndicator, isAttachmentEqual, legacyImageViewerSwipeBehaviour, markdownRules, Message, messageActions, MessageAvatar, MessageContent, messageContentOrder, MessageDeleted, MessageFooter, MessageHeader, MessageList, MessagePinnedHeader, MessageReplies, MessageRepliesAvatars, MessageSimple, MessageStatus, MessageSystem, MessageText, myMessageTheme, onLongPressMessage, onPressInMessage, onPressMessage, OverlayReactionList, ReactionList, removeMessage, Reply, retrySendMessage, ScrollToBottomButton, selectReaction, setEditingState, setQuotedMessageState, supportedReactions, targetedMessage, TypingIndicator, TypingIndicatorContainer, updateMessage, UrlPreview, VideoThumbnail, }: MessagesContextValue<StreamChatGenerics> & {
     /**
      * To ensure we allow re-render, when channel is changed
      */

package/lib/typescript/components/ChannelPreview/hooks/__tests__/useLatestMessagePreview.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/typescript/components/RTLComponents/WritingDirectionAwareText.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ViewProps } from 'react-native';
+export declare type WritingDirectionAwareTextProps = ViewProps;
+export declare const WritingDirectionAwareText: React.FC<WritingDirectionAwareTextProps>;

package/lib/typescript/components/Reply/__tests__/Reply.test.d.ts

@@ -0,0 +1 @@
+export {};

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/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/mock-builders/api/getOrCreateChannel.d.ts

@@ -0,0 +1,7 @@
+export function getOrCreateChannelApi(channel?: any): {
+    response: {
+        data: any;
+        status: number;
+    };
+    type: string;
+};

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

@@ -0,0 +1 @@
+export function useMockedApis(client: any, apiResponses: any): void;

package/lib/typescript/mock-builders/generator/channel.d.ts

@@ -0,0 +1,116 @@
+export function generateChannel(customValues: any): {
+    _client: {};
+    data: {
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: any;
+            image: any;
+            name: any;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        id: any;
+        own_capabilities: string[];
+        type: string;
+        updated_at: string;
+    };
+    id: any;
+    state: {
+        members: {};
+        messages: never[];
+        setIsUpToDate: jest.Mock<any, any>;
+    };
+    type: string;
+};
+export function generateChannelResponse(customValues?: {
+    channel: {};
+    id: any;
+    type: string;
+}): {
+    channel: {
+        id: any;
+        type: string;
+        user: {
+            banned: boolean;
+            created_at: string;
+            id: any;
+            image: any;
+            name: any;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        cid: string;
+        config: {
+            name: string;
+            type: string;
+            automod: string;
+            automod_behavior: string;
+            commands: {
+                args: string;
+                description: string;
+                name: string;
+                set: string;
+            }[];
+            connect_events: boolean;
+            created_at: string;
+            max_message_length: number;
+            message_retention: string;
+            mutes: boolean;
+            reactions: boolean;
+            read_events: boolean;
+            replies: boolean;
+            search: boolean;
+            typing_events: boolean;
+            updated_at: string;
+            uploads: boolean;
+            url_enrichment: boolean;
+        };
+        created_at: string;
+        created_by: {
+            banned: boolean;
+            created_at: string;
+            id: any;
+            image: any;
+            name: any;
+            online: boolean;
+            role: string;
+            updated_at: string;
+        };
+        frozen: boolean;
+        own_capabilities: string[];
+        updated_at: string;
+    };
+    members: never[];
+    messages: never[];
+};

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.8.0",
+  "version": "4.9.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -34,7 +34,8 @@
     "prepare-distribution": "cd examples/SampleApp && npm version patch && react-native-version && git add ./ && git commit -m 'Bump build version' --no-verify",
     "prettier": "prettier --list-different '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
     "prettier-fix": "prettier --write '**/*.{js,ts,tsx,md,json}' .eslintrc.json ../.prettierrc .babelrc",
-    "test:unit": "TZ=UTC jest --coverage",
+    "test:coverage": "yarn test:unit --coverage",
+    "test:unit": "TZ=UTC jest",
     "validate-translations": "node bin/validate-translations.js",
     "get-version": "echo $npm_package_version",
     "version": "bash ./bin/before-tag.sh",

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>
+  );
+};