chore: add override for ImageReloadIndicator

Author: isekovanic

package/src/components/Attachment/Gallery.tsx

@@ -4,7 +4,6 @@ import { Pressable, StyleSheet, Text, View } from 'react-native';
 import type { Attachment } from 'stream-chat';
 
 import { GalleryImage } from './GalleryImage';
-import { ImageReloadIndicator } from './ImageReloadIndicator';
 import { buildGallery } from './utils/buildGallery/buildGallery';
 
 import type { Thumbnail } from './utils/buildGallery/types';
@@ -58,6 +57,7 @@ export type GalleryPropsWithContext<
     | 'VideoThumbnail'
     | 'ImageLoadingIndicator'
     | 'ImageLoadingFailedIndicator'
+    | 'ImageReloadIndicator'
     | 'myMessageTheme'
   > &
   Pick<OverlayContextValue, 'setOverlay'> & {
@@ -90,6 +90,7 @@ const GalleryWithContext = <
     hasThreadReplies,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     images,
     legacyImageViewerSwipeBehaviour,
     message,
@@ -207,6 +208,7 @@ const GalleryWithContext = <
                   colIndex={colIndex}
                   ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
                   ImageLoadingIndicator={ImageLoadingIndicator}
+                  ImageReloadIndicator={ImageReloadIndicator}
                   imagesAndVideos={imagesAndVideos}
                   invertedDirections={invertedDirections || false}
                   key={rowIndex}
@@ -258,6 +260,7 @@ type GalleryThumbnailProps<
   | 'VideoThumbnail'
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
+  | 'ImageReloadIndicator'
 > &
   Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
@@ -274,6 +277,7 @@ const GalleryThumbnail = <
   colIndex,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   imagesAndVideos,
   invertedDirections,
   legacyImageViewerSwipeBehaviour,
@@ -397,6 +401,7 @@ const GalleryThumbnail = <
             borderRadius={imageBorderRadius ?? borderRadius}
             ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
             ImageLoadingIndicator={ImageLoadingIndicator}
+            ImageReloadIndicator={ImageReloadIndicator}
             thumbnail={thumbnail}
           />
         </View>
@@ -425,10 +430,15 @@ const GalleryImageThumbnail = <
   borderRadius,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   thumbnail,
 }: Pick<
   GalleryThumbnailProps<StreamChatGenerics>,
-  'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
+  | 'ImageLoadingFailedIndicator'
+  | 'ImageLoadingIndicator'
+  | 'ImageReloadIndicator'
+  | 'thumbnail'
+  | 'borderRadius'
 >) => {
   const {
     isLoadingImage,
@@ -585,6 +595,7 @@ export const Gallery = <
     hasThreadReplies,
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
+    ImageReloadIndicator: PropImageReloadIndicator,
     images: propImages,
     message: propMessage,
     myMessageTheme: propMyMessageTheme,
@@ -617,6 +628,7 @@ export const Gallery = <
     additionalPressableProps: contextAdditionalPressableProps,
     ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
     ImageLoadingIndicator: ContextImageLoadingIndicator,
+    ImageReloadIndicator: ContextImageReloadIndicator,
     legacyImageViewerSwipeBehaviour,
     myMessageTheme: contextMyMessageTheme,
     VideoThumbnail: ContextVideoThumnbnail,
@@ -646,6 +658,7 @@ export const Gallery = <
   const ImageLoadingFailedIndicator =
     PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
   const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
+  const ImageReloadIndicator = PropImageReloadIndicator || ContextImageReloadIndicator;
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
 
   return (
@@ -658,6 +671,7 @@ export const Gallery = <
         hasThreadReplies: hasThreadReplies || !!message?.reply_count,
         ImageLoadingFailedIndicator,
         ImageLoadingIndicator,
+        ImageReloadIndicator,
         images,
         legacyImageViewerSwipeBehaviour,
         message,

package/src/components/Attachment/ImageReloadIndicator.tsx

@@ -6,13 +6,12 @@ import { Refresh } from '../../icons';
 
 const REFRESH_ICON_SIZE = 24;
 
-export const ImageReloadIndicator = ({
-  onReloadImage,
-  style,
-}: {
+export type ImageReloadIndicatorProps = {
   onReloadImage: () => void;
   style: React.ComponentProps<typeof Pressable>['style'];
-}) => {
+};
+
+export const ImageReloadIndicator = ({ onReloadImage, style }: ImageReloadIndicatorProps) => {
   const {
     theme: {
       colors: { grey_dark },

package/src/components/Channel/Channel.tsx

@@ -118,6 +118,7 @@ import { Gallery as GalleryDefault } from '../Attachment/Gallery';
 import { Giphy as GiphyDefault } from '../Attachment/Giphy';
 import { ImageLoadingFailedIndicator as ImageLoadingFailedIndicatorDefault } from '../Attachment/ImageLoadingFailedIndicator';
 import { ImageLoadingIndicator as ImageLoadingIndicatorDefault } from '../Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicator as ImageReloadIndicatorDefault } from '../Attachment/ImageReloadIndicator';
 import { VideoThumbnail as VideoThumbnailDefault } from '../Attachment/VideoThumbnail';
 import { AutoCompleteSuggestionHeader as AutoCompleteSuggestionHeaderDefault } from '../AutoCompleteInput/AutoCompleteSuggestionHeader';
 import { AutoCompleteSuggestionItem as AutoCompleteSuggestionItemDefault } from '../AutoCompleteInput/AutoCompleteSuggestionItem';
@@ -325,6 +326,7 @@ export type ChannelPropsWithContext<
       | 'legacyImageViewerSwipeBehaviour'
       | 'ImageLoadingFailedIndicator'
       | 'ImageLoadingIndicator'
+      | 'ImageReloadIndicator'
       | 'markdownRules'
       | 'Message'
       | 'MessageActionList'
@@ -569,6 +571,7 @@ const ChannelWithContext = <
     hideStickyDateHeader = false,
     ImageLoadingFailedIndicator = ImageLoadingFailedIndicatorDefault,
     ImageLoadingIndicator = ImageLoadingIndicatorDefault,
+    ImageReloadIndicator = ImageReloadIndicatorDefault,
     ImageUploadPreview = ImageUploadPreviewDefault,
     initialScrollToFirstUnreadMessage = false,
     initialValue,
@@ -1917,6 +1920,7 @@ const ChannelWithContext = <
       hasCreatePoll === undefined ? pollCreationEnabled : hasCreatePoll && pollCreationEnabled,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
+    ImageReloadIndicator,
     initialScrollToFirstUnreadMessage: !messageId && initialScrollToFirstUnreadMessage, // when messageId is set, we scroll to the messageId instead of first unread
     InlineDateSeparator,
     InlineUnreadIndicator,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -48,6 +48,7 @@ export const useCreateMessagesContext = <
   hasCreatePoll,
   ImageLoadingFailedIndicator,
   ImageLoadingIndicator,
+  ImageReloadIndicator,
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
@@ -165,6 +166,7 @@ export const useCreateMessagesContext = <
       hasCreatePoll,
       ImageLoadingFailedIndicator,
       ImageLoadingIndicator,
+      ImageReloadIndicator,
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -16,6 +16,7 @@ import type { GalleryProps } from '../../components/Attachment/Gallery';
 import type { GiphyProps } from '../../components/Attachment/Giphy';
 import type { ImageLoadingFailedIndicatorProps } from '../../components/Attachment/ImageLoadingFailedIndicator';
 import type { ImageLoadingIndicatorProps } from '../../components/Attachment/ImageLoadingIndicator';
+import { ImageReloadIndicatorProps } from '../../components/Attachment/ImageReloadIndicator';
 import type { VideoThumbnailProps } from '../../components/Attachment/VideoThumbnail';
 import type {
   MessagePressableHandlerPayload,
@@ -153,6 +154,11 @@ export type MessagesContextValue<
    */
   ImageLoadingFailedIndicator: React.ComponentType<ImageLoadingFailedIndicatorProps>;
 
+  /**
+   * The indicator rendered at the center of an image whenever its loading fails, used to trigger retries.
+   */
+  ImageReloadIndicator: React.ComponentType<ImageReloadIndicatorProps>;
+
   /**
    * The indicator rendered when image is loading. By default renders <ActivityIndicator/>
    */