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

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

@@ -6,6 +6,7 @@ import { fireEvent, render } from '@testing-library/react-native';
 
 import { LocalMessage, ReactionResponse } from 'stream-chat';
 
+import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
 import {
   MessagesContextValue,
   MessagesProvider,
@@ -42,18 +43,18 @@ const renderComponent = (props = {}) =>
   render(
     <ThemeProvider theme={defaultTheme}>
       <TranslationProvider value={mockTranslations as unknown as TranslationContextValue}>
-        <MessagesProvider
-          value={
-            {
-              MessageUserReactionsAvatar: () => null,
-              MessageUserReactionsItem: (props: MessageUserReactionsItemProps) => (
-                <Text>{props.reaction.id + ' ' + props.reaction.type}</Text>
-              ),
-            } as unknown as MessagesContextValue
-          }
+        <WithComponents
+          overrides={{
+            MessageUserReactionsAvatar: () => null,
+            MessageUserReactionsItem: (itemProps: MessageUserReactionsItemProps) => (
+              <Text>{itemProps.reaction.id + ' ' + itemProps.reaction.type}</Text>
+            ),
+          }}
         >
-          <MessageUserReactions {...defaultProps} {...props} />
-        </MessagesProvider>
+          <MessagesProvider value={{} as unknown as MessagesContextValue}>
+            <MessageUserReactions {...defaultProps} {...props} />
+          </MessagesProvider>
+        </WithComponents>
       </TranslationProvider>
     </ThemeProvider>,
   );

package/src/components/Poll/CreatePollContent.tsx

@@ -16,11 +16,11 @@ import {
   CreatePollModalState,
   CreatePollContentContextValue,
   CreatePollContentProvider,
-  InputMessageInputContextValue,
   useCreatePollContentContext,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { useMessageComposer } from '../../contexts/messageInputContext/hooks/useMessageComposer';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
@@ -212,14 +212,13 @@ export const CreatePollContent = () => {
 
 export const CreatePoll = ({
   closePollCreationDialog,
-  CreatePollContent: CreatePollContentOverride,
   createPollOptionGap = 8,
   sendMessage,
 }: Pick<
   CreatePollContentContextValue,
   'createPollOptionGap' | 'closePollCreationDialog' | 'sendMessage'
-> &
-  Pick<InputMessageInputContextValue, 'CreatePollContent'>) => {
+>) => {
+  const { CreatePollContent: CreatePollContentOverride } = useComponentsContext();
   const messageComposer = useMessageComposer();
   const [modalStateStore] = useState(
     () => new StateStore<CreatePollModalState>({ isClosing: false }),

package/src/components/Poll/Poll.tsx

@@ -3,28 +3,24 @@ import { StyleSheet, Text, View } from 'react-native';
 
 import { PollOption as PollOptionClass } from 'stream-chat';
 
-import { PollButtons, PollOption, ShowAllOptionsButton } from './components';
+import { PollOption, ShowAllOptionsButton } from './components';
 
 import { usePollState } from './hooks/usePollState';
 
 import {
-  MessagesContextValue,
   PollContextProvider,
   PollContextValue,
   useTheme,
   useTranslationContext,
 } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../theme';
 import { defaultPollOptionCount } from '../../utils/constants';
 
-export type PollProps = Pick<PollContextValue, 'poll' | 'message'> &
-  Pick<MessagesContextValue, 'PollContent'>;
+export type PollProps = Pick<PollContextValue, 'poll' | 'message'>;
 
-export type PollContentProps = {
-  PollButtons?: React.ComponentType;
-  PollHeader?: React.ComponentType;
-};
+export type PollContentProps = Record<string, never>;
 
 export const PollHeader = () => {
   const styles = useStyles();
@@ -60,12 +56,11 @@ export const PollHeader = () => {
   );
 };
 
-export const PollContent = ({
-  PollButtons: PollButtonsOverride,
-  PollHeader: PollHeaderOverride,
-}: PollContentProps) => {
+export const PollContent = () => {
   const { options } = usePollState();
   const styles = useStyles();
+  const { PollButtons: PollButtonsComponent, PollHeader: PollHeaderComponent } =
+    useComponentsContext();
 
   const {
     theme: {
@@ -77,7 +72,7 @@ export const PollContent = ({
 
   return (
     <View style={[styles.container, container]}>
-      {PollHeaderOverride ? <PollHeaderOverride /> : <PollHeader />}
+      <PollHeaderComponent />
       <View style={[styles.optionsWrapper, optionsWrapper]}>
         {options
           ?.slice(0, defaultPollOptionCount)
@@ -86,21 +81,24 @@ export const PollContent = ({
           ))}
         <ShowAllOptionsButton />
       </View>
-      {PollButtonsOverride ? <PollButtonsOverride /> : <PollButtons />}
+      <PollButtonsComponent />
     </View>
   );
 };
 
-export const Poll = ({ message, poll, PollContent: PollContentOverride }: PollProps) => (
-  <PollContextProvider
-    value={{
-      message,
-      poll,
-    }}
-  >
-    {PollContentOverride ? <PollContentOverride /> : <PollContent />}
-  </PollContextProvider>
-);
+export const Poll = ({ message, poll }: PollProps) => {
+  const { PollContent: PollContentOverride } = useComponentsContext();
+  return (
+    <PollContextProvider
+      value={{
+        message,
+        poll,
+      }}
+    >
+      {PollContentOverride ? <PollContentOverride /> : <PollContent />}
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollAnswersList.tsx

@@ -14,6 +14,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../theme';
 import { getDateString } from '../../../utils/i18n/getDateString';
 import { Button } from '../../ui';
@@ -64,7 +65,6 @@ export const AnswerListAddCommentButton = (props: PollButtonProps) => {
 
 export type PollAnswersListProps = PollContextValue & {
   additionalFlatListProps?: Partial<FlatListProps<PollAnswer>>;
-  PollAnswersListContent?: React.ComponentType;
 };
 
 export const PollAnswerListItem = ({ answer }: { answer: PollAnswer }) => {
@@ -157,16 +157,14 @@ export const PollAnswersList = ({
   additionalFlatListProps,
   message,
   poll,
-  PollAnswersListContent: PollAnswersListOverride,
-}: PollAnswersListProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollAnswersListOverride ? (
-      <PollAnswersListOverride />
-    ) : (
-      <PollAnswersListContent additionalFlatListProps={additionalFlatListProps} />
-    )}
-  </PollContextProvider>
-);
+}: PollAnswersListProps) => {
+  const { PollAnswersListContent: PollAnswersListContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollAnswersListContentComponent additionalFlatListProps={additionalFlatListProps} />
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollOption.tsx

@@ -16,6 +16,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 
 import { Check } from '../../../icons';
 import { primitives } from '../../../theme';
@@ -32,7 +33,6 @@ export type PollOptionProps = {
 
 export type PollAllOptionsContentProps = PollContextValue & {
   additionalScrollViewProps?: Partial<ScrollViewProps>;
-  PollAllOptionsContent?: React.ComponentType;
 };
 
 export const PollAllOptionsContent = ({
@@ -75,16 +75,14 @@ export const PollAllOptions = ({
   additionalScrollViewProps,
   message,
   poll,
-  PollAllOptionsContent: PollAllOptionsContentOverride,
-}: PollAllOptionsContentProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollAllOptionsContentOverride ? (
-      <PollAllOptionsContentOverride />
-    ) : (
-      <PollAllOptionsContent additionalScrollViewProps={additionalScrollViewProps} />
-    )}
-  </PollContextProvider>
-);
+}: PollAllOptionsContentProps) => {
+  const { PollAllOptionsContent: PollAllOptionsContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollAllOptionsContentComponent additionalScrollViewProps={additionalScrollViewProps} />
+    </PollContextProvider>
+  );
+};
 
 export const PollOption = ({ option, showProgressBar = true, forceIncoming }: PollOptionProps) => {
   const { latestVotesByOption, voteCountsByOption, voteCount } = usePollState();

package/src/components/Poll/components/PollResults/PollOptionFullResults.tsx

@@ -11,6 +11,7 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 
 import { primitives } from '../../../../theme';
 import { usePollOptionVotesPagination } from '../../hooks/usePollOptionVotesPagination';
@@ -19,7 +20,6 @@ import { usePollState } from '../../hooks/usePollState';
 export type PollOptionFullResultsProps = PollContextValue & {
   option: PollOption;
   additionalFlatListProps?: Partial<FlatListProps<PollVoteClass>>;
-  PollOptionFullResultsContent?: React.ComponentType<{ option: PollOption }>;
 };
 
 export const renderPollOptionFullResultsItem = ({ item }: { item: PollVoteClass }) => (
@@ -86,19 +86,18 @@ export const PollOptionFullResults = ({
   message,
   option,
   poll,
-  PollOptionFullResultsContent: PollOptionFullResultsContentOverride,
-}: PollOptionFullResultsProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollOptionFullResultsContentOverride ? (
-      <PollOptionFullResultsContentOverride option={option} />
-    ) : (
-      <PollOptionFullResultsContent
+}: PollOptionFullResultsProps) => {
+  const { PollOptionFullResultsContent: PollOptionFullResultsContentComponent } =
+    useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollOptionFullResultsContentComponent
         additionalFlatListProps={additionalFlatListProps}
         option={option}
       />
-    )}
-  </PollContextProvider>
-);
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Poll/components/PollResults/PollResults.tsx

@@ -11,12 +11,12 @@ import {
   useTheme,
   useTranslationContext,
 } from '../../../../contexts';
+import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { primitives } from '../../../../theme';
 import { usePollState } from '../../hooks/usePollState';
 
 export type PollResultsProps = PollContextValue & {
   additionalScrollViewProps?: Partial<ScrollViewProps>;
-  PollResultsContent?: React.ComponentType;
 };
 
 export const PollResultsContent = ({
@@ -62,20 +62,14 @@ export const PollResultsContent = ({
   );
 };
 
-export const PollResults = ({
-  additionalScrollViewProps,
-  message,
-  poll,
-  PollResultsContent: PollResultsContentOverride,
-}: PollResultsProps) => (
-  <PollContextProvider value={{ message, poll }}>
-    {PollResultsContentOverride ? (
-      <PollResultsContentOverride />
-    ) : (
-      <PollResultsContent additionalScrollViewProps={additionalScrollViewProps} />
-    )}
-  </PollContextProvider>
-);
+export const PollResults = ({ additionalScrollViewProps, message, poll }: PollResultsProps) => {
+  const { PollResultsContent: PollResultsContentComponent } = useComponentsContext();
+  return (
+    <PollContextProvider value={{ message, poll }}>
+      <PollResultsContentComponent additionalScrollViewProps={additionalScrollViewProps} />
+    </PollContextProvider>
+  );
+};
 
 const useStyles = () => {
   const {

package/src/components/Reply/Reply.tsx

@@ -1,5 +1,14 @@
 import React, { useMemo } from 'react';
-import { I18nManager, Image, StyleSheet, Text, TextStyle, View, ViewStyle } from 'react-native';
+import {
+  I18nManager,
+  Image,
+  ImageProps,
+  StyleSheet,
+  Text,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
 
 import {
   isFileAttachment,
@@ -10,7 +19,8 @@ import {
 
 import { ReplyMessageView } from './ReplyMessageView';
 
-import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   MessageContextValue,
   useMessageContext,
@@ -79,8 +89,10 @@ const RightContent = React.memo(
   },
 );
 
-export type ReplyPropsWithContext = Pick<ChatContextValue, 'ImageComponent'> &
-  Pick<MessageContextValue, 'message'> &
+export type ReplyPropsWithContext = { ImageComponent: React.ComponentType<ImageProps> } & Pick<
+  MessageContextValue,
+  'message'
+> &
   Pick<MessagesContextValue, 'quotedMessage'> & {
     isMyMessage: boolean;
     onDismiss?: () => void;
@@ -216,7 +228,8 @@ export type ReplyProps = Partial<ReplyPropsWithContext> &
 
 export const Reply = (props: ReplyProps) => {
   const { message: messageFromContext } = useMessageContext();
-  const { client, ImageComponent } = useChatContext();
+  const { client } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
 
   const messageComposer = useMessageComposer();
   const { quotedMessage: quotedMessageFromComposer } = useStateStore(

package/src/components/Thread/Thread.tsx

@@ -4,16 +4,10 @@ import { ThreadFooterComponent } from './components/ThreadFooterComponent';
 
 import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
-import {
-  MessageComposer as DefaultMessageComposer,
-  MessageComposerProps,
-} from '../MessageInput/MessageComposer';
+import type { MessageComposerProps } from '../MessageInput/MessageComposer';
 import { MessageFlashList, MessageFlashListProps } from '../MessageList/MessageFlashList';
 import { MessageListProps } from '../MessageList/MessageList';
 
@@ -26,7 +20,6 @@ try {
 }
 
 type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
-  Pick<MessagesContextValue, 'MessageList'> &
   Pick<
     ThreadContextValue,
     | 'closeThread'
@@ -59,11 +52,6 @@ type ThreadPropsWithContext = Pick<ChatContextValue, 'client'> &
     closeThreadOnDismount?: boolean;
     /** Disables the thread UI. So MessageComposer and MessageList will be disabled. */
     disabled?: boolean;
-    /**
-     * **Customized MessageComposer component to used within Thread instead of default MessageComposer
-     * **Available from [MessageComposer](https://getstream.io/chat/docs/sdk/reactnative/ui-components/message-input)**
-     */
-    MessageComposer?: React.ComponentType<MessageComposerProps>;
     /**
      * Call custom function on closing thread if handling thread state elsewhere
      */
@@ -81,14 +69,13 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     closeThreadOnDismount = true,
     disabled,
     loadMoreThread,
-    MessageComposer = DefaultMessageComposer,
-    MessageList,
     onThreadDismount,
     parentMessagePreventPress = true,
     thread,
     threadInstance,
     shouldUseFlashList = false,
   } = props;
+  const { MessageList, ThreadMessageComposer: MessageComposer } = useComponentsContext();
 
   useEffect(() => {
     if (threadInstance?.activate) {
@@ -171,7 +158,6 @@ export type ThreadProps = Partial<ThreadPropsWithContext>;
 export const Thread = (props: ThreadProps) => {
   const { client } = useChatContext();
   const { threadList } = useChannelContext();
-  const { MessageList } = useMessagesContext();
   const { closeThread, loadMoreThread, reloadThread, thread, threadInstance } = useThreadContext();
 
   if (thread?.id && !threadList) {
@@ -186,7 +172,6 @@ export const Thread = (props: ThreadProps) => {
         client,
         closeThread,
         loadMoreThread,
-        MessageList,
         reloadThread,
         thread,
         threadInstance,

package/src/components/Thread/components/ThreadFooterComponent.tsx

@@ -3,10 +3,7 @@ import { ActivityIndicator, StyleSheet, Text, View } from 'react-native';
 
 import type { ThreadState } from 'stream-chat';
 
-import {
-  MessagesContextValue,
-  useMessagesContext,
-} from '../../../contexts/messagesContext/MessagesContext';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import {
   ThreadContextValue,
@@ -16,8 +13,10 @@ import { useTranslationContext } from '../../../contexts/translationContext/Tran
 import { useStateStore } from '../../../hooks';
 import { primitives } from '../../../theme';
 
-type ThreadFooterComponentPropsWithContext = Pick<MessagesContextValue, 'Message'> &
-  Pick<ThreadContextValue, 'parentMessagePreventPress' | 'thread' | 'threadInstance'>;
+type ThreadFooterComponentPropsWithContext = Pick<
+  ThreadContextValue,
+  'parentMessagePreventPress' | 'thread' | 'threadInstance'
+>;
 
 export const InlineLoadingMoreThreadIndicator = () => {
   const { threadLoadingMore } = useThreadContext();
@@ -43,7 +42,8 @@ const selector = (nextValue: ThreadState) =>
   }) as const;
 
 const ThreadFooterComponentWithContext = (props: ThreadFooterComponentPropsWithContext) => {
-  const { Message, parentMessagePreventPress, thread, threadInstance } = props;
+  const { parentMessagePreventPress, thread, threadInstance } = props;
+  const { Message } = useComponentsContext();
   const { t } = useTranslationContext();
 
   const styles = useStyles();
@@ -131,18 +131,17 @@ const MemoizedThreadFooter = React.memo(
   areEqual,
 ) as typeof ThreadFooterComponentWithContext;
 
-export type ThreadFooterComponentProps = Partial<Pick<MessagesContextValue, 'Message'>> &
-  Partial<Pick<ThreadContextValue, 'parentMessagePreventPress' | 'thread'>>;
+export type ThreadFooterComponentProps = Partial<
+  Pick<ThreadContextValue, 'parentMessagePreventPress' | 'thread'>
+>;
 
 export const ThreadFooterComponent = (props: ThreadFooterComponentProps) => {
-  const { Message } = useMessagesContext();
   const { parentMessagePreventPress, thread, threadInstance, threadLoadingMore } =
     useThreadContext();
 
   return (
     <MemoizedThreadFooter
       {...{
-        Message,
         parentMessagePreventPress,
         thread,
         threadInstance,

package/src/components/ThreadList/ThreadList.tsx

@@ -5,9 +5,9 @@ import { Thread, ThreadManagerState } from 'stream-chat';
 
 import { ThreadListItem } from './ThreadListItem';
 import { ThreadListItemSkeleton } from './ThreadListItemSkeleton';
-import { ThreadListUnreadBanner as DefaultThreadListBanner } from './ThreadListUnreadBanner';
 
 import { useChatContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   ThreadsContextValue,
   ThreadsProvider,
@@ -27,14 +27,8 @@ const selector = (nextValue: ThreadManagerState) =>
 
 export type ThreadListProps = Pick<
   ThreadsContextValue,
-  | 'additionalFlatListProps'
-  | 'isFocused'
-  | 'onThreadSelect'
-  | 'ThreadListItem'
-  | 'ThreadListEmptyPlaceholder'
-  | 'ThreadListLoadingIndicator'
-  | 'ThreadListUnreadBanner'
-> & { ThreadList?: React.ComponentType };
+  'additionalFlatListProps' | 'isFocused' | 'onThreadSelect'
+>;
 
 export const DefaultThreadListEmptyPlaceholder = () => <EmptyStateIndicator listType='threads' />;
 
@@ -49,18 +43,15 @@ export const DefaultThreadListLoadingNextIndicator = () => <LoadingIndicator lis
 
 const renderItem = (props: { item: Thread }) => <ThreadListItem thread={props.item} />;
 
-const ThreadListComponent = () => {
+export const DefaultThreadListComponent = () => {
+  const { additionalFlatListProps, isLoading, isLoadingNext, loadMore, threads } =
+    useThreadsContext();
   const {
-    additionalFlatListProps,
-    isLoading,
-    isLoadingNext,
-    loadMore,
-    ThreadListEmptyPlaceholder = DefaultThreadListEmptyPlaceholder,
-    ThreadListLoadingIndicator = DefaultThreadListLoadingIndicator,
-    ThreadListLoadingMoreIndicator = DefaultThreadListLoadingNextIndicator,
-    ThreadListUnreadBanner = DefaultThreadListBanner,
-    threads,
-  } = useThreadsContext();
+    ThreadListEmptyPlaceholder,
+    ThreadListLoadingIndicator,
+    ThreadListLoadingMoreIndicator,
+    ThreadListUnreadBanner,
+  } = useComponentsContext();
 
   if (isLoading) {
     return <ThreadListLoadingIndicator />;
@@ -85,7 +76,8 @@ const ThreadListComponent = () => {
 };
 
 export const ThreadList = (props: ThreadListProps) => {
-  const { isFocused = true, ThreadList = ThreadListComponent } = props;
+  const { isFocused = true } = props;
+  const { ThreadListComponent: ThreadListContent } = useComponentsContext();
   const { client } = useChatContext();
 
   useEffect(() => {
@@ -120,7 +112,7 @@ export const ThreadList = (props: ThreadListProps) => {
     <ThreadsProvider
       value={{ isLoading, isLoadingNext, loadMore: client.threads.loadNextPage, threads, ...props }}
     >
-      <ThreadList />
+      <ThreadListContent />
     </ThreadsProvider>
   );
 };

package/src/components/ThreadList/ThreadListItem.tsx

@@ -10,11 +10,8 @@ import {
   ThreadState,
 } from 'stream-chat';
 
-import { ThreadListItemMessagePreview as ThreadListItemMessagePreviewDefault } from './ThreadListItemMessagePreview';
-
-import { ThreadMessagePreviewDeliveryStatus as ThreadMessagePreviewDeliveryStatusDefault } from './ThreadMessagePreviewDeliveryStatus';
-
 import { useChatContext, useTheme, useTranslationContext } from '../../contexts';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import {
   ThreadListItemProvider,
   useThreadListItemContext,
@@ -62,11 +59,9 @@ export const ThreadListItemComponent = () => {
   } = useThreadListItemContext();
   const online = useChannelPreviewDisplayPresence(channel);
   const displayName = useChannelPreviewDisplayName(channel);
-  const {
-    onThreadSelect,
-    ThreadListItemMessagePreview = ThreadListItemMessagePreviewDefault,
-    ThreadMessagePreviewDeliveryStatus = ThreadMessagePreviewDeliveryStatusDefault,
-  } = useThreadsContext();
+  const { onThreadSelect } = useThreadsContext();
+  const { ThreadListItemMessagePreview, ThreadMessagePreviewDeliveryStatus } =
+    useComponentsContext();
   const {
     theme: { semantics },
   } = useTheme();
@@ -143,7 +138,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
   const { client } = useChatContext();
   const { t, tDateTimeParser } = useTranslationContext();
   const { thread, timestampTranslationKey = 'timestamp/ThreadListItem' } = props;
-  const { ThreadListItem = ThreadListItemComponent } = useThreadsContext();
+  const { ThreadListItem: ThreadListItemOverride } = useComponentsContext();
   const { text: draftText } = useStateStore(
     thread.messageComposer.textComposer.state,
     textComposerStateSelector,
@@ -229,7 +224,7 @@ export const ThreadListItem = (props: ThreadListItemProps) => {
         thread,
       }}
     >
-      <ThreadListItem />
+      <ThreadListItemOverride />
     </ThreadListItemProvider>
   );
 };

package/src/components/ui/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import { ColorValue, StyleProp, StyleSheet, View, ViewStyle } from 'react-native
 
 import { avatarSizes } from './constants';
 
-import { useChatContext } from '../../../contexts';
+import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { primitives } from '../../../theme';
 
@@ -21,7 +21,7 @@ export const Avatar = (props: AvatarProps) => {
   const {
     theme: { semantics },
   } = useTheme();
-  const { ImageComponent } = useChatContext();
+  const { ImageComponent } = useComponentsContext();
   const defaultAvatarBg = semantics.avatarPaletteBg1;
   const {
     backgroundColor = defaultAvatarBg,