stream-chat-react-native-core 9.6.2-beta.5 → 9.7.0

package/src/components/MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator.tsx

@@ -7,8 +7,6 @@ import { AttachmentFileUploadProgressIndicator } from '../../../../components/At
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { ExclamationCircle } from '../../../../icons/exclamation-circle-fill';
-import { Warning } from '../../../../icons/exclamation-triangle-fill';
 import { primitives } from '../../../../theme';
 import { RetryBadge } from '../../../ui/Badge/RetryBadge';
 
@@ -44,6 +42,7 @@ export type FileUploadRetryIndicatorProps = {
 };
 
 export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       semantics,
@@ -59,7 +58,7 @@ export const FileUploadRetryIndicator = ({ onPress }: FileUploadRetryIndicatorPr
       testID='inline-retry-indicator'
     >
       <View style={[styles.networkErrorContainer, fileUploadRetryIndicator.networkErrorContainer]}>
-        <Warning
+        <icons.Warning
           height={16}
           fill={semantics.accentError}
           testID='retry-upload-progress-indicator'
@@ -91,6 +90,7 @@ export type FileUploadNotSupportedIndicatorProps = {
 export const FileUploadNotSupportedIndicator = ({
   localMetadata,
 }: FileUploadNotSupportedIndicatorProps) => {
+  const { icons } = useComponentsContext();
   const styles = useFileUploadNotSupportedStyles();
   const {
     theme: {
@@ -108,7 +108,7 @@ export const FileUploadNotSupportedIndicator = ({
       style={[styles.container, fileUploadNotSupportedIndicator.container]}
       testID='inline-not-supported-indicator'
     >
-      <ExclamationCircle height={16} width={16} fill={semantics.accentError} />
+      <icons.ExclamationCircle height={16} width={16} fill={semantics.accentError} />
       <Text style={[styles.notSupportedText, fileUploadNotSupportedIndicator.notSupportedText]}>
         {message}
       </Text>
@@ -138,6 +138,7 @@ export const ImageUploadRetryIndicator = ({ onRetryHandler }: ImageUploadRetryIn
 };
 
 export const ImageUploadNotSupportedIndicator = () => {
+  const { icons } = useComponentsContext();
   const styles = useImageUploadNotSupportedIndicatorStyles();
   const {
     theme: {
@@ -150,7 +151,7 @@ export const ImageUploadNotSupportedIndicator = () => {
       style={[styles.container, imageUploadNotSupportedIndicator.container]}
       testID='inline-not-supported-indicator'
     >
-      <ExclamationCircle height={20} width={20} fill={semantics.accentError} />
+      <icons.ExclamationCircle height={20} width={20} fill={semantics.accentError} />
     </View>
   );
 };

package/src/components/MessageInput/components/AttachmentPreview/VideoAttachmentUploadPreview.tsx

@@ -8,8 +8,8 @@ import { FileAttachmentUploadPreview } from './FileAttachmentUploadPreview';
 import { ImageAttachmentUploadPreview } from './ImageAttachmentUploadPreview';
 
 import { useMessageInputContext } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { Recorder } from '../../../../icons';
 import { primitives } from '../../../../theme';
 import { UploadAttachmentPreviewProps } from '../../../../types/types';
 import { formatMsToMinSec, getDurationLabelFromDuration } from '../../../../utils/utils';
@@ -63,6 +63,7 @@ export const VideoAttachmentMetadataPill = ({
   format?: 'descriptive' | 'timer';
 }) => {
   const styles = useStyles();
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -81,7 +82,7 @@ export const VideoAttachmentMetadataPill = ({
 
   return durationLabel ? (
     <View style={styles.durationContainer}>
-      <Recorder height={12} width={12} pathFill={semantics.textOnInverse} />
+      <icons.Recorder height={12} width={12} pathFill={semantics.textOnInverse} />
       <Text style={styles.durationText}>{durationLabel}</Text>
     </View>
   ) : null;

package/src/components/MessageInput/components/AudioRecorder/AudioRecorder.tsx

@@ -6,6 +6,7 @@ import Animated, { type AnimatedStyle } from 'react-native-reanimated';
 import dayjs from 'dayjs';
 
 import { Button } from '../../../../components/ui';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -14,12 +15,7 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { Tick } from '../../../../icons/checkmark';
-import { ChevronLeft } from '../../../../icons/chevron-left';
-import { Delete } from '../../../../icons/delete';
-import { Stop } from '../../../../icons/stop-fill';
 import { IconProps } from '../../../../icons/utils/base';
-import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -45,6 +41,7 @@ const StopRecording = ({
 }: {
   stopVoiceRecordingHandler: () => Promise<void>;
 }) => {
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -54,8 +51,8 @@ const StopRecording = ({
   };
 
   const StopIcon = useCallback(
-    (props: IconProps) => <Stop {...props} fill={semantics.buttonDestructiveBg} />,
-    [semantics.buttonDestructiveBg],
+    (props: IconProps) => <icons.Stop {...props} fill={semantics.buttonDestructiveBg} />,
+    [icons, semantics.buttonDestructiveBg],
   );
 
   return (
@@ -78,6 +75,7 @@ const UploadRecording = ({
   audioRecordingSendOnComplete: boolean;
   uploadVoiceRecordingHandler: (sendOnComplete: boolean) => Promise<void>;
 }) => {
+  const { icons } = useComponentsContext();
   const onUploadVoiceRecording = () => {
     NativeHandlers.triggerHaptic('impactMedium');
     uploadVoiceRecordingHandler(audioRecordingSendOnComplete);
@@ -89,7 +87,7 @@ const UploadRecording = ({
       variant='primary'
       type='solid'
       onPress={onUploadVoiceRecording}
-      LeadingIcon={Tick}
+      LeadingIcon={icons.Tick}
       iconOnly
       size='sm'
     />
@@ -101,6 +99,7 @@ const DeleteRecording = ({
 }: {
   deleteVoiceRecordingHandler: () => Promise<void>;
 }) => {
+  const { icons } = useComponentsContext();
   const { addNotification } = useNotificationApi();
   const { t } = useTranslationContext();
   const onDeleteVoiceRecording = async () => {
@@ -120,7 +119,7 @@ const DeleteRecording = ({
       size='sm'
       iconOnly
       onPress={onDeleteVoiceRecording}
-      LeadingIcon={Delete}
+      LeadingIcon={icons.Delete}
     />
   );
 };
@@ -136,6 +135,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
     status,
     duration,
   } = props;
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const recordingStopped = status === 'stopped';
@@ -176,7 +176,7 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
     return (
       <>
         <View style={[styles.micContainer, micContainer]} testID='recording-active-container'>
-          <Mic height={20} width={20} stroke={semantics.accentError} {...micIcon} />
+          <icons.Mic height={20} width={20} stroke={semantics.accentError} {...micIcon} />
           <Text style={[styles.durationLabel]}>
             {duration ? dayjs.duration(duration).format('mm:ss') : '00:00'}
           </Text>
@@ -187,7 +187,12 @@ const AudioRecorderWithContext = (props: AudioRecorderPropsWithContext) => {
           <Text style={[styles.slideToCancel, { color: semantics.textPrimary }]}>
             {t('Slide to Cancel')}
           </Text>
-          <ChevronLeft stroke={semantics.textTertiary} height={20} width={20} {...arrowLeftIcon} />
+          <icons.ChevronLeft
+            stroke={semantics.textTertiary}
+            height={20}
+            width={20}
+            {...arrowLeftIcon}
+          />
         </Animated.View>
       </>
     );

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingButton.tsx

@@ -12,6 +12,7 @@ import Animated, {
 
 import { useA11yLabel } from '../../../../a11y/hooks/useA11yLabel';
 import { useActiveAudioPlayer } from '../../../../contexts/audioPlayerContext/AudioPlayerContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
@@ -20,7 +21,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/voice';
 import { NativeHandlers } from '../../../../native';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -79,6 +79,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
     status,
     recording,
   } = props;
+  const { icons } = useComponentsContext();
   const { micPositionX, micPositionY } = useMicPositionContext();
   const activeAudioPlayer = useActiveAudioPlayer();
   const scale = useSharedValue(1);
@@ -260,7 +261,7 @@ export const AudioRecordingButtonWithContext = (props: AudioRecordingButtonProps
         accessible
         style={[styles.container, animatedStyle, micButtonContainer]}
       >
-        <Mic height={20} width={20} strokeWidth={1.5} stroke={buttonStyles.foregroundColor} />
+        <icons.Mic height={20} width={20} strokeWidth={1.5} stroke={buttonStyles.foregroundColor} />
       </Animated.View>
     </GestureDetector>
   );

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingInProgress.tsx

@@ -10,7 +10,6 @@ import {
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Mic } from '../../../../icons/voice';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 
@@ -27,7 +26,7 @@ type AudioRecordingInProgressPropsWithContext = Pick<
 
 const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressPropsWithContext) => {
   const { maxDataPointsDrawn = 60, duration, waveformData } = props;
-  const { AudioRecordingWaveform } = useComponentsContext();
+  const { AudioRecordingWaveform, icons } = useComponentsContext();
 
   const styles = useStyles();
 
@@ -44,7 +43,7 @@ const AudioRecordingInProgressWithContext = (props: AudioRecordingInProgressProp
     <View style={[styles.container, container]}>
       {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}
       <View style={styles.micContainer}>
-        <Mic height={20} width={20} stroke={semantics.accentError} />
+        <icons.Mic height={20} width={20} stroke={semantics.accentError} />
         <Text style={[styles.durationText, durationText]}>
           {duration ? dayjs.duration(duration).format('mm:ss') : null}
         </Text>

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingLockIndicator.tsx

@@ -3,10 +3,8 @@ import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
 
 import Animated, { type AnimatedStyle, LinearTransition } from 'react-native-reanimated';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { ChevronUp } from '../../../../icons/chevron-up';
-import { Lock } from '../../../../icons/lock';
-import { Unlock } from '../../../../icons/unlock';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
 
@@ -31,6 +29,7 @@ export const AudioRecordingLockIndicator = ({
 }: AudioRecordingLockIndicatorProps) => {
   const [visible, setVisible] = useState(true);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>(undefined);
+  const { icons } = useComponentsContext();
   const styles = useStyles();
 
   useEffect(() => {
@@ -64,12 +63,12 @@ export const AudioRecordingLockIndicator = ({
       style={[styles.container, style, { bottom: messageInputHeight }, container]}
     >
       {micLocked ? (
-        <Lock stroke={semantics.accentPrimary} height={20} width={20} />
+        <icons.Lock stroke={semantics.accentPrimary} height={20} width={20} />
       ) : (
-        <Unlock stroke={semantics.textPrimary} height={20} width={20} {...lockIcon} />
+        <icons.Unlock stroke={semantics.textPrimary} height={20} width={20} {...lockIcon} />
       )}
       {!micLocked && (
-        <ChevronUp stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
+        <icons.ChevronUp stroke={semantics.textPrimary} height={20} width={20} {...arrowUpIcon} />
       )}
     </Animated.View>
   );

package/src/components/MessageInput/components/AudioRecorder/AudioRecordingPreview.tsx

@@ -3,14 +3,13 @@ import { Pressable, StyleSheet, View } from 'react-native';
 
 import dayjs from 'dayjs';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMessageInputContext } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../../../hooks';
 import { useAudioPlayer } from '../../../../hooks/useAudioPlayer';
 import { useStateStore } from '../../../../hooks/useStateStore';
 
-import { Pause } from '../../../../icons/pause-fill';
-import { Play } from '../../../../icons/play-fill';
 import { AudioPlayerState } from '../../../../state-store/audio-player';
 import { AudioRecorderManagerState } from '../../../../state-store/audio-recorder-manager';
 import { primitives } from '../../../../theme';
@@ -48,6 +47,7 @@ const audioRecorderSelector = (state: AudioRecorderManagerState) => ({
  */
 export const AudioRecordingPreview = () => {
   const { audioRecorderManager } = useMessageInputContext();
+  const { icons } = useComponentsContext();
   const styles = useStyles();
 
   const {
@@ -122,9 +122,9 @@ export const AudioRecordingPreview = () => {
       <View style={[styles.infoContainer, infoContainer]}>
         <Pressable onPress={handlePlayPause} hitSlop={15}>
           {!isPlaying ? (
-            <Play fill={semantics.textPrimary} height={20} width={20} {...playIcon} />
+            <icons.Play fill={semantics.textPrimary} height={20} width={20} {...playIcon} />
           ) : (
-            <Pause fill={semantics.textPrimary} height={20} width={20} {...pauseIcon} />
+            <icons.Pause fill={semantics.textPrimary} height={20} width={20} {...pauseIcon} />
           )}
         </Pressable>
         {/* `durationMillis` is for Expo apps, `currentPosition` is for Native CLI apps. */}

package/src/components/MessageInput/components/InputButtons/AttachButton.tsx

@@ -5,13 +5,13 @@ import {
   AttachmentPickerContextValue,
   useAttachmentPickerContext,
 } from '../../../../contexts/attachmentPickerContext/AttachmentPickerContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
 import { useStableCallback } from '../../../../hooks';
 import { useAttachmentPickerState } from '../../../../hooks/useAttachmentPickerState';
-import { Plus } from '../../../../icons/plus';
 import { Button } from '../../../ui/';
 
 type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttachButtonPress'> &
@@ -23,6 +23,7 @@ type AttachButtonPropsWithContext = Pick<MessageInputContextValue, 'handleAttach
   } & { toggleAttachmentPicker: () => void };
 
 const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
+  const { icons } = useComponentsContext();
   const {
     disabled = false,
     handleAttachButtonPress,
@@ -55,7 +56,7 @@ const AttachButtonWithContext = (props: AttachButtonPropsWithContext) => {
       type='outline'
       size='lg'
       iconOnly
-      LeadingIcon={Plus}
+      LeadingIcon={icons.Plus}
       onPress={onPressHandler}
       disabled={disabled}
       testID='attach-button'

package/src/components/MessageInput/components/LinkPreviewList.tsx

@@ -11,7 +11,6 @@ import { AttachmentRemoveControl } from './AttachmentPreview/AttachmentRemoveCon
 
 import { useMessageComposer, useTheme } from '../../../contexts';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
-import { Link } from '../../../icons/link';
 import { components, primitives } from '../../../theme';
 import { useLinkPreviews } from '../hooks/useLinkPreviews';
 
@@ -39,7 +38,7 @@ type LinkPreviewProps = {
 
 export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
   const styles = useStyles();
-  const { ImageComponent } = useComponentsContext();
+  const { icons, ImageComponent } = useComponentsContext();
   const { linkPreviewsManager } = useMessageComposer();
   const { image_url, thumb_url, title, text, og_scrape_url } = linkPreview;
 
@@ -74,7 +73,7 @@ export const LinkPreviewCard = ({ linkPreview }: LinkPreviewProps) => {
           ) : null}
           {og_scrape_url ? (
             <View style={styles.linkContainer}>
-              <Link
+              <icons.Link
                 height={styles.text.fontSize}
                 stroke={styles.text.color}
                 width={styles.text.fontSize}

package/src/components/MessageInput/components/OutputButtons/EditButton.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { Tick } from '../../../../icons/checkmark';
 import { Button } from '../../../ui';
 
 export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
@@ -14,6 +14,7 @@ export type EditButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessag
 
 export const EditButton = (props: EditButtonProps) => {
   const { disabled = false, sendMessage: propsSendMessage } = props;
+  const { icons } = useComponentsContext();
   const { sendMessage: sendMessageFromContext } = useMessageInputContext();
   const sendMessage = propsSendMessage || sendMessageFromContext;
 
@@ -29,7 +30,7 @@ export const EditButton = (props: EditButtonProps) => {
       accessibilityLabelKey='a11y/Save edited message'
       variant='primary'
       type='solid'
-      LeadingIcon={Tick}
+      LeadingIcon={icons.Tick}
       iconOnly
       onPress={onPressHandler}
       size='sm'

package/src/components/MessageInput/components/OutputButtons/SendButton.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageInputContextValue,
   useMessageInputContext,
 } from '../../../../contexts/messageInputContext/MessageInputContext';
-import { SendRight } from '../../../../icons/send';
 import { Button } from '../../../ui';
 
 export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessage'>> & {
@@ -14,6 +14,7 @@ export type SendButtonProps = Partial<Pick<MessageInputContextValue, 'sendMessag
 
 export const SendButton = (props: SendButtonProps) => {
   const { disabled = false, sendMessage: propsSendMessage } = props;
+  const { icons } = useComponentsContext();
   const { sendMessage: sendMessageFromContext } = useMessageInputContext();
   const sendMessage = propsSendMessage || sendMessageFromContext;
 
@@ -30,7 +31,7 @@ export const SendButton = (props: SendButtonProps) => {
       variant='primary'
       type='solid'
       disabled={disabled}
-      LeadingIcon={SendRight}
+      LeadingIcon={icons.SendRight}
       onPress={onPressHandler}
       size='sm'
       testID='send-button'

package/src/components/MessageList/ScrollToBottomButton.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Down } from '../../icons/arrow-up';
 import { primitives } from '../../theme';
 import { BadgeNotification } from '../ui';
 import { Button } from '../ui/Button';
@@ -26,6 +26,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
   const {
     theme: { semantics },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const accessibilityLabelParams = React.useMemo(
     () => (unreadCount ? { count: unreadCount } : undefined),
     [unreadCount],
@@ -58,7 +59,7 @@ export const ScrollToBottomButton = (props: ScrollToBottomButtonProps) => {
           accessibilityLabelParams={accessibilityLabelParams}
           variant='secondary'
           type='outline'
-          LeadingIcon={Down}
+          LeadingIcon={icons.Down}
           onPress={onPress}
           size='md'
           testID='scroll-to-bottom-button'

package/src/components/MessageList/UnreadMessagesNotification.tsx

@@ -5,11 +5,10 @@ import {
   ChannelContextValue,
   useChannelContext,
 } from '../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { ArrowUp } from '../../icons/arrow-up';
-import { NewClose } from '../../icons/xmark';
 import { ChannelUnreadStateStoreType } from '../../state-store/channel-unread-state';
 import { primitives } from '../../theme';
 import { Button } from '../ui';
@@ -39,6 +38,7 @@ const channelUnreadStateSelector = (state: ChannelUnreadStateStoreType) => ({
 export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProps) => {
   const { onCloseHandler, onPressHandler, unreadCount, channelUnreadStateStore } = props;
   const { t } = useTranslationContext();
+  const { icons } = useComponentsContext();
   const { loadChannelAtFirstUnreadMessage, markRead, setChannelUnreadState, setTargetedMessage } =
     useChannelContext();
   const { unread_messages } = useStateStore(
@@ -76,7 +76,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
         <Button
           variant='secondary'
           type='ghost'
-          LeadingIcon={ArrowUp}
+          LeadingIcon={icons.ArrowUp}
           label={count ? t('{{count}} unread', { count }) : t('Unread Messages')}
           onPress={handleOnPress}
           size='md'
@@ -88,7 +88,7 @@ export const UnreadMessagesNotification = (props: UnreadMessagesNotificationProp
           variant='secondary'
           type='ghost'
           iconOnly
-          LeadingIcon={NewClose}
+          LeadingIcon={icons.NewClose}
           onPress={handleClose}
           size='md'
         />

package/src/components/MessageMenu/MessageReactionPicker.tsx

@@ -6,6 +6,7 @@ import { EmojiPickerList } from './EmojiPickerList';
 import { useMessageOwnReactions } from './hooks/useMessageOwnReactions';
 import { ReactionButton } from './ReactionButton';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { MessageContextValue } from '../../contexts/messageContext/MessageContext';
 import {
   MessagesContextValue,
@@ -15,7 +16,6 @@ import {
 import { useOwnCapabilitiesContext } from '../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
-import { Plus } from '../../icons/plus';
 import { NativeHandlers } from '../../native';
 import { scheduleActionOnClose } from '../../state-store';
 
@@ -90,6 +90,7 @@ export const EmojiViewerButton = ({
 }) => {
   const styles = useStyles();
   const [emojiViewerOpened, setEmojiViewerOpened] = React.useState<boolean>(false);
+  const { icons } = useComponentsContext();
 
   const {
     theme: {
@@ -120,7 +121,7 @@ export const EmojiViewerButton = ({
           type='outline'
           size='sm'
           iconOnly
-          LeadingIcon={Plus}
+          LeadingIcon={icons.Plus}
           onPress={onOpenEmojiViewer}
           testID='more-reactions-button'
         />

package/src/components/MessageMenu/MessageUserReactions.tsx

@@ -24,7 +24,6 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
 import { IconProps } from '../../icons';
-import { MoreEmojis } from '../../icons/emoji-add-1';
 import { primitives } from '../../theme';
 import { Reaction } from '../../types/types';
 import { ReactionData } from '../../utils/utils';
@@ -104,7 +103,7 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   );
   const [selectedReaction, setSelectedReaction] = useState<string | undefined>(undefined);
   const { supportedReactions: contextSupportedReactions } = useMessagesContext();
-  const { MessageUserReactionsItem } = useComponentsContext();
+  const { icons, MessageUserReactionsItem } = useComponentsContext();
   const { handleReaction } = useMessageContext();
   const supportedReactions = propSupportedReactions ?? contextSupportedReactions;
 
@@ -226,10 +225,10 @@ export const MessageUserReactions = (props: MessageUserReactionsProps) => {
   const MoreEmojisIcon = useCallback(
     (props: IconProps) => (
       <View style={styles.showMoreReactionsButton}>
-        <MoreEmojis {...props} />
+        <icons.MoreEmojis {...props} />
       </View>
     ),
-    [styles.showMoreReactionsButton],
+    [icons, styles.showMoreReactionsButton],
   );
 
   const ShowMoreReactionsButton = useCallback(

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -8,7 +8,6 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../hooks';
-import { Unknown } from '../../icons';
 
 import { primitives } from '../../theme';
 import type { Reaction } from '../../types/types';
@@ -29,7 +28,7 @@ export const MessageUserReactionsItem = ({
   reaction,
   supportedReactions,
 }: MessageUserReactionsItemProps) => {
-  const { MessageUserReactionsAvatar } = useComponentsContext();
+  const { icons, MessageUserReactionsAvatar } = useComponentsContext();
   const { id, name, type } = reaction;
   const {
     theme: {
@@ -52,7 +51,7 @@ export const MessageUserReactionsItem = ({
     }
   });
 
-  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon ?? Unknown;
+  const Icon = supportedReactions.find((reaction) => reaction.type === type)?.Icon ?? icons.Unknown;
 
   return (
     <Pressable

package/src/components/MessageMenu/__tests__/MessageUserReactionsItem.test.tsx

@@ -11,7 +11,7 @@ import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { MessageUserReactionsItem } from '../MessageUserReactionsItem';
 
-jest.mock('../../../icons', () => ({
+jest.mock('../../../icons/Unknown', () => ({
   Unknown: () => {
     const { Text } = require('react-native');
     return <Text testID='unknown-icon'>unknown</Text>;