stream-chat-react-native-core 5.2.0 → 5.3.0-beta.1

package/lib/typescript/components/Attachment/GalleryImage.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
 import { ImageProps } from 'react-native';
-export declare const GalleryImage: React.FC<Omit<ImageProps, 'height' | 'source'> & {
+import { ChatContextValue } from '../../contexts/chatContext/ChatContext';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+export declare type GalleryImageWithContextProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = GalleryImageProps & Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>;
+export declare const GalleryImageWithContext: React.FC<GalleryImageWithContextProps>;
+export declare const MemoizedGalleryImage: React.NamedExoticComponent<GalleryImageWithContextProps<DefaultStreamChatGenerics>>;
+export declare type GalleryImageProps = Omit<ImageProps, 'height' | 'source'> & {
     uri: string;
-}>;
+};
+export declare const GalleryImage: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: GalleryImageProps) => JSX.Element;

package/lib/typescript/components/Attachment/Giphy.d.ts

@@ -1,10 +1,11 @@
 import type { Attachment } from 'stream-chat';
+import { ChatContextValue } from '../../contexts/chatContext/ChatContext';
 import { ImageGalleryContextValue } from '../../contexts/imageGalleryContext/ImageGalleryContext';
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
 import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
 import { OverlayContextValue } from '../../contexts/overlayContext/OverlayContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-export declare type GiphyPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> & Pick<MessageContextValue<StreamChatGenerics>, 'handleAction' | 'isMyMessage' | 'message' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> & Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps' | 'ImageLoadingIndicator' | 'ImageLoadingFailedIndicator'> & {
+export declare type GiphyPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> & Pick<MessageContextValue<StreamChatGenerics>, 'handleAction' | 'isMyMessage' | 'message' | 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> & Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> & Pick<MessagesContextValue<StreamChatGenerics>, 'giphyVersion' | 'additionalTouchableProps' | 'ImageLoadingIndicator' | 'ImageLoadingFailedIndicator'> & {
     attachment: Attachment<StreamChatGenerics>;
 } & Pick<OverlayContextValue, 'setOverlay'>;
 export declare type GiphyProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<GiphyPropsWithContext<StreamChatGenerics>> & {

package/lib/typescript/components/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageStyle, StyleProp, ViewStyle } from 'react-native';
+import { ImageProps, ImageStyle, StyleProp, ViewStyle } from 'react-native';
 import { CircleProps } from 'react-native-svg';
 export declare type AvatarProps = {
     /** size in pixels */
@@ -7,6 +7,7 @@ export declare type AvatarProps = {
     containerStyle?: StyleProp<ViewStyle>;
     /** image url */
     image?: string;
+    ImageComponent?: React.ComponentType<ImageProps>;
     /** name of the picture, used for fallback */
     imageStyle?: StyleProp<ImageStyle>;
     name?: string;

package/lib/typescript/components/Avatar/GroupAvatar.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { ImageProps, StyleProp, ViewStyle } from 'react-native';
 export declare type GroupAvatarProps = {
     /** total size in pixels */
     size: number;
     containerStyle?: StyleProp<ViewStyle>;
+    ImageComponent?: React.ComponentType<ImageProps>;
     /** image urls */
     images?: string[];
     /** name of the users, used for fallback */

package/lib/typescript/components/ChannelPreview/ChannelAvatar.d.ts

@@ -1,7 +1,9 @@
 import type { ChannelPreviewProps } from './ChannelPreview';
+import { ChatContextValue } from '../../contexts/chatContext/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 export declare type ChannelAvatarProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
 /**
  * This UI component displays an avatar for a particular channel.
  */
+export declare const ChannelAvatarWithContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelAvatarProps<StreamChatGenerics> & Pick<ChatContextValue<DefaultStreamChatGenerics>, "ImageComponent">) => JSX.Element;
 export declare const ChannelAvatar: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: ChannelAvatarProps<StreamChatGenerics>) => JSX.Element;

package/lib/typescript/components/Chat/Chat.d.ts

@@ -4,7 +4,7 @@ import { DeepPartial } from '../../contexts/themeContext/ThemeContext';
 import type { Theme } from '../../contexts/themeContext/utils/theme';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import type { Streami18n } from '../../utils/Streami18n';
-export declare type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & {
+export declare type ChatProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> & Partial<Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>> & {
     /**
      * When false, ws connection won't be disconnection upon backgrounding the app.
      * To receive push notifications, its necessary that user doesn't have active

package/lib/typescript/components/Chat/hooks/useCreateChatContext.d.ts

@@ -1,3 +1,3 @@
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
-export declare const useCreateChatContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ appSettings, channel, client, connectionRecovering, enableOfflineSupport, isOnline, mutedUsers, setActiveChannel, subscribeConnectionRecoveredCallback, }: ChatContextValue<StreamChatGenerics>) => ChatContextValue<StreamChatGenerics>;
+export declare const useCreateChatContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ appSettings, channel, client, connectionRecovering, enableOfflineSupport, ImageComponent, isOnline, mutedUsers, setActiveChannel, subscribeConnectionRecoveredCallback, }: ChatContextValue<StreamChatGenerics>) => ChatContextValue<StreamChatGenerics>;

package/lib/typescript/components/ImageBackground.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ImageBackgroundProps, ImageProps } from 'react-native';
+/**
+ * DISCLAIMER: This component has been pretty-much copied from react-native's source code
+ * https://github.com/facebook/react-native/blob/main/Libraries/Image/ImageBackground.js
+ * Few modifications have been done such as converting to functional component, removing ref related logic (since its not required).
+ * Also support for prop `ImageComponent` has been introduced to allow rendering custom
+ * component instead of `Image`.
+ *
+ *
+ * Very simple drop-in replacement for <Image> which supports nesting views.
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react';
+ * import { AppRegistry, View, ImageBackground, Text } from 'react-native';
+ *
+ * class DisplayAnImageBackground extends Component {
+ *   render() {
+ *     return (
+ *       <ImageBackground
+ *         style={{width: 50, height: 50}}
+ *         source={{uri: 'https://reactnative.dev/img/opengraph.png'}}
+ *       >
+ *         <Text>React</Text>
+ *       </ImageBackground>
+ *     );
+ *   }
+ * }
+ *
+ */
+export declare const ImageBackground: React.ComponentType<ImageBackgroundProps & {
+    ImageComponent?: React.ComponentType<ImageProps>;
+}>;

package/lib/typescript/components/Message/Message.d.ts

@@ -52,7 +52,8 @@ export declare type MessageActionHandlers = {
     toggleMuteUser: () => Promise<void>;
     toggleReaction: (reactionType: string) => Promise<void>;
 };
-export declare type MessagePropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'disabled' | 'enforceUniqueReaction' | 'members'> & Pick<ChatContextValue<StreamChatGenerics>, 'client' | 'mutedUsers'> & Pick<KeyboardContextValue, 'dismissKeyboard'> & Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> & Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> & Pick<MessagesContextValue<StreamChatGenerics>, 'dismissKeyboardOnMessageTouch' | 'forceAlignMessages' | 'handleBlock' | 'handleCopy' | 'handleDelete' | 'handleEdit' | 'handleFlag' | 'handleMute' | 'handlePinMessage' | 'handleQuotedReply' | 'handleReaction' | 'handleRetry' | 'handleThreadReply' | 'isAttachmentEqual' | 'messageActions' | 'messageContentOrder' | 'MessageSimple' | 'onLongPressMessage' | 'onPressInMessage' | 'onPressMessage' | 'OverlayReactionList' | 'removeMessage' | 'retrySendMessage' | 'selectReaction' | 'setEditingState' | 'setQuotedMessageState' | 'supportedReactions' | 'updateMessage'> & Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> & Pick<OverlayContextValue, 'setOverlay'> & Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> & Pick<TranslationContextValue, 't'> & {
+export declare type MessagePropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'disabled' | 'enforceUniqueReaction' | 'members'> & Pick<KeyboardContextValue, 'dismissKeyboard'> & Partial<Omit<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'>> & Pick<MessageContextValue<StreamChatGenerics>, 'groupStyles' | 'message'> & Pick<MessagesContextValue<StreamChatGenerics>, 'dismissKeyboardOnMessageTouch' | 'forceAlignMessages' | 'handleBlock' | 'handleCopy' | 'handleDelete' | 'handleEdit' | 'handleFlag' | 'handleMute' | 'handlePinMessage' | 'handleQuotedReply' | 'handleReaction' | 'handleRetry' | 'handleThreadReply' | 'isAttachmentEqual' | 'messageActions' | 'messageContentOrder' | 'MessageSimple' | 'onLongPressMessage' | 'onPressInMessage' | 'onPressMessage' | 'OverlayReactionList' | 'removeMessage' | 'retrySendMessage' | 'selectReaction' | 'setEditingState' | 'setQuotedMessageState' | 'supportedReactions' | 'updateMessage'> & Pick<MessageOverlayContextValue<StreamChatGenerics>, 'setData'> & Pick<OverlayContextValue, 'setOverlay'> & Pick<ThreadContextValue<StreamChatGenerics>, 'openThread'> & Pick<TranslationContextValue, 't'> & {
+    chatContext: ChatContextValue<StreamChatGenerics>;
     messagesContext: MessagesContextValue<StreamChatGenerics>;
     /**
      * Whether or not users are able to long press messages.

package/lib/typescript/components/Message/MessageSimple/MessageAvatar.d.ts

@@ -1,7 +1,8 @@
+import { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { AvatarProps } from '../../Avatar/Avatar';
-export declare type MessageAvatarPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'> & Partial<Pick<AvatarProps, 'size'>>;
+export declare type MessageAvatarPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'lastGroupMessage' | 'message' | 'showAvatar'> & Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> & Partial<Pick<AvatarProps, 'size'>>;
 export declare type MessageAvatarProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Partial<MessageAvatarPropsWithContext<StreamChatGenerics>>;
 export declare const MessageAvatar: {
     <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: Partial<MessageAvatarPropsWithContext<StreamChatGenerics>>): JSX.Element;

package/lib/typescript/components/Message/MessageSimple/MessageRepliesAvatars.d.ts

@@ -1,4 +1,6 @@
+import { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import type { MessageContextValue } from '../../../contexts/messageContext/MessageContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 export declare type MessageRepliesAvatarsProps<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<MessageContextValue<StreamChatGenerics>, 'alignment' | 'message'>;
+export declare const MessageRepliesAvatarsWithContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageRepliesAvatarsProps<StreamChatGenerics> & Pick<ChatContextValue<DefaultStreamChatGenerics>, "ImageComponent">) => JSX.Element;
 export declare const MessageRepliesAvatars: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(props: MessageRepliesAvatarsProps<StreamChatGenerics>) => JSX.Element;

package/lib/typescript/contexts/chatContext/ChatContext.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import type { ImageProps } from 'react-native';
 import type { AppSettingsAPIResponse, Channel, EventHandler, Mute, StreamChat } from 'stream-chat';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 export declare type ChatContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
@@ -25,6 +26,7 @@ export declare type ChatContextValue<StreamChatGenerics extends DefaultStreamCha
     client: StreamChat<StreamChatGenerics>;
     connectionRecovering: boolean;
     enableOfflineSupport: boolean;
+    ImageComponent: React.ComponentType<ImageProps>;
     isOnline: boolean;
     mutedUsers: Mute<StreamChatGenerics>[];
     /**
@@ -55,7 +57,7 @@ export declare type ChatContextValue<StreamChatGenerics extends DefaultStreamCha
 };
 export declare const ChatContext: React.Context<ChatContextValue<DefaultStreamChatGenerics>>;
 export declare const ChatProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, value, }: React.PropsWithChildren<{
-    value: ChatContextValue<StreamChatGenerics>;
+    value?: ChatContextValue<StreamChatGenerics> | undefined;
 }>) => JSX.Element;
 export declare const useChatContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => ChatContextValue<StreamChatGenerics>;
 /**

package/lib/typescript/contexts/messageOverlayContext/MessageOverlayContext.d.ts

@@ -1,4 +1,5 @@
 import React, { PropsWithChildren } from 'react';
+import type { ImageProps } from 'react-native';
 import type { Attachment, TranslationLanguages } from 'stream-chat';
 import type { GroupType, MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { MessageActionListProps } from '../../components/MessageOverlay/MessageActionList';
@@ -8,15 +9,18 @@ import type { OverlayReactionsProps } from '../../components/MessageOverlay/Over
 import type { OverlayReactionsAvatarProps } from '../../components/MessageOverlay/OverlayReactionsAvatar';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
 import type { ReactionData } from '../../utils/utils';
+import type { ChatContextValue } from '../chatContext/ChatContext';
 import type { Alignment, MessageContextValue } from '../messageContext/MessageContext';
 import type { MessagesContextValue } from '../messagesContext/MessagesContext';
 import type { OwnCapabilitiesContextValue } from '../ownCapabilitiesContext/OwnCapabilitiesContext';
 export declare type MessageOverlayData<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     alignment?: Alignment;
+    chatContext?: ChatContextValue<StreamChatGenerics>;
     clientId?: string;
     files?: Attachment<StreamChatGenerics>[];
     groupStyles?: GroupType[];
     handleReaction?: (reactionType: string) => Promise<void>;
+    ImageComponent?: React.ComponentType<ImageProps>;
     images?: Attachment<StreamChatGenerics>[];
     message?: MessageType<StreamChatGenerics>;
     messageActions?: MessageActionType[];

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": "5.2.0",
+  "version": "5.3.0-beta.1",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"

package/src/components/Attachment/Card.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  ImageBackground,
+  Image,
   ImageStyle,
   StyleProp,
   StyleSheet,
@@ -15,6 +15,8 @@ import type { Attachment } from 'stream-chat';
 
 import { openUrlSafely } from './utils/openUrlSafely';
 
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+
 import {
   MessageContextValue,
   useMessageContext,
@@ -27,6 +29,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { Play } from '../../icons/Play';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { makeImageCompatibleUrl } from '../../utils/utils';
+import { ImageBackground } from '../ImageBackground';
 
 const styles = StyleSheet.create({
   authorName: { fontSize: 14.5, fontWeight: '600' },
@@ -82,6 +85,7 @@ const styles = StyleSheet.create({
 export type CardPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Attachment<StreamChatGenerics> &
+  Pick<ChatContextValue, 'ImageComponent'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
@@ -117,6 +121,7 @@ const CardWithContext = <
     CardCover,
     CardFooter,
     CardHeader,
+    ImageComponent = Image,
     image_url,
     og_scrape_url,
     onLongPress,
@@ -198,6 +203,7 @@ const CardWithContext = <
       {uri && !CardCover && (
         <View>
           <ImageBackground
+            ImageComponent={ImageComponent}
             imageStyle={styles.cardCover}
             resizeMode='cover'
             source={{ uri: makeImageCompatibleUrl(uri) }}
@@ -287,7 +293,8 @@ export type CardProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = Attachment<StreamChatGenerics> &
   Partial<
-    Pick<MessageContextValue<StreamChatGenerics>, 'onLongPress' | 'onPress' | 'onPressIn'> &
+    Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> &
+      Pick<MessageContextValue<StreamChatGenerics>, 'onLongPress' | 'onPress' | 'onPressIn'> &
       Pick<
         MessagesContextValue<StreamChatGenerics>,
         'additionalTouchableProps' | 'CardCover' | 'CardFooter' | 'CardHeader'
@@ -302,6 +309,7 @@ export const Card = <
 >(
   props: CardProps<StreamChatGenerics>,
 ) => {
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
   const { message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { additionalTouchableProps, CardCover, CardFooter, CardHeader } =
@@ -316,6 +324,7 @@ export const Card = <
         CardFooter,
         CardHeader,
         channelId: message.cid,
+        ImageComponent,
         messageId: message.id,
         onLongPress,
         onPress,

package/src/components/Attachment/Gallery.tsx

@@ -34,12 +34,6 @@ import { isVideoPackageAvailable } from '../../native';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { getUrlWithoutParams } from '../../utils/utils';
 
-const MemoizedGalleryImage = React.memo(
-  GalleryImage,
-  (prevProps, nextProps) =>
-    getUrlWithoutParams(prevProps.uri) === getUrlWithoutParams(nextProps.uri),
-) as typeof GalleryImage;
-
 const styles = StyleSheet.create({
   errorTextSize: { fontSize: 10 },
   galleryContainer: {
@@ -476,7 +470,7 @@ const GalleryImageThumbnail = <
         <ImageLoadingFailedIndicator style={[styles.imageLoadingErrorIndicatorStyle]} />
       ) : (
         <>
-          <MemoizedGalleryImage
+          <GalleryImage
             onError={(error) => {
               console.warn(error);
               setLoadingImage(false);

package/src/components/Attachment/GalleryImage.tsx

@@ -1,17 +1,20 @@
 import React from 'react';
-import { ImageBackground, ImageProps } from 'react-native';
+import { Image, ImageProps } from 'react-native';
 
-import { makeImageCompatibleUrl } from '../../utils/utils';
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 
-export const GalleryImage: React.FC<
-  Omit<ImageProps, 'height' | 'source'> & {
-    uri: string;
-  }
-> = (props) => {
-  const { uri, ...rest } = props;
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import { getUrlWithoutParams, makeImageCompatibleUrl } from '../../utils/utils';
+
+export type GalleryImageWithContextProps<
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = GalleryImageProps & Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'>;
+
+export const GalleryImageWithContext: React.FC<GalleryImageWithContextProps> = (props) => {
+  const { ImageComponent = Image, uri, ...rest } = props;
 
   return (
-    <ImageBackground
+    <ImageComponent
       {...rest}
       accessibilityLabel='Gallery Image'
       source={{
@@ -20,3 +23,22 @@ export const GalleryImage: React.FC<
     />
   );
 };
+
+export const MemoizedGalleryImage = React.memo(
+  GalleryImageWithContext,
+  (prevProps, nextProps) =>
+    getUrlWithoutParams(prevProps.uri) === getUrlWithoutParams(nextProps.uri),
+);
+export type GalleryImageProps = Omit<ImageProps, 'height' | 'source'> & {
+  uri: string;
+};
+
+export const GalleryImage = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: GalleryImageProps,
+) => {
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
+
+  return <MemoizedGalleryImage ImageComponent={ImageComponent} {...props} />;
+};

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 { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -145,6 +147,7 @@ export type GiphyPropsWithContext<
     | 'onPressIn'
     | 'preventPress'
   > &
+  Pick<ChatContextValue<StreamChatGenerics>, 'ImageComponent'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
     | 'giphyVersion'
@@ -165,6 +168,7 @@ const GiphyWithContext = <
     attachment,
     giphyVersion,
     handleAction,
+    ImageComponent = Image,
     ImageLoadingFailedIndicator,
     ImageLoadingIndicator,
     isMyMessage,
@@ -241,7 +245,7 @@ const GiphyWithContext = <
         >{`/giphy ${title}`}</Text>
       </View>
       <View style={styles.selectionImageContainer}>
-        <Image
+        <ImageComponent
           onError={(error) => {
             console.warn(error);
             setLoadingImage(false);
@@ -339,7 +343,7 @@ const GiphyWithContext = <
           container,
         ]}
       >
-        <Image
+        <ImageComponent
           accessibilityLabel='Giphy Attachment Image'
           onError={(error) => {
             console.warn(error);
@@ -446,6 +450,7 @@ export const Giphy = <
 ) => {
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
   const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
@@ -464,6 +469,7 @@ export const Giphy = <
         additionalTouchableProps,
         giphyVersion,
         handleAction,
+        ImageComponent,
         ImageLoadingFailedIndicator,
         ImageLoadingIndicator,
         isMyMessage,

package/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,13 @@
 import React from 'react';
-import { Image, ImageStyle, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  Image,
+  ImageProps,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native';
 import Svg, { Circle, CircleProps } from 'react-native-svg';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
@@ -38,6 +46,7 @@ export type AvatarProps = {
   containerStyle?: StyleProp<ViewStyle>;
   /** image url */
   image?: string;
+  ImageComponent?: React.ComponentType<ImageProps>;
   /** name of the picture, used for fallback */
   imageStyle?: StyleProp<ImageStyle>;
   name?: string;
@@ -53,6 +62,7 @@ export type AvatarProps = {
 export const Avatar: React.FC<AvatarProps> = (props) => {
   const {
     containerStyle,
+    ImageComponent = Image,
     image: imageProp,
     imageStyle,
     name,
@@ -95,7 +105,7 @@ export const Avatar: React.FC<AvatarProps> = (props) => {
             }}
           />
         ) : (
-          <Image
+          <ImageComponent
             accessibilityLabel={testID || 'Avatar Image'}
             onError={() => setLoadingImageError(true)}
             source={{

package/src/components/Avatar/GroupAvatar.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
+import { Image, ImageProps, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useLoadingImage } from '../../hooks/useLoadingImage';
 import { getResizedImageUrl } from '../../utils/getResizedImageUrl';
-
 const randomImageBaseUrl = 'https://getstream.io/random_png/';
 const randomSvgBaseUrl = 'https://getstream.io/random_svg/';
 const streamCDN = 'stream-io-cdn.com';
@@ -27,6 +26,7 @@ export type GroupAvatarProps = {
   /** total size in pixels */
   size: number;
   containerStyle?: StyleProp<ViewStyle>;
+  ImageComponent?: React.ComponentType<ImageProps>;
   /** image urls */
   images?: string[];
   /** name of the users, used for fallback */
@@ -38,7 +38,7 @@ export type GroupAvatarProps = {
  * GroupAvatar - A round group of avatar images with fallbacks to users' initials
  */
 export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
-  const { containerStyle, images, names, size, testID } = props;
+  const { containerStyle, ImageComponent = Image, images, names, size, testID } = props;
   const {
     theme: {
       groupAvatar: { container, image },
@@ -136,7 +136,7 @@ export const GroupAvatar: React.FC<GroupAvatarProps> = (props) => {
             ]}
           >
             {column.map(({ height, name, url, width }, rowIndex) => (
-              <Image
+              <ImageComponent
                 accessibilityLabel={testID || 'Avatar Image'}
                 key={`avatar-${url}-${rowIndex}`}
                 onError={() => setLoadingImageError(true)}

package/src/components/ChannelList/hooks/listeners/__tests__/useChannelUpdated.test.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Text } from 'react-native';
+import { Image, Text } from 'react-native';
 
 import { act } from 'react-test-renderer';
 
@@ -59,6 +59,7 @@ describe('useChannelUpdated', () => {
             client: mockClient,
             connectionRecovering: false,
             enableOfflineSupport: false,
+            ImageComponent: Image,
             isOnline: true,
             mutedUsers: [],
             setActiveChannel: () => null,

package/src/components/ChannelPreview/ChannelAvatar.tsx

@@ -4,6 +4,7 @@ import type { ChannelPreviewProps } from './ChannelPreview';
 import { useChannelPreviewDisplayAvatar } from './hooks/useChannelPreviewDisplayAvatar';
 import { useChannelPreviewDisplayPresence } from './hooks/useChannelPreviewDisplayPresence';
 
+import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
 import { Avatar } from '../Avatar/Avatar';
 import { GroupAvatar } from '../Avatar/GroupAvatar';
@@ -15,26 +16,44 @@ export type ChannelAvatarProps<
 /**
  * This UI component displays an avatar for a particular channel.
  */
-export const ChannelAvatar = <
+export const ChannelAvatarWithContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ChannelAvatarProps<StreamChatGenerics>,
+  props: ChannelAvatarProps<StreamChatGenerics> & Pick<ChatContextValue, 'ImageComponent'>,
 ) => {
-  const { channel } = props;
+  const { channel, ImageComponent } = props;
 
   const displayAvatar = useChannelPreviewDisplayAvatar(channel);
   const displayPresence = useChannelPreviewDisplayPresence(channel);
 
   if (displayAvatar.images) {
-    return <GroupAvatar images={displayAvatar.images} names={displayAvatar.names} size={40} />;
+    return (
+      <GroupAvatar
+        ImageComponent={ImageComponent}
+        images={displayAvatar.images}
+        names={displayAvatar.names}
+        size={40}
+      />
+    );
   }
 
   return (
     <Avatar
       image={displayAvatar.image}
+      ImageComponent={ImageComponent}
       name={displayAvatar.name}
       online={displayPresence}
       size={40}
     />
   );
 };
+
+export const ChannelAvatar = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  props: ChannelAvatarProps<StreamChatGenerics>,
+) => {
+  const { ImageComponent } = useChatContext<StreamChatGenerics>();
+
+  return <ChannelAvatarWithContext {...props} ImageComponent={ImageComponent} />;
+};