stream-chat-react-native-core 9.0.0-beta.31 → 9.0.0-beta.32

package/src/components/Attachment/Gallery.tsx

@@ -16,6 +16,7 @@ import { openUrlSafely } from './utils/openUrlSafely';
 
 import { useTranslationContext } from '../../contexts';
 import { useChatConfigContext } from '../../contexts/chatConfigContext/ChatConfigContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   ImageGalleryContextValue,
   useImageGalleryContext,
@@ -54,14 +55,7 @@ export type GalleryPropsWithContext = Pick<ImageGalleryContextValue, 'imageGalle
     | 'message'
     | 'messageContentOrder'
   > &
-  Pick<
-    MessagesContextValue,
-    | 'additionalPressableProps'
-    | 'VideoThumbnail'
-    | 'ImageLoadingIndicator'
-    | 'ImageLoadingFailedIndicator'
-    | 'myMessageTheme'
-  > &
+  Pick<MessagesContextValue, 'additionalPressableProps' | 'myMessageTheme'> &
   Pick<OverlayContextValue, 'setOverlay'> & {
     channelId: string | undefined;
     messageHasOnlyOneMedia: boolean;
@@ -72,8 +66,6 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     additionalPressableProps,
     alignment,
     imageGalleryStateStore,
-    ImageLoadingFailedIndicator,
-    ImageLoadingIndicator,
     images,
     message,
     onLongPress,
@@ -82,10 +74,8 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     preventPress,
     setOverlay,
     videos,
-    VideoThumbnail,
     messageHasOnlyOneMedia = false,
   } = props;
-
   const { resizableCDNHosts } = useChatConfigContext();
   const {
     theme: {
@@ -103,9 +93,7 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
       },
     },
   } = useTheme();
-
   const styles = useStyles();
-
   const sizeConfig = {
     gridHeight,
     gridWidth,
@@ -114,12 +102,10 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     minHeight,
     minWidth,
   };
-
   const imagesAndVideos = [...(images || []), ...(videos || [])];
   const imagesAndVideosValue = `${images?.length}${videos?.length}${images
     ?.map((i) => `${i.image_url}${i.thumb_url}`)
     .join('')}${videos?.map((i) => `${i.image_url}${i.thumb_url}`).join('')}`;
-
   const { height, invertedDirections, thumbnailGrid, width } = useMemo(
     () =>
       buildGallery({
@@ -130,12 +116,10 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [imagesAndVideosValue],
   );
-
   if (!imagesAndVideos?.length) {
     return null;
   }
   const numOfColumns = thumbnailGrid.length;
-
   return (
     <View
       style={[
@@ -180,19 +164,15 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                 width,
                 messageHasOnlyOneMedia,
               });
-
               if (!message) {
                 return null;
               }
-
               return (
                 <GalleryThumbnail
                   additionalPressableProps={additionalPressableProps}
                   borderRadius={borderRadius}
                   colIndex={colIndex}
                   imageGalleryStateStore={imageGalleryStateStore}
-                  ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
-                  ImageLoadingIndicator={ImageLoadingIndicator}
                   imagesAndVideos={imagesAndVideos}
                   invertedDirections={invertedDirections || false}
                   key={rowIndex}
@@ -206,7 +186,6 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
                   rowIndex={rowIndex}
                   setOverlay={setOverlay}
                   thumbnail={thumbnail}
-                  VideoThumbnail={VideoThumbnail}
                 />
               );
             })}
@@ -216,7 +195,6 @@ const GalleryWithContext = (props: GalleryPropsWithContext) => {
     </View>
   );
 };
-
 type GalleryThumbnailProps = {
   borderRadius: GalleryImageBorderRadius;
   colIndex: number;
@@ -227,24 +205,15 @@ type GalleryThumbnailProps = {
   numOfRows: number;
   rowIndex: number;
   thumbnail: Thumbnail;
-} & Pick<
-  MessagesContextValue,
-  | 'additionalPressableProps'
-  | 'VideoThumbnail'
-  | 'ImageLoadingIndicator'
-  | 'ImageLoadingFailedIndicator'
-> &
+} & Pick<MessagesContextValue, 'additionalPressableProps'> &
   Pick<ImageGalleryContextValue, 'imageGalleryStateStore'> &
   Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<OverlayContextValue, 'setOverlay'>;
-
 const GalleryThumbnail = ({
   additionalPressableProps,
   borderRadius,
   colIndex,
   imageGalleryStateStore,
-  ImageLoadingFailedIndicator,
-  ImageLoadingIndicator,
   imagesAndVideos,
   invertedDirections,
   message,
@@ -257,8 +226,8 @@ const GalleryThumbnail = ({
   rowIndex,
   setOverlay,
   thumbnail,
-  VideoThumbnail,
 }: GalleryThumbnailProps) => {
+  const { VideoThumbnail } = useComponentsContext();
   const {
     theme: {
       messageItemView: {
@@ -269,7 +238,6 @@ const GalleryThumbnail = ({
   } = useTheme();
   const { t } = useTranslationContext();
   const styles = useStyles();
-
   const openImageViewer = () => {
     if (!message) {
       return;
@@ -280,7 +248,6 @@ const GalleryThumbnail = ({
     });
     setOverlay('gallery');
   };
-
   const defaultOnPress = () => {
     // If the url is defined then only try to open the file.
     if (thumbnail.url) {
@@ -293,7 +260,6 @@ const GalleryThumbnail = ({
       }
     }
   };
-
   return (
     <Pressable
       disabled={preventPress}
@@ -339,8 +305,6 @@ const GalleryThumbnail = ({
       ) : (
         <GalleryImageThumbnail
           borderRadius={imageBorderRadius ?? borderRadius}
-          ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
-          ImageLoadingIndicator={ImageLoadingIndicator}
           thumbnail={thumbnail}
         />
       )}
@@ -362,16 +326,11 @@ const GalleryThumbnail = ({
     </Pressable>
   );
 };
-
 const GalleryImageThumbnail = ({
   borderRadius,
-  ImageLoadingFailedIndicator,
-  ImageLoadingIndicator,
   thumbnail,
-}: Pick<
-  GalleryThumbnailProps,
-  'ImageLoadingFailedIndicator' | 'ImageLoadingIndicator' | 'thumbnail' | 'borderRadius'
->) => {
+}: Pick<GalleryThumbnailProps, 'thumbnail' | 'borderRadius'>) => {
+  const { ImageLoadingFailedIndicator, ImageLoadingIndicator } = useComponentsContext();
   const {
     isLoadingImage,
     isLoadingImageError,
@@ -379,33 +338,27 @@ const GalleryImageThumbnail = ({
     setLoadingImage,
     setLoadingImageError,
   } = useLoadingImage();
-
   const {
     theme: {
       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={[styles.image, borderRadius]}>
       {isLoadingImageError ? (
@@ -426,7 +379,6 @@ const GalleryImageThumbnail = ({
     </View>
   );
 };
-
 const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWithContext) => {
   const {
     alignment: prevAlignment,
@@ -442,19 +394,16 @@ const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWit
     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}`;
   if (!messageEqual) {
     return false;
   }
-
   const imagesEqual =
     prevImages.length === nextImages.length &&
     prevImages.every(
@@ -465,7 +414,6 @@ const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWit
   if (!imagesEqual) {
     return false;
   }
-
   const videosEqual =
     prevVideos.length === nextVideos.length &&
     prevVideos.every(
@@ -476,20 +424,15 @@ const areEqual = (prevProps: GalleryPropsWithContext, nextProps: GalleryPropsWit
   if (!videosEqual) {
     return false;
   }
-
   const messageThemeEqual =
     JSON.stringify(prevMyMessageTheme) === JSON.stringify(nextMyMessageTheme);
   if (!messageThemeEqual) {
     return false;
   }
-
   return true;
 };
-
 const MemoizedGallery = React.memo(GalleryWithContext, areEqual) as typeof GalleryWithContext;
-
 export type GalleryProps = Partial<GalleryPropsWithContext>;
-
 /**
  * UI component for card in attachments.
  */
@@ -497,8 +440,6 @@ export const Gallery = (props: GalleryProps) => {
   const {
     alignment: propAlignment,
     additionalPressableProps: propAdditionalPressableProps,
-    ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
-    ImageLoadingIndicator: PropImageLoadingIndicator,
     images: propImages,
     message: propMessage,
     myMessageTheme: propMyMessageTheme,
@@ -508,10 +449,8 @@ export const Gallery = (props: GalleryProps) => {
     preventPress: propPreventPress,
     setOverlay: propSetOverlay,
     videos: propVideos,
-    VideoThumbnail: PropVideoThumbnail,
     messageContentOrder: propMessageContentOrder,
   } = props;
-
   const { imageGalleryStateStore } = useImageGalleryContext();
   const {
     alignment: contextAlignment,
@@ -526,13 +465,9 @@ export const Gallery = (props: GalleryProps) => {
   } = useMessageContext();
   const {
     additionalPressableProps: contextAdditionalPressableProps,
-    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
-    ImageLoadingIndicator: ContextImageLoadingIndicator,
     myMessageTheme: contextMyMessageTheme,
-    VideoThumbnail: ContextVideoThumnbnail,
   } = useMessagesContext();
   const { setOverlay: contextSetOverlay } = useOverlayContext();
-
   const images = propImages ?? contextImages ?? [];
   const videos = propVideos ?? contextVideos ?? [];
   const imagesAndVideos = [...images, ...videos];
@@ -541,7 +476,6 @@ export const Gallery = (props: GalleryProps) => {
   if (!images.length && !videos.length) {
     return null;
   }
-
   const additionalPressableProps = propAdditionalPressableProps || contextAdditionalPressableProps;
   const onLongPress = propOnLongPress || contextOnLongPress;
   const onPressIn = propOnPressIn || contextOnPressIn;
@@ -549,18 +483,12 @@ export const Gallery = (props: GalleryProps) => {
   const preventPress =
     typeof propPreventPress === 'boolean' ? propPreventPress : contextPreventPress;
   const setOverlay = propSetOverlay || contextSetOverlay;
-  const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
-  const ImageLoadingFailedIndicator =
-    PropImageLoadingFailedIndicator || ContextImageLoadingFailedIndicator;
-  const ImageLoadingIndicator = PropImageLoadingIndicator || ContextImageLoadingIndicator;
   const myMessageTheme = propMyMessageTheme || contextMyMessageTheme;
   const messageContentOrder = propMessageContentOrder || contextMessageContentOrder;
-
   const messageHasOnlyOneMedia =
     messageContentOrder?.length === 1 &&
     messageContentOrder?.includes('gallery') &&
     imagesAndVideos.length === 1;
-
   return (
     <MemoizedGallery
       {...{
@@ -568,8 +496,6 @@ export const Gallery = (props: GalleryProps) => {
         alignment,
         channelId: message?.cid,
         imageGalleryStateStore,
-        ImageLoadingFailedIndicator,
-        ImageLoadingIndicator,
         images,
         message,
         myMessageTheme,
@@ -579,14 +505,12 @@ export const Gallery = (props: GalleryProps) => {
         preventPress,
         setOverlay,
         videos,
-        VideoThumbnail,
         messageHasOnlyOneMedia,
         messageContentOrder,
       }}
     />
   );
 };
-
 const useStyles = () => {
   const {
     theme: { semantics },
@@ -675,5 +599,4 @@ const useStyles = () => {
     });
   }, [semantics, isMyMessage]);
 };
-
 Gallery.displayName = 'Gallery{messageItemView{gallery}}';

package/src/components/Attachment/GalleryImage.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import { Image, ImageProps, StyleSheet } from 'react-native';
 
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 
 import { getUrlWithoutParams, isLocalUrl, makeImageCompatibleUrl } from '../../utils/utils';
 
-export type GalleryImageWithContextProps = GalleryImageProps &
-  Pick<ChatContextValue, 'ImageComponent'>;
+export type GalleryImageWithContextProps = GalleryImageProps & {
+  ImageComponent?: React.ComponentType<ImageProps>;
+};
 
 export const GalleryImageWithContext = (props: GalleryImageWithContextProps) => {
   const { ImageComponent = Image, uri, style, ...rest } = props;
@@ -48,7 +49,7 @@ export type GalleryImageProps = Omit<ImageProps, 'height' | 'source'> & {
 };
 
 export const GalleryImage = (props: GalleryImageProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
 
   return <MemoizedGalleryImage ImageComponent={ImageComponent} {...props} />;
 };

package/src/components/Attachment/Giphy/GiphyImage.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo } from 'react';
-import { Image, StyleSheet, View } from 'react-native';
+import { Image, ImageProps, StyleSheet, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessagesContextValue,
@@ -15,27 +15,19 @@ import { useLoadingImage } from '../../../hooks/useLoadingImage';
 import { makeImageCompatibleUrl } from '../../../utils/utils';
 import { GiphyBadge } from '../../ui/Badge/GiphyBadge';
 
-export type GiphyImagePropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<
-    MessagesContextValue,
-    'giphyVersion' | 'ImageLoadingIndicator' | 'ImageLoadingFailedIndicator'
-  > & {
-    attachment: Attachment;
-    /**
-     * Whether to render the preview image or the full image
-     */
-    preview?: boolean;
-  };
+export type GiphyImagePropsWithContext = Pick<MessagesContextValue, 'giphyVersion'> & {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & {
+  attachment: Attachment;
+  /**
+   * Whether to render the preview image or the full image
+   */
+  preview?: boolean;
+};
 
 const GiphyImageWithContext = (props: GiphyImagePropsWithContext) => {
-  const {
-    attachment,
-    giphyVersion,
-    ImageComponent = Image,
-    ImageLoadingFailedIndicator,
-    ImageLoadingIndicator,
-    preview = false,
-  } = props;
+  const { attachment, giphyVersion, ImageComponent = Image, preview = false } = props;
+  const { ImageLoadingFailedIndicator, ImageLoadingIndicator } = useComponentsContext();
 
   const { giphy: giphyData, image_url, thumb_url, type } = attachment;
 
@@ -168,25 +160,11 @@ export type GiphyImageProps = Partial<GiphyImagePropsWithContext> & {
  * UI component for card in attachments.
  */
 export const GiphyImage = (props: GiphyImageProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { giphyVersion } = useMessagesContext();
 
-  const {
-    ImageLoadingFailedIndicator: ContextImageLoadingFailedIndicator,
-    ImageLoadingIndicator: ContextImageLoadingIndicator,
-  } = useMessagesContext();
-  const ImageLoadingFailedIndicator =
-    ContextImageLoadingFailedIndicator || props.ImageLoadingFailedIndicator;
-  const ImageLoadingIndicator = ContextImageLoadingIndicator || props.ImageLoadingIndicator;
-
   return (
-    <MemoizedGiphyImage
-      giphyVersion={giphyVersion}
-      ImageComponent={ImageComponent}
-      ImageLoadingFailedIndicator={ImageLoadingFailedIndicator}
-      ImageLoadingIndicator={ImageLoadingIndicator}
-      {...props}
-    />
+    <MemoizedGiphyImage giphyVersion={giphyVersion} ImageComponent={ImageComponent} {...props} />
   );
 };
 

package/src/components/Attachment/UnsupportedAttachment.tsx

@@ -3,32 +3,27 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment } from 'stream-chat';
 
-import { FileIconProps } from './FileIcon';
+import type { FileIconProps } from './FileIcon';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { primitives } from '../../theme';
 
-export type UnsupportedAttachmentProps = Partial<
-  Pick<MessagesContextValue, 'FileAttachmentIcon'> & Pick<MessageContextValue, 'isMyMessage'>
-> & {
+export type UnsupportedAttachmentProps = Partial<Pick<MessageContextValue, 'isMyMessage'>> & {
   /** The attachment to render */
   attachment: Attachment;
   attachmentIconSize?: FileIconProps['size'];
 };
 
 export const UnsupportedAttachment = (props: UnsupportedAttachmentProps) => {
-  const { FileAttachmentIcon: FileAttachmentIconDefault } = useMessagesContext();
+  const { FileAttachmentIcon } = useComponentsContext();
   const { isMyMessage } = useMessageContext();
-  const { attachment, attachmentIconSize, FileAttachmentIcon = FileAttachmentIconDefault } = props;
+  const { attachment, attachmentIconSize } = props;
 
   const styles = useStyles({ isMyMessage });
 

package/src/components/Attachment/UrlPreview/URLPreview.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -13,7 +14,7 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessageContextValue,
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<
     MessagesContextValue,
     'additionalPressableProps' | 'myMessageTheme' | 'isAttachmentEqual'
@@ -210,7 +212,7 @@ export type URLPreviewProps = Partial<URLPreviewPropsWithContext> & {
  * UI component for card in attachments.
  */
 export const URLPreview = (props: URLPreviewProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
   const { additionalPressableProps, isAttachmentEqual, myMessageTheme } = useMessagesContext();
 

package/src/components/Attachment/UrlPreview/URLPreviewCompact.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo } from 'react';
 import {
   Image,
+  ImageProps,
   ImageStyle,
   Pressable,
   StyleProp,
@@ -13,7 +14,7 @@ import {
 
 import type { Attachment } from 'stream-chat';
 
-import { ChatContextValue, useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import {
   MessageContextValue,
@@ -32,8 +33,9 @@ import { VideoPlayIndicator } from '../../ui';
 import { ImageBackground } from '../../UIComponents/ImageBackground';
 import { openUrlSafely } from '../utils/openUrlSafely';
 
-export type URLPreviewCompactPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
+export type URLPreviewCompactPropsWithContext = {
+  ImageComponent?: React.ComponentType<ImageProps>;
+} & Pick<MessageContextValue, 'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'> &
   Pick<MessagesContextValue, 'additionalPressableProps' | 'myMessageTheme'> & {
     attachment: Attachment;
     channelId: string | undefined;
@@ -208,7 +210,7 @@ export type URLPreviewCompactProps = Partial<URLPreviewCompactPropsWithContext>
  * UI component for card in attachments.
  */
 export const URLPreviewCompact = (props: URLPreviewCompactProps) => {
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const { message, onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
   const { additionalPressableProps, myMessageTheme } = useMessagesContext();
 

package/src/components/AttachmentPicker/AttachmentPicker.tsx

@@ -15,6 +15,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 
 import { useAttachmentPickerContext } from '../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { BottomSheet } from '../BottomSheetCompatibility/BottomSheet';
@@ -35,12 +36,11 @@ export const AttachmentPicker = () => {
   const {
     closePicker,
     attachmentPickerStore,
-    AttachmentPickerSelectionBar,
-    AttachmentPickerContent,
     attachmentPickerBottomSheetHeight,
     bottomSheetRef: ref,
     disableAttachmentPicker,
   } = useAttachmentPickerContext();
+  const { AttachmentPickerContent, AttachmentPickerSelectionBar } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();

package/src/components/AttachmentPicker/components/AttachmentMediaPicker/AttachmentPickerItem.tsx

@@ -7,6 +7,7 @@ import { FileReference, isLocalImageAttachment, isLocalVideoAttachment } from 's
 import { isIosLimited, type PhotoContentItemType } from './shared';
 
 import { useAttachmentPickerContext } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useAttachmentManagerState } from '../../../../contexts/messageInputContext/hooks/useAttachmentManagerState';
 import { useMessageComposer } from '../../../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
@@ -26,8 +27,8 @@ type AttachmentPickerItemType = {
 
 const AttachmentVideo = (props: AttachmentPickerItemType) => {
   const { asset } = props;
-  const { numberOfAttachmentPickerImageColumns, ImageOverlaySelectedComponent } =
-    useAttachmentPickerContext();
+  const { numberOfAttachmentPickerImageColumns } = useAttachmentPickerContext();
+  const { ImageOverlaySelectedComponent } = useComponentsContext();
   const { vw } = useViewport();
   const { t } = useTranslationContext();
   const messageComposer = useMessageComposer();
@@ -90,8 +91,8 @@ const AttachmentVideo = (props: AttachmentPickerItemType) => {
 
 const AttachmentImage = (props: AttachmentPickerItemType) => {
   const { asset } = props;
-  const { numberOfAttachmentPickerImageColumns, ImageOverlaySelectedComponent } =
-    useAttachmentPickerContext();
+  const { numberOfAttachmentPickerImageColumns } = useAttachmentPickerContext();
+  const { ImageOverlaySelectedComponent } = useComponentsContext();
   const {
     theme: {
       attachmentPicker: { image, imageOverlay },