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

package/src/components/ui/GiphyChip.tsx

@@ -3,11 +3,10 @@ import { StyleSheet, View, Text, Pressable } from 'react-native';
 
 import { TextComposerState } from 'stream-chat';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { Lightning } from '../../icons/bolt';
-import { Cross } from '../../icons/xmark-1';
 import { primitives } from '../../theme';
 
 const textComposerStateSelector = (state: TextComposerState) => ({
@@ -15,6 +14,7 @@ const textComposerStateSelector = (state: TextComposerState) => ({
 });
 
 export const GiphyChip = () => {
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -32,10 +32,10 @@ export const GiphyChip = () => {
 
   return (
     <View style={styles.container}>
-      <Lightning fill={semantics.textOnInverse} height={16} width={16} />
+      <icons.Lightning fill={semantics.textOnInverse} height={16} width={16} />
       <Text style={styles.text}>{commandName}</Text>
       <Pressable onPress={onPressHandler}>
-        <Cross stroke={semantics.textOnInverse} height={16} width={16} />
+        <icons.Cross stroke={semantics.textOnInverse} height={16} width={16} />
       </Pressable>
     </View>
   );

package/src/components/ui/Input/Input.tsx

@@ -14,8 +14,7 @@ import {
 } from 'react-native';
 
 import { useTheme } from '../../../contexts';
-import { Checkmark } from '../../../icons/checkmark-1';
-import { InfoTooltip } from '../../../icons/info';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { IconRenderer } from '../Button';
 
@@ -73,6 +72,7 @@ export const Input = React.forwardRef<TextInput, InputProps>(function Input(
   ref,
 ) {
   const [isFocused, setIsFocused] = useState(false);
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -162,9 +162,9 @@ export const Input = React.forwardRef<TextInput, InputProps>(function Input(
       {helperText ? (
         <View style={styles.helperContainer}>
           {state === 'success' ? (
-            <Checkmark height={20} width={20} stroke={semantics.accentSuccess} />
+            <icons.Checkmark height={20} width={20} stroke={semantics.accentSuccess} />
           ) : (
-            <InfoTooltip
+            <icons.InfoTooltip
               height={20}
               width={20}
               fill={state === 'error' ? semantics.accentError : semantics.textTertiary}

package/src/components/ui/VideoPlayIndicator.tsx

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Play } from '../../icons/play-fill';
 import { primitives } from '../../theme';
 
 const sizes = {
@@ -32,6 +32,7 @@ export type VideoPlayIndicatorProps = {
 
 export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => {
   const { size = 'md' } = props;
+  const { icons } = useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -39,7 +40,7 @@ export const VideoPlayIndicator = (props: VideoPlayIndicatorProps) => {
 
   return (
     <View style={[styles.container, sizes[size]]}>
-      <Play
+      <icons.Play
         fill={semantics.controlPlayButtonIcon}
         height={iconSizes[size]}
         width={iconSizes[size]}

package/src/contexts/componentsContext/ComponentsContext.tsx

@@ -6,11 +6,27 @@ import React, { PropsWithChildren, useContext, useMemo } from 'react';
  * Adding a new default automatically makes it available as an override.
  *
  * Every key is optional — only specify the components you want to override.
+ *
+ * The `icons` slot is a nested map: it is typed as a *partial* icon map so
+ * integrators can override individual icons without having to supply them all.
+ * Sibling defaults are preserved via a deep merge (see below).
  */
-export type ComponentOverrides = Partial<
-  (typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']
+export type ComponentOverrides = Omit<
+  Partial<(typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']>,
+  'icons'
 > &
-  import('./defaultComponents').OptionalComponentOverrides;
+  import('./defaultComponents').OptionalComponentOverrides & {
+    icons?: Partial<import('./defaultComponents').IconsMap>;
+  };
+
+/**
+ * Resolved component overrides with defaults filled in. Unlike
+ * `ComponentOverrides`, the `icons` map is guaranteed fully populated (defaults
+ * back every key), so consumers can read `icons.Mute` without a null check.
+ */
+export type ResolvedComponents = Required<Omit<ComponentOverrides, 'icons'>> & {
+  icons: import('./defaultComponents').IconsMap;
+};
 
 const ComponentsContext = React.createContext<ComponentOverrides>({});
 
@@ -33,8 +49,17 @@ export const WithComponents = ({
   overrides,
 }: PropsWithChildren<{ overrides: ComponentOverrides }>) => {
   const parent = useContext(ComponentsContext);
-  // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
-  const merged = useMemo(() => ({ ...parent, ...overrides }), []);
+  const merged = useMemo(
+    () => ({
+      ...parent,
+      ...overrides,
+      // Deep-merge the nested `icons` map so overriding one icon keeps the
+      // rest (a shallow spread would replace the whole map).
+      icons: { ...parent.icons, ...overrides.icons },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+    [],
+  );
   return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
 };
 
@@ -55,9 +80,14 @@ const getDefaults = (): ComponentOverrides => {
  */
 export const useComponentsContext = () => {
   const overrides = useContext(ComponentsContext);
-  return useMemo(
-    () => ({ ...getDefaults(), ...overrides }) as Required<ComponentOverrides>,
+  return useMemo(() => {
+    const defaults = getDefaults();
+    return {
+      ...defaults,
+      ...overrides,
+      // Deep-merge icons so user overrides layer over the full default map.
+      icons: { ...defaults.icons, ...overrides.icons },
+    } as ResolvedComponents;
     // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
-    [],
-  );
+  }, []);
 };

package/src/contexts/componentsContext/defaultComponents.ts

@@ -186,6 +186,90 @@ import { ChannelAvatar } from '../../components/ui/Avatar/ChannelAvatar';
 import { SvgAwareImage } from '../../components/UIComponents/SvgAwareImage';
 import { DefaultMessageOverlayBackground } from '../../contexts/overlayContext/MessageOverlayHostLayer';
 import type { MessageActionsProps } from '../../contexts/overlayContext/MessageOverlayHostLayer';
+import { ArrowUp, Down } from '../../icons/arrow-up';
+import { ArrowUpRight } from '../../icons/arrow-up-right';
+import { Sound } from '../../icons/audio';
+import { Bell } from '../../icons/bell';
+import { Lightning } from '../../icons/bolt';
+import { Camera } from '../../icons/camera';
+import { Check, Tick } from '../../icons/checkmark';
+import { Checkmark } from '../../icons/checkmark-1';
+import { CheckAll } from '../../icons/checks';
+import { ChevronLeft } from '../../icons/chevron-left';
+import { ChevronRight } from '../../icons/chevron-right';
+import { ChevronUp } from '../../icons/chevron-up';
+import { Time } from '../../icons/clock';
+import { CommandsIcon } from '../../icons/command';
+import { Copy } from '../../icons/copy';
+import { Delete } from '../../icons/delete';
+import { Edit } from '../../icons/edit';
+import { Smile } from '../../icons/emoji';
+import { MoreEmojis } from '../../icons/emoji-add-1';
+import { ExclamationCircle } from '../../icons/exclamation-circle-fill';
+import { Exclamation } from '../../icons/exclamation-mark-fill';
+import { Warning } from '../../icons/exclamation-triangle-fill';
+import { EyeOpen } from '../../icons/EyeOpen';
+import { File, FilePickerIcon } from '../../icons/file';
+import { Audio } from '../../icons/filetype-audio-xl';
+import { Code } from '../../icons/filetype-code-xl';
+import { ZIP } from '../../icons/filetype-compression-xl';
+import { OtherFileIcon } from '../../icons/filetype-other-xl';
+import { PDF } from '../../icons/filetype-pdf-xl';
+import { Presentation } from '../../icons/filetype-presentation-xl';
+import { SpreadSheet } from '../../icons/filetype-spreadsheet-xl';
+import { DOC } from '../../icons/filetype-text-xl';
+import { Video } from '../../icons/filetype-video-xl';
+import { Flag, MessageFlag } from '../../icons/flag';
+import { Folder } from '../../icons/folder';
+import { ImageGrid } from '../../icons/gallery';
+import { Giphy as GiphyFiletypeIcon, GiphyIcon } from '../../icons/giphy';
+import { PhotoIcon, Picture } from '../../icons/image';
+import { Imgur } from '../../icons/imgur';
+import { InfoTooltip } from '../../icons/info';
+import { ArrowBoxLeft } from '../../icons/leave';
+import { Link } from '../../icons/link';
+import { Loading } from '../../icons/loading';
+import { MapPin } from '../../icons/location';
+import { Lock } from '../../icons/lock';
+import { Megaphone } from '../../icons/megaphone';
+import { MessageBubbleEmpty } from '../../icons/message-bubble';
+import { Minus } from '../../icons/minus';
+import { CircleMinus } from '../../icons/minus-circle';
+import { MenuPointHorizontal } from '../../icons/more';
+import { Mute } from '../../icons/mute';
+import { BlockUser, CircleBan } from '../../icons/no-sign';
+import { UnreadIndicator } from '../../icons/notification';
+import { Pause } from '../../icons/pause-fill';
+import { Pin } from '../../icons/pin';
+import { Play } from '../../icons/play-fill';
+import { Plus } from '../../icons/plus';
+import { PollIcon, PollThumbnail } from '../../icons/poll';
+import { Reload } from '../../icons/refresh';
+import { DotGrid } from '../../icons/reorder';
+import { ArrowShareLeft, CurveLineLeftUp } from '../../icons/reply';
+import { ReplyConnectorLeft } from '../../icons/ReplyConnectorLeft';
+import { ReplyConnectorRight } from '../../icons/ReplyConnectorRight';
+import { Resend } from '../../icons/Retry';
+import { Bookmark } from '../../icons/save';
+import { Search } from '../../icons/search';
+import { SendRight } from '../../icons/send';
+import { Share } from '../../icons/share';
+import { Shield } from '../../icons/shield';
+import { Stop } from '../../icons/stop-fill';
+import { ThreadReply } from '../../icons/thread';
+import { Unknown } from '../../icons/Unknown';
+import { Unlock } from '../../icons/unlock';
+import { Unpin } from '../../icons/unpin';
+import { UserAdd } from '../../icons/user-add';
+import { UserDelete } from '../../icons/user-remove';
+import { PeopleIcon } from '../../icons/users';
+import type { IconProps } from '../../icons/utils/base';
+import { VideoIcon } from '../../icons/video';
+import { Recorder } from '../../icons/video-fill';
+import { Mic } from '../../icons/voice';
+import { XCircle } from '../../icons/x-circle';
+import { NewClose } from '../../icons/xmark';
+import { Cross } from '../../icons/xmark-1';
 
 /**
  * Normalizes each component entry to React.ComponentType<P>, stripping
@@ -197,7 +281,116 @@ type NormalizeComponents<T> = {
   [K in keyof T]: T[K] extends React.ComponentType<infer P> ? React.ComponentType<P> : T[K];
 };
 
+/**
+ * All overridable icon components in the SDK, keyed by their exported name.
+ * Exposed via `WithComponents` under the nested `icons` key so integrators can
+ * swap any icon: `<WithComponents overrides={{ icons: { Mute: MyMute } }}>`.
+ *
+ * Only icons that are actually rendered by the SDK are registered here.
+ */
+export const defaultIcons = {
+  ArrowBoxLeft,
+  ArrowShareLeft,
+  ArrowUp,
+  ArrowUpRight,
+  Audio,
+  Bell,
+  BlockUser,
+  Bookmark,
+  Camera,
+  Check,
+  CheckAll,
+  Checkmark,
+  ChevronLeft,
+  ChevronRight,
+  ChevronUp,
+  CircleBan,
+  CircleMinus,
+  Code,
+  CommandsIcon,
+  Copy,
+  Cross,
+  CurveLineLeftUp,
+  Delete,
+  DOC,
+  DotGrid,
+  Down,
+  Edit,
+  Exclamation,
+  ExclamationCircle,
+  EyeOpen,
+  File,
+  FilePickerIcon,
+  Flag,
+  Folder,
+  Giphy: GiphyFiletypeIcon,
+  GiphyIcon,
+  ImageGrid,
+  Imgur,
+  InfoTooltip,
+  Lightning,
+  Link,
+  Loading,
+  Lock,
+  MapPin,
+  Megaphone,
+  MenuPointHorizontal,
+  MessageBubbleEmpty,
+  MessageFlag,
+  Mic,
+  Minus,
+  MoreEmojis,
+  Mute,
+  NewClose,
+  OtherFileIcon,
+  Pause,
+  PDF,
+  PeopleIcon,
+  PhotoIcon,
+  Picture,
+  Pin,
+  Play,
+  Plus,
+  PollIcon,
+  PollThumbnail,
+  Presentation,
+  Recorder,
+  Reload,
+  ReplyConnectorLeft,
+  ReplyConnectorRight,
+  Resend,
+  Search,
+  SendRight,
+  Share,
+  Shield,
+  Smile,
+  Sound,
+  SpreadSheet,
+  Stop,
+  ThreadReply,
+  Tick,
+  Time,
+  Unknown,
+  Unlock,
+  Unpin,
+  UnreadIndicator,
+  UserAdd,
+  UserDelete,
+  Video,
+  VideoIcon,
+  Warning,
+  XCircle,
+  ZIP,
+} satisfies Record<string, React.ComponentType<IconProps>>;
+
+/**
+ * Map of all overridable SDK icons. Used to type the `icons` override slot
+ * and the resolved value returned by `useComponentsContext().icons`.
+ */
+export type IconsMap = typeof defaultIcons;
+
 const components = {
+  icons: defaultIcons,
   Attachment,
   AttachmentUploadIndicator,
   AttachButton,

package/src/hooks/actions/__tests__/useChannelActionItems.test.tsx

@@ -5,6 +5,7 @@ import type { Channel, Mute } from 'stream-chat';
 
 import * as useMutedUsersModule from '../../../components/ChannelList/hooks/useMutedUsers';
 import * as useIsChannelMutedModule from '../../../components/ChannelPreview/hooks/useIsChannelMuted';
+import { defaultIcons } from '../../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import * as TranslationContext from '../../../contexts/translationContext/TranslationContext';
 import * as useChannelMembershipStateModule from '../../useChannelMembershipState';
@@ -219,6 +220,7 @@ describe('useChannelActionItems', () => {
         isDirectChat: false,
         isPinned: false,
         surface: 'list',
+        icons: defaultIcons,
         t: expect.any(Function),
         userMuteActive: false,
       },
@@ -246,6 +248,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -259,6 +262,7 @@ describe('getChannelActionItems', () => {
         isDirectChat: false,
         isPinned: false,
         surface: 'list',
+        icons: defaultIcons,
         t: ((value: string) => value) as TranslationContextValue['t'],
         userMuteActive: false,
       },
@@ -291,6 +295,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -339,6 +344,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -356,6 +362,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -374,6 +381,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -399,6 +407,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: true,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -420,6 +429,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -439,6 +449,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'details',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -456,6 +467,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -472,6 +484,7 @@ describe('getChannelActionItems', () => {
       isBlocked: undefined,
       isDirectChat: false,
       isPinned: false,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });
@@ -490,6 +503,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: true,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: true,
     });
@@ -516,6 +530,7 @@ describe('getChannelActionItems', () => {
       isDirectChat: false,
       isPinned: false,
       surface: 'list',
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userMuteActive: false,
     });

package/src/hooks/actions/__tests__/useChannelMemberActionItems.test.tsx

@@ -6,6 +6,7 @@ import type { Channel, ChannelMemberResponse, Mute } from 'stream-chat';
 
 import * as useMutedUsersModule from '../../../components/ChannelList/hooks/useMutedUsers';
 import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
+import { defaultIcons } from '../../../contexts/componentsContext/defaultComponents';
 import type { TranslationContextValue } from '../../../contexts/translationContext/TranslationContext';
 import * as TranslationContext from '../../../contexts/translationContext/TranslationContext';
 import * as useChannelOwnCapabilitiesModule from '../../useChannelOwnCapabilities';
@@ -227,6 +228,7 @@ describe('useChannelMemberActionItems', () => {
         channelActions,
         isBlocked: false,
         isCurrentUser: false,
+        icons: defaultIcons,
         member,
         ownCapabilities: [],
         t: expect.any(Function),
@@ -253,6 +255,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -273,6 +276,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: true,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -290,6 +294,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: ['update-channel-members'],
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -310,6 +315,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: true,
@@ -329,6 +335,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: true,
@@ -347,6 +354,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
       isCurrentUser: false,
       member,
       ownCapabilities: undefined,
+      icons: defaultIcons,
       t: ((value: string) => value) as TranslationContextValue['t'],
       userActions: actions,
       userMuteActive: false,
@@ -360,6 +368,7 @@ describe('buildDefaultChannelMemberActionItems', () => {
         isCurrentUser: false,
         member,
         ownCapabilities: undefined,
+        icons: defaultIcons,
         t: ((value: string) => value) as TranslationContextValue['t'],
         userActions: actions,
         userMuteActive: false,