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

package/src/components/Message/MessageItemView/MessageFooter.tsx

@@ -3,18 +3,13 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import type { Attachment, LocalMessage } from 'stream-chat';
 
-import type { MessageStatusProps } from './MessageStatus';
-
 import type { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   Alignment,
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -37,7 +32,6 @@ type MessageFooterPropsWithContext = Pick<
   | 'lastGroupMessage'
   | 'isMessageAIGenerated'
 > &
-  Pick<MessagesContextValue, 'MessageStatus' | 'MessageTimestamp'> &
   MessageFooterComponentProps;
 
 const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
@@ -49,10 +43,9 @@ const MessageFooterWithContext = (props: MessageFooterPropsWithContext) => {
     lastGroupMessage,
     members,
     message,
-    MessageStatus,
-    MessageTimestamp,
     showMessageStatus,
   } = props;
+  const { MessageStatus, MessageTimestamp } = useComponentsContext();
   const styles = useStyles();
 
   const {
@@ -169,7 +162,6 @@ export type MessageFooterProps = Partial<Pick<ChannelContextValue, 'members'>> &
     alignment?: Alignment;
     lastGroupMessage?: boolean;
     message?: LocalMessage;
-    MessageStatus?: React.ComponentType<MessageStatusProps>;
     otherAttachments?: Attachment[];
     showMessageStatus?: boolean;
   };
@@ -178,8 +170,6 @@ export const MessageFooter = (props: MessageFooterProps) => {
   const { alignment, isMessageAIGenerated, lastGroupMessage, members, message, showMessageStatus } =
     useMessageContext();
 
-  const { MessageStatus, MessageTimestamp } = useMessagesContext();
-
   return (
     <MemoizedMessageFooter
       {...{
@@ -188,8 +178,6 @@ export const MessageFooter = (props: MessageFooterProps) => {
         lastGroupMessage,
         members,
         message,
-        MessageStatus,
-        MessageTimestamp,
         showMessageStatus,
       }}
       {...props}

package/src/components/Message/MessageItemView/MessageHeader.tsx

@@ -2,43 +2,35 @@ import React, { useMemo } from 'react';
 
 import { View, ViewStyle } from 'react-native';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
 } from '../../../contexts/messageContext/MessageContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
 import { useMessageReminder } from '../../../hooks/useMessageReminder';
 
-type MessageHeaderPropsWithContext = Pick<MessageContextValue, 'alignment' | 'message'> &
-  Pick<
-    MessagesContextValue,
-    | 'MessagePinnedHeader'
-    | 'MessageReminderHeader'
-    | 'MessageSavedForLaterHeader'
-    | 'SentToChannelHeader'
-  > & {
-    shouldShowSavedForLaterHeader?: boolean;
-    shouldShowPinnedHeader: boolean;
-    shouldShowReminderHeader: boolean;
-    shouldShowSentToChannelHeader: boolean;
-  };
+type MessageHeaderPropsWithContext = Pick<MessageContextValue, 'alignment' | 'message'> & {
+  shouldShowSavedForLaterHeader?: boolean;
+  shouldShowPinnedHeader: boolean;
+  shouldShowReminderHeader: boolean;
+  shouldShowSentToChannelHeader: boolean;
+};
 
 const MessageHeaderWithContext = (props: MessageHeaderPropsWithContext) => {
   const {
     alignment,
     message,
-    MessagePinnedHeader,
     shouldShowSavedForLaterHeader,
     shouldShowPinnedHeader,
     shouldShowReminderHeader,
     shouldShowSentToChannelHeader,
+  } = props;
+  const {
+    MessagePinnedHeader,
     MessageReminderHeader,
     MessageSavedForLaterHeader,
     SentToChannelHeader,
-  } = props;
+  } = useComponentsContext();
 
   const containerStyle: ViewStyle = useMemo(() => {
     return {
@@ -115,12 +107,6 @@ export type MessageHeaderProps = Partial<Pick<MessageContextValue, 'message'>>;
 
 export const MessageHeader = (props: MessageHeaderProps) => {
   const { alignment, message } = useMessageContext();
-  const {
-    MessagePinnedHeader,
-    MessageReminderHeader,
-    MessageSavedForLaterHeader,
-    SentToChannelHeader,
-  } = useMessagesContext();
   const reminder = useMessageReminder(message.id);
 
   const shouldShowSavedForLaterHeader = reminder && !reminder.remindAt;
@@ -141,14 +127,10 @@ export const MessageHeader = (props: MessageHeaderProps) => {
     <MemoizedMessageHeader
       alignment={alignment}
       message={message}
-      MessagePinnedHeader={MessagePinnedHeader}
       shouldShowSavedForLaterHeader={shouldShowSavedForLaterHeader}
       shouldShowPinnedHeader={shouldShowPinnedHeader}
       shouldShowReminderHeader={!!shouldShowReminderHeader}
       shouldShowSentToChannelHeader={shouldShowSentToChannelHeader}
-      MessageReminderHeader={MessageReminderHeader}
-      MessageSavedForLaterHeader={MessageSavedForLaterHeader}
-      SentToChannelHeader={SentToChannelHeader}
       {...props}
     />
   );

package/src/components/Message/MessageItemView/MessageItemView.tsx

@@ -3,6 +3,7 @@ import { Dimensions, StyleSheet, View, ViewStyle } from 'react-native';
 
 import { SwipableMessageWrapper } from './MessageBubble';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   Alignment,
   MessageContextValue,
@@ -216,20 +217,9 @@ export type MessageItemViewPropsWithContext = Pick<
     | 'enableMessageGroupingByUser'
     | 'enableSwipeToReply'
     | 'myMessageTheme'
-    | 'MessageAuthor'
-    | 'MessageContent'
-    | 'MessageDeleted'
-    | 'MessageError'
-    | 'MessageFooter'
-    | 'MessageHeader'
-    | 'MessageReplies'
-    | 'MessageSpacer'
-    | 'MessageSwipeContent'
     | 'messageSwipeToReplyHitSlop'
-    | 'ReactionListBottom'
     | 'reactionListPosition'
     | 'reactionListType'
-    | 'ReactionListTop'
   >;
 
 const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
@@ -245,6 +235,14 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     hasAttachmentActions,
     isMyMessage,
     message,
+    messageSwipeToReplyHitSlop = { left: width, right: width },
+    onlyEmojis,
+    otherAttachments,
+    reactionListPosition,
+    reactionListType,
+    setQuotedMessage,
+  } = props;
+  const {
     MessageAuthor,
     MessageContent,
     MessageDeleted,
@@ -253,16 +251,9 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
     MessageHeader,
     MessageReplies,
     MessageSpacer,
-    MessageSwipeContent,
-    messageSwipeToReplyHitSlop = { left: width, right: width },
-    onlyEmojis,
-    otherAttachments,
     ReactionListBottom,
-    reactionListPosition,
-    reactionListType,
     ReactionListTop,
-    setQuotedMessage,
-  } = props;
+  } = useComponentsContext();
 
   const {
     theme: {
@@ -380,7 +371,6 @@ const MessageItemViewWithContext = (props: MessageItemViewPropsWithContext) => {
 
   return enableSwipeToReply && !isMessageTypeDeleted ? (
     <SwipableMessageWrapper
-      MessageSwipeContent={MessageSwipeContent}
       messageSwipeToReplyHitSlop={messageSwipeToReplyHitSlop}
       onSwipe={onSwipeActionHandler}
     >
@@ -540,21 +530,10 @@ export const MessageItemView = (props: MessageItemViewProps) => {
     customMessageSwipeAction,
     enableMessageGroupingByUser,
     enableSwipeToReply,
-    MessageAuthor,
-    MessageContent,
-    MessageDeleted,
-    MessageError,
-    MessageFooter,
-    MessageHeader,
-    MessageReplies,
-    MessageSpacer,
-    MessageSwipeContent,
     messageSwipeToReplyHitSlop,
     myMessageTheme,
-    ReactionListBottom,
     reactionListPosition,
     reactionListType,
-    ReactionListTop,
   } = useMessagesContext();
 
   return (
@@ -570,23 +549,12 @@ export const MessageItemView = (props: MessageItemViewProps) => {
         hasAttachmentActions,
         isMyMessage,
         message,
-        MessageAuthor,
-        MessageContent,
-        MessageDeleted,
-        MessageError,
-        MessageFooter,
-        MessageHeader,
-        MessageReplies,
-        MessageSpacer,
-        MessageSwipeContent,
         messageSwipeToReplyHitSlop,
         myMessageTheme,
         onlyEmojis,
         otherAttachments,
-        ReactionListBottom,
         reactionListPosition,
         reactionListType,
-        ReactionListTop,
         setQuotedMessage,
         lastGroupMessage,
         members,

package/src/components/Message/MessageItemView/MessageReplies.tsx

@@ -1,14 +1,11 @@
 import React, { useMemo } from 'react';
 import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 
+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 {
   TranslationContextValue,
@@ -31,7 +28,6 @@ export type MessageRepliesPropsWithContext = Pick<
   | 'preventPress'
   | 'threadList'
 > &
-  Pick<MessagesContextValue, 'MessageRepliesAvatars'> &
   Pick<TranslationContextValue, 't'>;
 
 const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
@@ -39,7 +35,6 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     alignment,
     isMyMessage,
     message,
-    MessageRepliesAvatars,
     onLongPress,
     onOpenThread,
     onPress,
@@ -48,6 +43,7 @@ const MessageRepliesWithContext = (props: MessageRepliesPropsWithContext) => {
     t,
     threadList,
   } = props;
+  const { MessageRepliesAvatars } = useComponentsContext();
 
   const {
     theme: {
@@ -190,7 +186,6 @@ export const MessageReplies = (props: MessageRepliesProps) => {
     preventPress,
     threadList,
   } = useMessageContext();
-  const { MessageRepliesAvatars } = useMessagesContext();
   const { t } = useTranslationContext();
 
   return (
@@ -199,7 +194,6 @@ export const MessageReplies = (props: MessageRepliesProps) => {
         alignment,
         isMyMessage,
         message,
-        MessageRepliesAvatars,
         onLongPress,
         onOpenThread,
         onPress,

package/src/components/Message/MessageItemView/MessageTextContainer.tsx

@@ -5,6 +5,7 @@ import { LocalMessage } from 'stream-chat';
 
 import { renderText, RenderTextParams } from './utils/renderText';
 
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -32,10 +33,7 @@ export type MessageTextContainerPropsWithContext = Pick<
   MessageContextValue,
   'message' | 'onLongPress' | 'onlyEmojis' | 'onPress' | 'preventPress' | 'isMyMessage'
 > &
-  Pick<
-    MessagesContextValue,
-    'markdownRules' | 'MessageText' | 'myMessageTheme' | 'messageTextNumberOfLines'
-  > & {
+  Pick<MessagesContextValue, 'markdownRules' | 'myMessageTheme' | 'messageTextNumberOfLines'> & {
     markdownStyles?: MarkdownStyle;
     messageOverlay?: boolean;
     styles?: Partial<{
@@ -52,7 +50,6 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
     markdownStyles: markdownStylesProp = {},
     message,
     messageOverlay,
-    MessageText,
     messageTextNumberOfLines,
     onLongPress,
     onlyEmojis,
@@ -60,6 +57,7 @@ const MessageTextContainerWithContext = (props: MessageTextContainerPropsWithCon
     preventPress,
     styles: stylesProp = {},
   } = props;
+  const { MessageText } = useComponentsContext();
 
   const {
     theme: {
@@ -186,8 +184,7 @@ export type MessageTextContainerProps = Partial<MessageTextContainerPropsWithCon
 export const MessageTextContainer = (props: MessageTextContainerProps) => {
   const { message, onLongPress, onlyEmojis, onPress, preventPress, isMyMessage } =
     useMessageContext();
-  const { markdownRules, MessageText, messageTextNumberOfLines, myMessageTheme } =
-    useMessagesContext();
+  const { markdownRules, messageTextNumberOfLines, myMessageTheme } = useMessagesContext();
 
   return (
     <MemoizedMessageTextContainer
@@ -195,7 +192,6 @@ export const MessageTextContainer = (props: MessageTextContainerProps) => {
         markdownRules,
         message,
         isMyMessage,
-        MessageText,
         messageTextNumberOfLines,
         myMessageTheme,
         onLongPress,

package/src/components/Message/MessageItemView/MessageWrapper.tsx

@@ -8,6 +8,7 @@ import { useMessageDateSeparator } from '../../../components/MessageList/hooks/u
 import { useMessageGroupStyles } from '../../../components/MessageList/hooks/useMessageGroupStyles';
 import { useChannelContext } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useMessageListItemContext } from '../../../contexts/messageListItemContext/MessageListItemContext';
 import { useMessagesContext } from '../../../contexts/messagesContext/MessagesContext';
 import { ThemeProvider, useTheme } from '../../../contexts/themeContext/ThemeContext';
@@ -40,15 +41,9 @@ export const MessageWrapper = React.memo((props: MessageWrapperProps) => {
     maxTimeBetweenGroupedMessages,
     threadList,
   } = useChannelContext();
-  const {
-    getMessageGroupStyle,
-    InlineDateSeparator,
-    InlineUnreadIndicator,
-    Message,
-    MessageSystem,
-    myMessageTheme,
-    shouldShowUnreadUnderlay,
-  } = useMessagesContext();
+  const { InlineDateSeparator, InlineUnreadIndicator, Message, MessageSystem } =
+    useComponentsContext();
+  const { getMessageGroupStyle, myMessageTheme, shouldShowUnreadUnderlay } = useMessagesContext();
   const { goToMessage, onThreadSelect, noGroupByUser, modifiedTheme } = useMessageListItemContext();
 
   const dateSeparatorDate = useMessageDateSeparator({

package/src/components/Message/MessageItemView/ReactionList/ReactionListBottom.tsx

@@ -3,6 +3,7 @@ import { FlatList, StyleSheet, View } from 'react-native';
 
 import { ReactionListItemProps } from './ReactionListItem';
 
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -29,9 +30,7 @@ export type ReactionListBottomProps = Partial<
     | 'showReactionsOverlay'
   >
 > &
-  Partial<
-    Pick<MessagesContextValue, 'supportedReactions' | 'ReactionListClustered' | 'ReactionListItem'>
-  > & {
+  Partial<Pick<MessagesContextValue, 'supportedReactions'>> & {
     type?: 'clustered' | 'segmented';
     showCount?: boolean;
   };
@@ -55,8 +54,6 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
     supportedReactions: propSupportedReactions,
     type,
     showCount = true,
-    ReactionListClustered: propReactionListClustered,
-    ReactionListItem: propReactionListItem,
   } = props;
 
   const {
@@ -71,11 +68,8 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
     showReactionsOverlay: contextShowReactionsOverlay,
   } = useMessageContext();
 
-  const {
-    supportedReactions: contextSupportedReactions,
-    ReactionListClustered: contextReactionListClustered,
-    ReactionListItem: contextReactionListItem,
-  } = useMessagesContext();
+  const { ReactionListClustered, ReactionListItem } = useComponentsContext();
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
 
   const alignment = propAlignment || contextAlignment;
   const handleReaction = propHandlerReaction || contextHandleReaction;
@@ -87,8 +81,6 @@ export const ReactionListBottom = (props: ReactionListBottomProps) => {
   const reactions = propReactions || contextReactions;
   const showReactionsOverlay = propShowReactionsOverlay || contextShowReactionsOverlay;
   const supportedReactions = propSupportedReactions || contextSupportedReactions;
-  const ReactionListClustered = propReactionListClustered || contextReactionListClustered;
-  const ReactionListItem = propReactionListItem || contextReactionListItem;
 
   const renderItem = useCallback(
     ({ index, item }: { index: number; item: ReactionListItemProps }) => (

package/src/components/Message/MessageItemView/ReactionList/ReactionListTop.tsx

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -26,14 +27,7 @@ export type ReactionListTopProps = Partial<
     | 'showReactionsOverlay'
     | 'handleReaction'
   > &
-    Pick<
-      MessagesContextValue,
-      | 'supportedReactions'
-      | 'reactionListType'
-      | 'ReactionListClustered'
-      | 'ReactionListItem'
-      | 'ReactionListCountItem'
-    >
+    Pick<MessagesContextValue, 'supportedReactions' | 'reactionListType'>
 > & {
   type?: 'clustered' | 'segmented';
   showCount?: boolean;
@@ -56,9 +50,6 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
     handleReaction: propHandleReaction,
     type,
     showCount = true,
-    ReactionListClustered: propReactionListClustered,
-    ReactionListItem: propReactionListItem,
-    ReactionListCountItem: propReactionListCountItem,
   } = props;
 
   const {
@@ -73,12 +64,8 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
     handleReaction: contextHandleReaction,
   } = useMessageContext();
 
-  const {
-    supportedReactions: contextSupportedReactions,
-    ReactionListClustered: contextReactionListClustered,
-    ReactionListItem: contextReactionListItem,
-    ReactionListCountItem: contextReactionListCountItem,
-  } = useMessagesContext();
+  const { ReactionListClustered, ReactionListCountItem, ReactionListItem } = useComponentsContext();
+  const { supportedReactions: contextSupportedReactions } = useMessagesContext();
 
   const alignment = propAlignment || contextAlignment;
   const hasReactions = propHasReactions || contextHasReactions;
@@ -90,9 +77,6 @@ export const ReactionListTop = (props: ReactionListTopProps) => {
   const showReactionsOverlay = propShowReactionsOverlay || contextShowReactionsOverlay;
   const supportedReactions = propSupportedReactions || contextSupportedReactions;
   const handleReaction = propHandleReaction || contextHandleReaction;
-  const ReactionListClustered = propReactionListClustered || contextReactionListClustered;
-  const ReactionListItem = propReactionListItem || contextReactionListItem;
-  const ReactionListCountItem = propReactionListCountItem || contextReactionListCountItem;
 
   const styles = useStyles({ alignment });
 

package/src/components/Message/MessageItemView/__tests__/MessageContent.test.js

@@ -4,6 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import { cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
 import { ChannelsStateProvider } from '../../../../contexts/channelsStateContext/ChannelsStateContext';
+import { WithComponents } from '../../../../contexts/componentsContext/ComponentsContext';
 
 import { getOrCreateChannelApi } from '../../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../../mock-builders/api/useMockedApis';
@@ -116,9 +117,11 @@ describe('MessageContent', () => {
     render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel channel={channel} MessageHeader={ContextMessageHeader}>
-            <Message groupStyles={['bottom']} message={message} />
-          </Channel>
+          <WithComponents overrides={{ MessageHeader: ContextMessageHeader }}>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} message={message} />
+            </Channel>
+          </WithComponents>
         </Chat>
       </ChannelsStateProvider>,
     );
@@ -138,9 +141,11 @@ describe('MessageContent', () => {
     render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel channel={channel} MessageFooter={ContextMessageFooter}>
-            <Message groupStyles={['bottom']} message={message} />
-          </Channel>
+          <WithComponents overrides={{ MessageFooter: ContextMessageFooter }}>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} message={message} />
+            </Channel>
+          </WithComponents>
         </Chat>
       </ChannelsStateProvider>,
     );
@@ -158,13 +163,16 @@ describe('MessageContent', () => {
     render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel
-            channel={channel}
-            MessageContentBottomView={() => <View testID='message-content-bottom-view' />}
-            MessageContentTopView={() => <View testID='message-content-top-view' />}
+          <WithComponents
+            overrides={{
+              MessageContentBottomView: () => <View testID='message-content-bottom-view' />,
+              MessageContentTopView: () => <View testID='message-content-top-view' />,
+            }}
           >
-            <Message groupStyles={['bottom']} message={message} />
-          </Channel>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} message={message} />
+            </Channel>
+          </WithComponents>
         </Chat>
       </ChannelsStateProvider>,
     );
@@ -183,13 +191,16 @@ describe('MessageContent', () => {
     render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel
-            channel={channel}
-            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
-            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          <WithComponents
+            overrides={{
+              MessageContentLeadingView: () => <View testID='message-content-leading-view' />,
+              MessageContentTrailingView: () => <View testID='message-content-trailing-view' />,
+            }}
           >
-            <Message groupStyles={['bottom']} message={message} />
-          </Channel>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} message={message} />
+            </Channel>
+          </WithComponents>
         </Chat>
       </ChannelsStateProvider>,
     );
@@ -209,13 +220,16 @@ describe('MessageContent', () => {
     const { rerender } = render(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel
-            channel={channel}
-            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
-            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          <WithComponents
+            overrides={{
+              MessageContentLeadingView: () => <View testID='message-content-leading-view' />,
+              MessageContentTrailingView: () => <View testID='message-content-trailing-view' />,
+            }}
           >
-            <Message groupStyles={['bottom']} message={leftAlignedMessage} />
-          </Channel>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} message={leftAlignedMessage} />
+            </Channel>
+          </WithComponents>
         </Chat>
       </ChannelsStateProvider>,
     );
@@ -231,13 +245,16 @@ describe('MessageContent', () => {
     rerender(
       <ChannelsStateProvider>
         <Chat client={chatClient}>
-          <Channel
-            channel={channel}
-            MessageContentLeadingView={() => <View testID='message-content-leading-view' />}
-            MessageContentTrailingView={() => <View testID='message-content-trailing-view' />}
+          <WithComponents
+            overrides={{
+              MessageContentLeadingView: () => <View testID='message-content-leading-view' />,
+              MessageContentTrailingView: () => <View testID='message-content-trailing-view' />,
+            }}
           >
-            <Message groupStyles={['bottom']} message={rightAlignedMessage} />
-          </Channel>
+            <Channel channel={channel}>
+              <Message groupStyles={['bottom']} message={rightAlignedMessage} />
+            </Channel>
+          </WithComponents>
         </Chat>
       </ChannelsStateProvider>,
     );