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

package/src/__tests__/offline-support/offline-feature.js

@@ -9,7 +9,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { ChannelList } from '../../components/ChannelList/ChannelList';
 import { Chat } from '../../components/Chat/Chat';
-import { useChannelsContext } from '../../contexts/channelsContext/ChannelsContext';
+import { WithComponents } from '../../contexts/componentsContext/ComponentsContext';
 import { getOrCreateChannelApi } from '../../mock-builders/api/getOrCreateChannel';
 import { queryChannelsApi } from '../../mock-builders/api/queryChannels';
 import { useMockedApis } from '../../mock-builders/api/useMockedApis';
@@ -48,33 +48,17 @@ import { BetterSqlite } from '../../test-utils/BetterSqlite';
  * to those components might end up breaking tests for ChannelList, which will be quite painful
  * to debug.
  */
-const ChannelPreviewComponent = ({ channel, setActiveChannel }) => (
-  <View accessibilityLabel='list-item' onPress={setActiveChannel} testID={channel.cid}>
-    <Text>{channel.data.name}</Text>
-    <Text>{channel.state.messages[0]?.text}</Text>
+/**
+ * Custom Preview component used via WithComponents.
+ * Receives { channel, muted, unread, lastMessage } from ChannelPreview.
+ */
+const ChannelPreviewComponent = ({ channel }) => (
+  <View accessibilityLabel='list-item' testID={channel.cid}>
+    <Text>{channel.data?.name}</Text>
+    <Text>{channel.state?.messages?.[0]?.text}</Text>
   </View>
 );
 
-const ChannelListComponent = (props) => {
-  const { channels, onSelect } = useChannelsContext();
-  if (!channels) {
-    return null;
-  }
-
-  return (
-    <View testID='channel-list'>
-      {channels?.map((channel) => (
-        <ChannelPreviewComponent
-          {...props}
-          channel={channel}
-          key={channel.id}
-          setActiveChannel={onSelect}
-        />
-      ))}
-    </View>
-  );
-};
-
 test('Workaround to allow exporting tests', () => expect(true).toBe(true));
 
 export const Generic = () => {
@@ -223,12 +207,9 @@ export const Generic = () => {
     const renderComponent = () =>
       render(
         <Chat client={chatClient} enableOfflineSupport>
-          <ChannelList
-            filters={filters}
-            List={ChannelListComponent}
-            Preview={ChannelPreviewComponent}
-            sort={sort}
-          />
+          <WithComponents overrides={{ Preview: ChannelPreviewComponent }}>
+            <ChannelList filters={filters} sort={sort} swipeActionsEnabled={false} />
+          </WithComponents>
         </Chat>,
       );
 
@@ -325,7 +306,7 @@ export const Generic = () => {
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
 
       await waitFor(async () => {
-        expect(screen.getByTestId('channel-list')).toBeTruthy();
+        expect(screen.getByTestId('channel-list-view')).toBeTruthy();
         await expectCIDsOnUIToBeInDB(screen.queryAllByLabelText);
       });
     });
@@ -340,7 +321,7 @@ export const Generic = () => {
 
       await waitFor(
         async () => {
-          expect(screen.getByTestId('channel-list')).toBeTruthy();
+          expect(screen.getByTestId('channel-list-view')).toBeTruthy();
           await expectAllChannelsWithStateToBeInDB(screen.queryAllByLabelText);
         },
         { timeout: 5000 },
@@ -359,7 +340,7 @@ export const Generic = () => {
         await act(
           async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true),
         );
-        expect(screen.getByTestId('channel-list')).toBeTruthy();
+        expect(screen.getByTestId('channel-list-view')).toBeTruthy();
         expect(screen.getByTestId(emptyChannel.cid)).toBeTruthy();
         expect(chatClient.hydrateActiveChannels).toHaveBeenCalled();
         expect(chatClient.hydrateActiveChannels.mock.calls[0][0]).toStrictEqual([emptyChannel]);
@@ -372,7 +353,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const targetChannel = channels[0].channel;
       const newMessage = generateMessage({
         cid: targetChannel.cid,
@@ -401,7 +382,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const targetChannel = channels[0].channel;
 
       // check if the reads state is correct first
@@ -463,7 +444,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const targetChannel = channels[0].channel;
 
       // check if the reads state is correct first
@@ -526,7 +507,7 @@ export const Generic = () => {
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
       await waitFor(() => {
-        expect(screen.getByTestId('channel-list')).toBeTruthy();
+        expect(screen.getByTestId('channel-list-view')).toBeTruthy();
       });
 
       const newChannel = createChannel();
@@ -534,13 +515,26 @@ export const Generic = () => {
       useMockedApis(chatClient, [getOrCreateChannelApi(newChannel)]);
 
       await act(() => dispatchNotificationMessageNewEvent(chatClient, newChannel.channel));
+
+      // Verify the new channel appears on the UI
       await waitFor(() => {
         const channelIdsOnUI = screen
           .queryAllByLabelText('list-item')
           .map((node) => node._fiber.pendingProps.testID);
         expect(channelIdsOnUI.includes(newChannel.channel.cid)).toBeTruthy();
       });
-      await expectAllChannelsWithStateToBeInDB(screen.queryAllByLabelText);
+
+      // Verify the new channel and its state are persisted in the DB
+      await waitFor(async () => {
+        const channelsRows = await BetterSqlite.selectFromTable('channels');
+        const messagesRows = await BetterSqlite.selectFromTable('messages');
+
+        expect(channelsRows.length).toBe(channels.length);
+        expect(messagesRows.length).toBe(allMessages.length);
+
+        const matchingChannelRow = channelsRows.filter((c) => c.id === newChannel.channel.id);
+        expect(matchingChannelRow.length).toBe(1);
+      });
     });
 
     it('should update a message in database', async () => {
@@ -549,7 +543,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const updatedMessage = { ...channels[0].messages[0] };
       updatedMessage.text = uuidv4();
@@ -571,7 +565,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const removedChannel = channels[getRandomInt(0, channels.length - 1)].channel;
       act(() => dispatchNotificationRemovedFromChannel(chatClient, removedChannel));
       await waitFor(async () => {
@@ -598,7 +592,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const removedChannel = channels[getRandomInt(0, channels.length - 1)].channel;
       act(() => dispatchChannelDeletedEvent(chatClient, removedChannel));
       await waitFor(async () => {
@@ -625,7 +619,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const hiddenChannel = channels[getRandomInt(0, channels.length - 1)].channel;
       act(() => dispatchChannelHiddenEvent(chatClient, hiddenChannel));
       await waitFor(async () => {
@@ -655,7 +649,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const hiddenChannel = channels[getRandomInt(0, channels.length - 1)].channel;
       // first, we mark it as hidden
       act(() => dispatchChannelHiddenEvent(chatClient, hiddenChannel));
@@ -708,20 +702,23 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const newChannel = createChannel();
       useMockedApis(chatClient, [getOrCreateChannelApi(newChannel)]);
 
-      act(() => dispatchNotificationAddedToChannel(chatClient, newChannel.channel));
+      await act(() => dispatchNotificationAddedToChannel(chatClient, newChannel.channel));
 
-      await waitFor(async () => {
+      // Verify the new channel appears on the UI
+      await waitFor(() => {
         const channelIdsOnUI = screen
           .queryAllByLabelText('list-item')
           .map((node) => node._fiber.pendingProps.testID);
         expect(channelIdsOnUI.includes(newChannel.channel.cid)).toBeTruthy();
+      });
 
-        await expectCIDsOnUIToBeInDB(screen.queryAllByLabelText);
+      // Verify the new channel is persisted in the DB
+      await waitFor(async () => {
         const channelsRows = await BetterSqlite.selectFromTable('channels');
         const matchingChannelsRows = channelsRows.filter((c) => c.id === newChannel.channel.id);
 
@@ -739,7 +736,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const channelToTruncate = channels[getRandomInt(0, channels.length - 1)].channel;
       act(() => dispatchChannelTruncatedEvent(chatClient, channelToTruncate));
@@ -771,7 +768,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const channelResponse = channels[getRandomInt(0, channels.length - 1)];
       const channelToTruncate = channelResponse.channel;
@@ -815,7 +812,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const channelResponse = channels[getRandomInt(0, channels.length - 1)];
       const channelToTruncate = channelResponse.channel;
@@ -847,7 +844,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const channelResponse = channels[getRandomInt(0, channels.length - 1)];
       const channelToTruncate = channelResponse.channel;
@@ -881,7 +878,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -926,7 +923,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1010,7 +1007,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1076,7 +1073,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1130,7 +1127,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1167,7 +1164,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1264,7 +1261,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1323,7 +1320,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1380,7 +1377,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMessage =
@@ -1438,7 +1435,7 @@ export const Generic = () => {
 
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
 
       const oldMemberCount = targetChannel.channel.member_count;
@@ -1466,7 +1463,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
@@ -1494,7 +1491,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
@@ -1521,7 +1518,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
 
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       targetChannel.channel.name = uuidv4();
@@ -1547,7 +1544,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
 
@@ -1582,7 +1579,7 @@ export const Generic = () => {
       renderComponent();
       act(() => dispatchConnectionChangedEvent(chatClient));
       await act(async () => await chatClient.offlineDb.syncManager.invokeSyncStatusListeners(true));
-      await waitFor(() => expect(screen.getByTestId('channel-list')).toBeTruthy());
+      await waitFor(() => expect(screen.getByTestId('channel-list-view')).toBeTruthy());
       const targetChannel = channels[getRandomInt(0, channels.length - 1)];
       const targetMember = targetChannel.members[getRandomInt(0, targetChannel.members.length - 1)];
 

package/src/components/Attachment/Attachment.tsx

@@ -11,17 +11,8 @@ import {
   type Attachment as AttachmentType,
 } from 'stream-chat';
 
-import { AudioAttachment as AudioAttachmentDefault } from './Audio';
-
-import { UnsupportedAttachment as UnsupportedAttachmentDefault } from './UnsupportedAttachment';
-import { URLPreview as URLPreviewDefault } from './UrlPreview';
-import { URLPreviewCompact as URLPreviewCompactDefault } from './UrlPreview/URLPreviewCompact';
-
-import { FileAttachment as FileAttachmentDefault } from '../../components/Attachment/FileAttachment';
-import { Gallery as GalleryDefault } from '../../components/Attachment/Gallery';
-import { Giphy as GiphyDefault } from '../../components/Attachment/Giphy';
-
 import { useTheme } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -39,16 +30,7 @@ export type ActionHandler = (name: string, value: string) => void;
 
 export type AttachmentPropsWithContext = Pick<
   MessagesContextValue,
-  | 'AudioAttachment'
-  | 'FileAttachment'
-  | 'Gallery'
-  | 'Giphy'
-  | 'isAttachmentEqual'
-  | 'UrlPreview'
-  | 'URLPreviewCompact'
-  | 'myMessageTheme'
-  | 'urlPreviewType'
-  | 'UnsupportedAttachment'
+  'isAttachmentEqual' | 'myMessageTheme' | 'urlPreviewType'
 > &
   Pick<MessageContextValue, 'message'> & {
     /**
@@ -62,19 +44,16 @@ export type AttachmentPropsWithContext = Pick<
   };
 
 const AttachmentWithContext = (props: AttachmentPropsWithContext) => {
+  const { attachment, index, message, urlPreviewType } = props;
   const {
-    attachment,
     AudioAttachment,
     FileAttachment,
     Gallery,
     Giphy,
     UrlPreview,
     URLPreviewCompact,
-    index,
-    message,
-    urlPreviewType,
     UnsupportedAttachment,
-  } = props;
+  } = useComponentsContext();
   const audioAttachmentStyles = useAudioAttachmentStyles();
 
   if (attachment.type === FileTypes.Giphy || attachment.type === FileTypes.Imgur) {
@@ -164,31 +143,9 @@ export type AttachmentProps = Partial<AttachmentPropsWithContext>;
  * Attachment - The message attachment
  */
 export const Attachment = (props: AttachmentProps) => {
-  const {
-    attachment,
-    AudioAttachment: PropAudioAttachment,
-    FileAttachment: PropFileAttachment,
-    Gallery: PropGallery,
-    Giphy: PropGiphy,
-    myMessageTheme: PropMyMessageTheme,
-    UrlPreview: PropUrlPreview,
-    URLPreviewCompact: PropURLPreviewCompact,
-    urlPreviewType: PropUrlPreviewType,
-    UnsupportedAttachment: PropUnsupportedAttachment,
-  } = props;
+  const { attachment } = props;
 
-  const {
-    AudioAttachment: ContextAudioAttachment,
-    FileAttachment: ContextFileAttachment,
-    Gallery: ContextGallery,
-    Giphy: ContextGiphy,
-    isAttachmentEqual,
-    myMessageTheme: ContextMyMessageTheme,
-    UrlPreview: ContextUrlPreview,
-    URLPreviewCompact: ContextURLPreviewCompact,
-    urlPreviewType: ContextUrlPreviewType,
-    UnsupportedAttachment: ContextUnsupportedAttachment,
-  } = useMessagesContext();
+  const { isAttachmentEqual, myMessageTheme, urlPreviewType } = useMessagesContext();
 
   const { message } = useMessageContext();
 
@@ -196,33 +153,14 @@ export const Attachment = (props: AttachmentProps) => {
     return null;
   }
 
-  const AudioAttachment = PropAudioAttachment || ContextAudioAttachment || AudioAttachmentDefault;
-  const FileAttachment = PropFileAttachment || ContextFileAttachment || FileAttachmentDefault;
-  const Gallery = PropGallery || ContextGallery || GalleryDefault;
-  const Giphy = PropGiphy || ContextGiphy || GiphyDefault;
-  const UrlPreview = PropUrlPreview || ContextUrlPreview || URLPreviewDefault;
-  const myMessageTheme = PropMyMessageTheme || ContextMyMessageTheme;
-  const URLPreviewCompact =
-    PropURLPreviewCompact || ContextURLPreviewCompact || URLPreviewCompactDefault;
-  const urlPreviewType = PropUrlPreviewType || ContextUrlPreviewType;
-  const UnsupportedAttachment =
-    PropUnsupportedAttachment || ContextUnsupportedAttachment || UnsupportedAttachmentDefault;
-
   return (
     <MemoizedAttachment
       {...{
         attachment,
-        message,
-        AudioAttachment,
-        FileAttachment,
-        Gallery,
-        Giphy,
         isAttachmentEqual,
+        message,
         myMessageTheme,
-        UrlPreview,
-        URLPreviewCompact,
         urlPreviewType,
-        UnsupportedAttachment,
       }}
     />
   );

package/src/components/Attachment/FileAttachment.tsx

@@ -7,6 +7,7 @@ import { openUrlSafely } from './utils/openUrlSafely';
 
 import { FileIconProps } from '../../components/Attachment/FileIcon';
 
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -21,7 +22,7 @@ export type FileAttachmentPropsWithContext = Pick<
   MessageContextValue,
   'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
 > &
-  Pick<MessagesContextValue, 'additionalPressableProps' | 'FilePreview'> & {
+  Pick<MessagesContextValue, 'additionalPressableProps'> & {
     /** The attachment to render */
     attachment: Attachment;
     attachmentIconSize?: FileIconProps['size'];
@@ -41,13 +42,13 @@ const FileAttachmentWithContext = (props: FileAttachmentPropsWithContext) => {
     additionalPressableProps,
     attachment,
     attachmentIconSize,
-    FilePreview,
     onLongPress,
     onPress,
     onPressIn,
     preventPress,
     styles: stylesProp = styles,
   } = props;
+  const { FilePreview } = useComponentsContext();
 
   const defaultOnPress = () => openUrlSafely(attachment.asset_url);
 
@@ -99,17 +100,13 @@ export type FileAttachmentProps = Partial<Omit<FileAttachmentPropsWithContext, '
   Pick<FileAttachmentPropsWithContext, 'attachment'>;
 
 export const FileAttachment = (props: FileAttachmentProps) => {
-  const { FilePreview: PropFilePreview } = props;
   const { onLongPress, onPress, onPressIn, preventPress } = useMessageContext();
-  const { additionalPressableProps, FilePreview: ContextFilePreview } = useMessagesContext();
-
-  const FilePreview = PropFilePreview || ContextFilePreview;
+  const { additionalPressableProps } = useMessagesContext();
 
   return (
     <FileAttachmentWithContext
       {...{
         additionalPressableProps,
-        FilePreview,
         onLongPress,
         onPress,
         onPressIn,

package/src/components/Attachment/FileAttachmentGroup.tsx

@@ -1,30 +1,24 @@
 import React from 'react';
 import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
 
-import { Attachment as AttachmentDefault } from './Attachment';
-
+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 { primitives } from '../../theme';
 
-export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files' | 'message'> &
-  Pick<MessagesContextValue, 'Attachment'> & {
-    styles?: Partial<{
-      attachmentContainer: StyleProp<ViewStyle>;
-      container: StyleProp<ViewStyle>;
-    }>;
-  };
+export type FileAttachmentGroupPropsWithContext = Pick<MessageContextValue, 'files' | 'message'> & {
+  styles?: Partial<{
+    attachmentContainer: StyleProp<ViewStyle>;
+    container: StyleProp<ViewStyle>;
+  }>;
+};
 
 const FileAttachmentGroupWithContext = (props: FileAttachmentGroupPropsWithContext) => {
-  const { Attachment, files, message, styles: stylesProp = {} } = props;
+  const { files, message, styles: stylesProp = {} } = props;
+  const { Attachment } = useComponentsContext();
 
   const {
     theme: {
@@ -75,8 +69,6 @@ export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
 
   const { files: contextFiles, message } = useMessageContext();
 
-  const { Attachment = AttachmentDefault, AudioAttachment } = useMessagesContext();
-
   const files = propFiles || contextFiles;
 
   if (!files.length) {
@@ -86,8 +78,6 @@ export const FileAttachmentGroup = (props: FileAttachmentGroupProps) => {
   return (
     <MemoizedFileAttachmentGroup
       {...{
-        Attachment,
-        AudioAttachment,
         files,
         message,
       }}

package/src/components/Attachment/FilePreview.tsx

@@ -3,16 +3,13 @@ import { StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-n
 
 import type { Attachment } from 'stream-chat';
 
-import { FileIcon as FileIconDefault, FileIconProps } from '../../components/Attachment/FileIcon';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
+import type { FileIconProps } from '../../components/Attachment/FileIcon';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../theme';
 import { getDurationLabelFromDuration, getFileSizeDisplayText } from '../../utils/utils';
 
-export type FilePreviewProps = Partial<Pick<MessagesContextValue, 'FileAttachmentIcon'>> & {
+export type FilePreviewProps = {
   /** The attachment to render */
   attachment: Attachment;
   attachmentIconSize?: FileIconProps['size'];
@@ -30,14 +27,12 @@ export type FilePreviewProps = Partial<Pick<MessagesContextValue, 'FileAttachmen
 export const FilePreview = (props: FilePreviewProps) => {
   const {
     attachment,
-    FileAttachmentIcon: PropFileAttachmentIcon,
     attachmentIconSize,
     styles: stylesProp = {},
     titleNumberOfLines = 2,
     indicator,
   } = props;
-  const { FileAttachmentIcon: ContextFileAttachmentIcon } = useMessagesContext();
-  const FileAttachmentIcon = PropFileAttachmentIcon || ContextFileAttachmentIcon || FileIconDefault;
+  const { FileAttachmentIcon } = useComponentsContext();
 
   const styles = useStyles();