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

package/src/components/ChannelDetails/components/ChannelEditDetailsFormHeader.tsx

@@ -5,9 +5,9 @@ import { ActivityIndicator, Keyboard } from 'react-native';
 import { ModalHeader } from './modal/ModalHeader';
 
 import { useChannelEditDetailsContext } from '../../../contexts/channelEditDetailsContext/ChannelEditDetailsContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../hooks/useStableCallback';
-import { Checkmark } from '../../../icons/checkmark-1';
 import { useAreChannelDetailsEdited } from '../../../state-store/edit-channel-details-store';
 import { Button } from '../../ui/Button/Button';
 
@@ -23,6 +23,7 @@ export type ChannelEditDetailsFormHeaderProps = {
 
 export const ChannelEditDetailsFormHeader = ({ onClose }: ChannelEditDetailsFormHeaderProps) => {
   const { store, submit } = useChannelEditDetailsContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const [saving, setSaving] = useState(false);
   const channelDetailsEdited = useAreChannelDetailsEdited(store);
@@ -52,7 +53,7 @@ export const ChannelEditDetailsFormHeader = ({ onClose }: ChannelEditDetailsForm
           accessibilityState={{ busy: saving, disabled: !confirmEnabled }}
           disabled={!confirmEnabled}
           iconOnly
-          LeadingIcon={saving ? LoadingButtonIcon : Checkmark}
+          LeadingIcon={saving ? LoadingButtonIcon : icons.Checkmark}
           onPress={handleConfirm}
           testID='channel-details-edit-confirm-button'
           type='solid'

package/src/components/ChannelDetails/components/ChannelEditImageSheet.tsx

@@ -15,11 +15,7 @@ import { useComponentsContext } from '../../../contexts/componentsContext/Compon
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Camera } from '../../../icons/camera';
-import { Delete } from '../../../icons/delete';
-import { Picture } from '../../../icons/image';
 import type { IconProps } from '../../../icons/utils/base';
-import { Cross } from '../../../icons/xmark-1';
 import type {
   EditChannelDetailsState,
   EditChannelImagePendingAction,
@@ -51,7 +47,7 @@ const keyExtractor = (item: SheetItem) => item.id;
 
 const ChannelEditImageSheetInner = () => {
   const { store } = useChannelEditDetailsContext();
-  const { ChannelDetailsActionItem } = useComponentsContext();
+  const { ChannelDetailsActionItem, icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -81,7 +77,7 @@ const ChannelEditImageSheetInner = () => {
   const items = useMemo<SheetItem[]>(() => {
     const base: SheetItem[] = [
       {
-        Icon: Camera,
+        Icon: icons.Camera,
         id: 'take-photo',
         label: t('Take Photo'),
         onPress: () => {
@@ -90,7 +86,7 @@ const ChannelEditImageSheetInner = () => {
         testID: 'channel-edit-picture-take-photo',
       },
       {
-        Icon: Picture,
+        Icon: icons.Picture,
         id: 'choose-image',
         label: t('Choose Image'),
         onPress: () => {
@@ -103,7 +99,7 @@ const ChannelEditImageSheetInner = () => {
     if (canReset) {
       base.push({
         destructive: true,
-        Icon: Delete,
+        Icon: icons.Delete,
         id: 'reset-picture',
         label: t('Reset Picture'),
         onPress: () => {
@@ -114,7 +110,7 @@ const ChannelEditImageSheetInner = () => {
     }
 
     return base;
-  }, [canReset, onSelect, t]);
+  }, [canReset, icons, onSelect, t]);
 
   const renderItem = useCallback<ListRenderItem<SheetItem>>(
     ({ item }) => (
@@ -136,7 +132,7 @@ const ChannelEditImageSheetInner = () => {
           <Button
             accessibilityLabelKey='a11y/Close edit picture sheet'
             iconOnly
-            LeadingIcon={Cross}
+            LeadingIcon={icons.Cross}
             onPress={() => close()}
             size='md'
             testID='channel-edit-picture-sheet-close-button'

package/src/components/ChannelDetails/components/members/ChannelAddMembersButton.tsx

@@ -4,7 +4,6 @@ import { useChannelDetailsContext } from '../../../../contexts/channelDetailsCon
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useCanAddMembersToChannel } from '../../../../hooks/useCanAddMembersToChannel';
-import { UserAdd } from '../../../../icons/user-add';
 import { Button, ButtonProps } from '../../../ui/Button/Button';
 import { ChannelDetailsModal } from '../modal/Modal';
 
@@ -24,7 +23,7 @@ export const ChannelAddMembersButton = ({
   variant = 'text',
 }: ChannelAddMembersButtonProps) => {
   const { channel } = useChannelDetailsContext();
-  const { ChannelAddMembersForm } = useComponentsContext();
+  const { ChannelAddMembersForm, icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const isVisible = useCanAddMembersToChannel(channel);
   const [isAddMembersVisible, setAddMembersVisible] = useState(false);
@@ -53,7 +52,7 @@ export const ChannelAddMembersButton = ({
         <Button
           accessibilityLabelKey='a11y/Add members'
           iconOnly
-          LeadingIcon={UserAdd}
+          LeadingIcon={icons.UserAdd}
           onPress={handlePress}
           size='md'
           style={style}

package/src/components/ChannelDetails/components/members/ChannelAddMembersFormHeader.tsx

@@ -3,10 +3,10 @@ import React, { useCallback, useState } from 'react';
 import { ActivityIndicator } from 'react-native';
 
 import { useChannelAddMembersContext } from '../../../../contexts/channelAddMembersContext/ChannelAddMembersContext';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../../hooks/useStableCallback';
-import { Checkmark } from '../../../../icons/checkmark-1';
 import { useIsSelectionEmpty } from '../../../../state-store/selection-store';
 import { Button } from '../../../ui/Button/Button';
 import { ModalHeader } from '../modal/ModalHeader';
@@ -23,6 +23,7 @@ export type ChannelAddMembersFormHeaderProps = {
 
 export const ChannelAddMembersFormHeader = ({ onClose }: ChannelAddMembersFormHeaderProps) => {
   const { selectionStore, submit } = useChannelAddMembersContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const {
     theme: {
@@ -63,7 +64,7 @@ export const ChannelAddMembersFormHeader = ({ onClose }: ChannelAddMembersFormHe
           variant='primary'
           onPress={handleConfirm}
           type='solid'
-          LeadingIcon={addingMembers ? LoadingButtonIcon : Checkmark}
+          LeadingIcon={addingMembers ? LoadingButtonIcon : icons.Checkmark}
           iconOnly
           testID='channel-details-add-members-confirm-button'
           style={confirmButtonOverride}

package/src/components/ChannelDetails/components/members/ChannelMemberItem.tsx

@@ -8,7 +8,6 @@ import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
-import { Mute } from '../../../../icons';
 import { primitives } from '../../../../theme';
 import { useUserMuteActive } from '../../../Message/hooks/useUserMuteActive';
 import { UserAvatar } from '../../../ui/Avatar/UserAvatar';
@@ -45,7 +44,7 @@ export const ChannelMemberItem = ({
 }: ChannelMemberItemProps) => {
   const { t } = useTranslationContext();
   const { client } = useChatContext();
-  const { RoleList } = useComponentsContext();
+  const { icons, RoleList } = useComponentsContext();
   const {
     theme: {
       channelDetails: {
@@ -102,7 +101,7 @@ export const ChannelMemberItem = ({
       {isMuted || roles.length > 0 ? (
         <View style={styles.trailing}>
           {isMuted ? (
-            <Mute
+            <icons.Mute
               height={16}
               pathFill={semantics.textTertiary}
               testID='channel-member-muted-indicator'

package/src/components/ChannelDetails/components/modal/ModalHeader.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { I18nManager, StyleSheet, Text, View } from 'react-native';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { Cross } from '../../../../icons/xmark-1';
 import { primitives } from '../../../../theme';
 import { Button, ButtonProps } from '../../../ui/Button/Button';
 
@@ -19,6 +19,7 @@ export const ModalHeader = ({
   title,
   additionalCloseButtonProps,
 }: ModalHeaderProps) => {
+  const { icons } = useComponentsContext();
   const {
     theme: {
       channelDetails: {
@@ -35,7 +36,7 @@ export const ModalHeader = ({
         <Button
           accessibilityLabelKey='a11y/Close'
           iconOnly
-          LeadingIcon={Cross}
+          LeadingIcon={icons.Cross}
           onPress={onClose}
           size='md'
           type='outline'

package/src/components/ChannelDetails/components/navigation-section/FileAttachmentList.tsx

@@ -22,7 +22,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Folder } from '../../../../icons/folder';
 import { primitives } from '../../../../theme';
 import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
 import { NotificationList } from '../../../Notifications/NotificationList';
@@ -67,7 +66,7 @@ const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmen
     },
   } = useTheme();
   const styles = useStyles();
-  const { FileAttachmentItem } = useComponentsContext();
+  const { FileAttachmentItem, icons } = useComponentsContext();
 
   const { addNotification } = useNotificationApi();
 
@@ -140,7 +139,11 @@ const FileAttachmentListContent = ({ additionalSectionListProps }: FileAttachmen
     loading || isEmpty === undefined ? (
       <FileAttachmentListLoadingSkeleton />
     ) : (
-      <EmptyList icon={Folder} subtitle={t('Share a file to see it here')} title={t('No files')} />
+      <EmptyList
+        icon={icons.Folder}
+        subtitle={t('Share a file to see it here')}
+        title={t('No files')}
+      />
     );
 
   const loadingMoreIndicator = (

package/src/components/ChannelDetails/components/navigation-section/MediaItem.tsx

@@ -6,7 +6,6 @@ import type { Attachment, MessageResponse } from 'stream-chat';
 import { useChatConfigContext } from '../../../../contexts/chatConfigContext/ChatConfigContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
-import { Recorder } from '../../../../icons/video-fill';
 import { primitives } from '../../../../theme';
 import { FileTypes } from '../../../../types/types';
 import { getResizedImageUrl } from '../../../../utils/getResizedImageUrl';
@@ -40,7 +39,7 @@ export type MediaItemProps = {
 };
 
 export const MediaItem = (props: MediaItemProps) => {
-  const { ImageComponent: Image } = useComponentsContext();
+  const { ImageComponent: Image, icons } = useComponentsContext();
   const { attachment, message, onPress, size } = props;
   const {
     theme: {
@@ -95,7 +94,7 @@ export const MediaItem = (props: MediaItemProps) => {
             mediaItem.videoBadge,
           ]}
         >
-          <Recorder fill={semantics.badgeTextOnInverse} size={12} />
+          <icons.Recorder fill={semantics.badgeTextOnInverse} size={12} />
           <Text
             style={[
               styles.videoBadgeText,

package/src/components/ChannelDetails/components/navigation-section/MediaList.tsx

@@ -30,7 +30,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Picture } from '../../../../icons/image';
 import { isVideoPlayerAvailable } from '../../../../native';
 import { primitives } from '../../../../theme';
 import { FileTypes } from '../../../../types/types';
@@ -79,7 +78,7 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
   } = useTheme();
   const styles = useStyles();
   const { width } = useWindowDimensions();
-  const { MediaItem } = useComponentsContext();
+  const { icons, MediaItem } = useComponentsContext();
 
   const { addNotification } = useNotificationApi();
 
@@ -183,7 +182,7 @@ const MediaListContent = ({ additionalFlatListProps }: MediaListProps) => {
       <MediaListLoadingSkeleton />
     ) : (
       <EmptyList
-        icon={Picture}
+        icon={icons.Picture}
         subtitle={t('Share a photo or video to see it here')}
         title={t('No photos or videos')}
       />

package/src/components/ChannelDetails/components/navigation-section/PinnedMessageList.tsx

@@ -15,7 +15,6 @@ import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
 import { useStateStore } from '../../../../hooks/useStateStore';
-import { Pin } from '../../../../icons/pin';
 import { primitives } from '../../../../theme';
 import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
 import { NotificationList } from '../../../Notifications/NotificationList';
@@ -62,7 +61,7 @@ const PinnedMessageListContent = ({
     },
   } = useTheme();
   const styles = useStyles();
-  const { PinnedMessageItem } = useComponentsContext();
+  const { icons, PinnedMessageItem } = useComponentsContext();
 
   const { addNotification } = useNotificationApi();
 
@@ -120,7 +119,7 @@ const PinnedMessageListContent = ({
     <PinnedMessageListLoadingSkeleton />
   ) : isEmpty ? (
     <EmptyList
-      icon={Pin}
+      icon={icons.Pin}
       subtitle={t('Long-press a message to pin it to the chat')}
       title={t('No pinned messages')}
     />

package/src/components/ChannelDetails/hooks/useChannelDetailsNavigationItems.ts

@@ -1,11 +1,8 @@
 import React, { useMemo } from 'react';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
-import { Picture } from '../../../icons';
-import { Folder } from '../../../icons/folder';
-
-import { Pin } from '../../../icons/pin';
 import type { IconProps } from '../../../icons/utils/base';
 
 /**
@@ -37,16 +34,17 @@ export type ChannelDetailsNavigationItem = {
 };
 
 /**
- * Maps each navigation section to the icon and (translatable) label rendered for its row and,
- * when opened, its modal header. The declaration order also drives the order of the rendered rows.
+ * Maps each navigation section to the icon (by its key in the components-context icons map) and
+ * (translatable) label rendered for its row and, when opened, its modal header. The declaration
+ * order also drives the order of the rendered rows.
  */
 const SECTION_CONFIG: Record<
   'pinned-messages' | 'photos-and-videos' | 'files',
-  { Icon: React.ComponentType<IconProps>; label: string }
+  { icon: 'Pin' | 'Picture' | 'Folder'; label: string }
 > = {
-  'pinned-messages': { Icon: Pin, label: 'Pinned Messages' },
-  'photos-and-videos': { Icon: Picture, label: 'Photos & Videos' },
-  files: { Icon: Folder, label: 'Files' },
+  'pinned-messages': { icon: 'Pin', label: 'Pinned Messages' },
+  'photos-and-videos': { icon: 'Picture', label: 'Photos & Videos' },
+  files: { icon: 'Folder', label: 'Files' },
 };
 
 const SECTIONS = Object.keys(SECTION_CONFIG) as Array<keyof typeof SECTION_CONFIG>;
@@ -82,6 +80,7 @@ export const useChannelDetailsNavigationItems = ({
 }: {
   getNavigationItems?: GetChannelDetailsNavigationItems;
 } = {}): ChannelDetailsNavigationItem[] => {
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const context = useMemo<ChannelDetailsNavigationItemsContext>(() => ({ t }), [t]);
@@ -89,10 +88,10 @@ export const useChannelDetailsNavigationItems = ({
   const defaultItems = useMemo<ChannelDetailsNavigationItem[]>(
     () =>
       SECTIONS.map((section) => {
-        const { Icon, label } = SECTION_CONFIG[section];
-        return { Icon, label: t(label), section };
+        const { icon, label } = SECTION_CONFIG[section];
+        return { Icon: icons[icon], label: t(label), section };
       }),
-    [t],
+    [icons, t],
   );
 
   return useMemo(

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -7,10 +7,10 @@ import { ChannelPreviewProps } from './ChannelPreview';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 import { MessageDeliveryStatus, useMessageDeliveryStatus } from '../../hooks';
-import { Check, CheckAll, Time } from '../../icons';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
@@ -24,6 +24,7 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   message,
 }: ChannelMessagePreviewDeliveryStatusProps) => {
   const { client } = useChatContext();
+  const { icons } = useComponentsContext();
   const { t } = useTranslationContext();
   const channelConfigExists = typeof channel?.getConfig === 'function';
   const styles = useStyles();
@@ -87,14 +88,24 @@ export const ChannelMessagePreviewDeliveryStatus = ({
     <CompositeAccessibilityProbe label={statusLabel}>
       <View style={styles.container}>
         {message.status === MessageStatusTypes.SENDING ? (
-          <Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
+          <icons.Time stroke={semantics.chatTextTimestamp} height={16} width={16} {...timeIcon} />
         ) : message.status === MessageStatusTypes.RECEIVED &&
           status === MessageDeliveryStatus.READ ? (
-          <CheckAll stroke={semantics.accentPrimary} height={16} width={16} {...checkAllIcon} />
+          <icons.CheckAll
+            stroke={semantics.accentPrimary}
+            height={16}
+            width={16}
+            {...checkAllIcon}
+          />
         ) : status === MessageDeliveryStatus.DELIVERED ? (
-          <CheckAll stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkAllIcon} />
+          <icons.CheckAll
+            stroke={semantics.chatTextTimestamp}
+            height={16}
+            width={16}
+            {...checkAllIcon}
+          />
         ) : status === MessageDeliveryStatus.SENT ? (
-          <Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
+          <icons.Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
         ) : null}
         <Text style={styles.text}>{t('You')}:</Text>
       </View>

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -15,7 +15,6 @@ import { useComponentsContext } from '../../contexts/componentsContext/Component
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
 
-import { PollIcon } from '../../icons/poll';
 import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
@@ -30,6 +29,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     ChannelPreviewTypingIndicator,
     ChannelPreviewMessageDeliveryStatus,
     ChannelPreviewLastMessage,
+    icons,
   } = useComponentsContext();
   const {
     theme: { semantics },
@@ -80,7 +80,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (pollLabel) {
     return (
       <View style={styles.container}>
-        <PollIcon height={16} width={16} stroke={semantics.textSecondary} />
+        <icons.PollIcon height={16} width={16} stroke={semantics.textSecondary} />
         <Text ellipsizeMode='tail' numberOfLines={1} style={styles.subtitle}>
           {pollLabel}
         </Text>

package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Mute } from '../../icons';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 /**
@@ -15,11 +15,12 @@ export const ChannelPreviewMutedStatus = () => {
       semantics,
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const accessibilityLabel = useA11yLabel('a11y/Muted');
 
   return (
     <CompositeAccessibilityProbe label={accessibilityLabel}>
-      <Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />
+      <icons.Mute height={20} fill={semantics.textTertiary} width={20} {...mutedStatus} />
     </CompositeAccessibilityProbe>
   );
 };

package/src/components/ChannelPreview/ChannelPreviewPinnedStatus.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 
 import { useA11yLabel } from '../../a11y/hooks/useA11yLabel';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Pin } from '../../icons';
 import { CompositeAccessibilityProbe } from '../Accessibility/CompositeAccessibilityProbe';
 
 /**
@@ -15,11 +15,12 @@ export const ChannelPreviewPinnedStatus = () => {
       semantics,
     },
   } = useTheme();
+  const { icons } = useComponentsContext();
   const accessibilityLabel = useA11yLabel('a11y/Pinned');
 
   return (
     <CompositeAccessibilityProbe label={accessibilityLabel}>
-      <Pin height={20} stroke={semantics.textTertiary} width={20} {...pinnedStatus} />
+      <icons.Pin height={20} stroke={semantics.textTertiary} width={20} {...pinnedStatus} />
     </CompositeAccessibilityProbe>
   );
 };

package/src/components/ChannelPreview/ChannelSwipableWrapper.tsx

@@ -13,7 +13,6 @@ import type {
   GetChannelActionItems,
 } from '../../hooks/actions/useChannelActionItems';
 import { useChannelActionItems } from '../../hooks/actions/useChannelActionItems';
-import { MenuPointHorizontal } from '../../icons';
 import { BottomSheetModal } from '../UIComponents/BottomSheetModal';
 import {
   RightActions,
@@ -26,7 +25,8 @@ export const OpenChannelDetailsButton = () => {
   const {
     theme: { semantics },
   } = useTheme();
-  return <MenuPointHorizontal stroke={semantics.textPrimary} />;
+  const { icons } = useComponentsContext();
+  return <icons.MenuPointHorizontal stroke={semantics.textPrimary} />;
 };
 
 export const ChannelSwipableWrapper = ({

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -9,8 +9,6 @@ import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/Im
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Share as ShareIconDefault } from '../../../icons';
-import { ImageGrid } from '../../../icons/gallery';
 import { isFileSystemAvailable, isShareImageAvailable, NativeHandlers } from '../../../native';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
@@ -44,7 +42,7 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 
 export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) => {
   const { accessibilityLabel, opacity, openGridView, visible } = props;
-  const { ImageGalleryVideoControls } = useComponentsContext();
+  const { icons, ImageGalleryVideoControls } = useComponentsContext();
 
   const [height, setHeight] = useState(200);
   const [savingInProgress, setSavingInProgress] = useState(false);
@@ -139,7 +137,7 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) =>
             type='ghost'
             size='md'
             onPress={openGridView}
-            LeadingIcon={ImageGrid}
+            LeadingIcon={icons.ImageGrid}
             iconOnly
           />
         </View>
@@ -155,6 +153,7 @@ type ShareButtonProps = {
 
 const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
   const styles = useStyles();
+  const { icons } = useComponentsContext();
   // If the shareImage, saveFile or deleteFile is null, we don't want to render the share button
   if (!isShareImageAvailable() || !isFileSystemAvailable()) {
     return null;
@@ -171,7 +170,7 @@ const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
       type='ghost'
       size='md'
       onPress={share}
-      LeadingIcon={ShareIconDefault}
+      LeadingIcon={icons.Share}
       iconOnly
     />
   );

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -7,12 +7,12 @@ import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 
 import type { ImageGalleryHeaderProps } from './types';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useImageGalleryContext } from '../../../contexts/imageGalleryContext/ImageGalleryContextBase';
 import { useOverlayContext } from '../../../contexts/overlayContext/OverlayContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { ChevronLeft } from '../../../icons/chevron-left';
 
 import { ImageGalleryState } from '../../../state-store/image-gallery-state-store';
 import { primitives } from '../../../theme';
@@ -26,6 +26,7 @@ const imageGallerySelector = (state: ImageGalleryState) => ({
 export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
   const { opacity, visible } = props;
   const [height, setHeight] = useState(200);
+  const { icons } = useComponentsContext();
   const styles = useStyles();
   const { t, tDateTimeParser } = useTranslationContext();
   const { imageGalleryStateStore } = useImageGalleryContext();
@@ -77,7 +78,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
               type='ghost'
               size='md'
               onPress={hideOverlay}
-              LeadingIcon={ChevronLeft}
+              LeadingIcon={icons.ChevronLeft}
               iconOnly
             />
           </View>

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -3,12 +3,11 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { ImageGalleryVideoControlProps } from './types';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 
 import { useStableCallback } from '../../../hooks/useStableCallback';
 import { useStateStore } from '../../../hooks/useStateStore';
-import { Pause } from '../../../icons/pause-fill';
-import { Play } from '../../../icons/play-fill';
 import { IconProps } from '../../../icons/utils/base';
 import { VideoPlayerState } from '../../../state-store/video-player';
 import { primitives } from '../../../theme';
@@ -43,6 +42,7 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
 
   const progressDuration = getDurationLabelFromDuration(progressValueInSeconds);
 
+  const { icons } = useComponentsContext();
   const {
     theme: {
       imageGallery: {
@@ -56,11 +56,11 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
   const renderPlayPauseIcon = useCallback(
     (props: IconProps) =>
       isPlaying ? (
-        <Pause {...props} fill={semantics.textSecondary} />
+        <icons.Pause {...props} fill={semantics.textSecondary} />
       ) : (
-        <Play {...props} fill={semantics.textSecondary} />
+        <icons.Play {...props} fill={semantics.textSecondary} />
       ),
-    [isPlaying, semantics.textSecondary],
+    [icons, isPlaying, semantics.textSecondary],
   );
 
   const handlePlayPause = async () => {