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

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,

package/src/contexts/attachmentPickerContext/AttachmentPickerContext.tsx

@@ -2,7 +2,6 @@ import React, { PropsWithChildren, useContext, useMemo, useState } from 'react';
 
 import BottomSheet from '@gorhom/bottom-sheet';
 
-import { AttachmentPickerContentProps } from '../../components';
 import {
   AttachmentPickerStore,
   SelectedPickerType,
@@ -21,10 +20,6 @@ export type AttachmentPickerContextValue = Pick<
   MessageInputContextValue,
   'attachmentSelectionBarHeight' | 'attachmentPickerBottomSheetHeight'
 > & {
-  /**
-   * Custom UI Component to render select more photos for selected gallery access in iOS.
-   */
-  AttachmentPickerIOSSelectMorePhotos: React.ComponentType;
   /**
    * `bottomInset` determine the height of the `AttachmentPicker` and the underlying shift to the `MessageList` when it is opened.
    * This can also be set via the `setBottomInset` function provided by the `useAttachmentPickerContext` hook.
@@ -39,16 +34,6 @@ export type AttachmentPickerContextValue = Pick<
   topInset: number;
 
   disableAttachmentPicker?: boolean;
-  /**
-   * Custom UI component to render overlay component, that shows up on top of [selected
-   * image](https://github.com/GetStream/stream-chat-react-native/blob/main/screenshots/docs/1.png) (with tick mark)
-   *
-   * **Default**
-   * [ImageOverlaySelectedComponent](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/AttachmentPicker/components/ImageOverlaySelectedComponent.tsx)
-   */
-  ImageOverlaySelectedComponent: React.ComponentType<{ index: number }>;
-  AttachmentPickerSelectionBar: React.ComponentType;
-  AttachmentPickerContent: React.ComponentType<AttachmentPickerContentProps>;
   attachmentPickerStore: AttachmentPickerStore;
   numberOfAttachmentPickerImageColumns?: number;
   numberOfAttachmentImagesToLoadPerCall?: number;

package/src/contexts/channelContext/ChannelContext.tsx

@@ -3,9 +3,6 @@ import React, { PropsWithChildren, useContext } from 'react';
 import type { Channel, ChannelState } from 'stream-chat';
 
 import { MarkReadFunctionOptions } from '../../components/Channel/Channel';
-import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
-import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-import { StickyHeaderProps } from '../../components/MessageList/StickyHeader';
 import {
   ChannelUnreadStateStore,
   ChannelUnreadStateStoreType,
@@ -38,12 +35,6 @@ export type ChannelContextValue = {
    * @overrideType Channel
    */
   channel: Channel;
-  /**
-   * Custom UI component to display empty state when channel has no messages.
-   *
-   * **Default** [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Indicators/EmptyStateIndicator.tsx)
-   */
-  EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
   /**
    * When set to true, reactions will be limited to 1 per user. If user selects another reaction
    * then his previous reaction will be removed and replaced with new one.
@@ -90,10 +81,6 @@ export type ChannelContextValue = {
     setTargetedMessage?: (messageId: string) => void;
   }) => Promise<void>;
 
-  /**
-   * Custom loading indicator to override the Stream default
-   */
-  LoadingIndicator: React.ComponentType<LoadingProps>;
   markRead: (options?: MarkReadFunctionOptions) => void;
   /**
    *
@@ -119,10 +106,6 @@ export type ChannelContextValue = {
    * ```
    */
   members: ChannelState['members'];
-  /**
-   * Custom network down indicator to override the Stream default
-   */
-  NetworkDownIndicator: React.ComponentType;
   read: ChannelState['read'];
   reloadChannel: () => Promise<void>;
   scrollToFirstUnreadThreshold: number;
@@ -156,13 +139,6 @@ export type ChannelContextValue = {
    * currently near them within the viewport.
    */
   maximumMessageLimit?: number;
-  /**
-   * Custom UI component for sticky header of channel.
-   *
-   * **Default** [DateHeader](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/MessageList/DateHeader.tsx)
-   */
-  StickyHeader?: React.ComponentType<StickyHeaderProps>;
-
   /**
    * Id of message, around which Channel/MessageList gets loaded when opened.
    * You will see a highlighted background for targetted message, when opened.

package/src/contexts/channelsContext/ChannelsContext.tsx

@@ -5,23 +5,8 @@ import type { FlatList } from 'react-native-gesture-handler';
 
 import type { Channel } from 'stream-chat';
 
-import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListHeaderErrorIndicator';
 import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
-import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
-import { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview';
-import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
-import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
-import type { ChannelPreviewStatusProps } from '../../components/ChannelPreview/ChannelPreviewStatus';
-import type { ChannelPreviewTitleProps } from '../../components/ChannelPreview/ChannelPreviewTitle';
-import { ChannelPreviewTypingIndicatorProps } from '../../components/ChannelPreview/ChannelPreviewTypingIndicator';
-import type { ChannelPreviewUnreadCountProps } from '../../components/ChannelPreview/ChannelPreviewUnreadCount';
-import type { ChannelPreviewViewProps } from '../../components/ChannelPreview/ChannelPreviewView';
-import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
-import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
-import type { LoadingProps } from '../../components/Indicators/LoadingIndicator';
-
-import { ChannelAvatarProps } from '../../components/ui/Avatar/ChannelAvatar';
 import { DEFAULT_BASE_CONTEXT_VALUE } from '../utils/defaultBaseContextValue';
 
 import { isTestEnvironment } from '../utils/isTestEnvironment';
@@ -53,18 +38,6 @@ export type ChannelsContextValue = {
    * Channels can be either an array of channels or a promise which resolves to an array of channels
    */
   channels: Channel[] | null;
-  /**
-   * Custom indicator to use when channel list is empty
-   *
-   * Default: [EmptyStateIndicator](https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#emptystateindicator)
-   * */
-  EmptyStateIndicator: React.ComponentType<EmptyStateProps>;
-  /**
-   * Custom loading indicator to display at bottom of the list, while loading further pages
-   *
-   * Default: [ChannelListFooterLoadingIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#footerloadingindicator)
-   */
-  FooterLoadingIndicator: React.ComponentType;
   /**
    * Incremental number change to force update the FlatList
    */
@@ -73,35 +46,13 @@ export type ChannelsContextValue = {
    * Whether or not the FlatList has another page to render
    */
   hasNextPage: boolean;
-  /**
-   * Custom indicator to display error at top of list, if loading/pagination error occurs
-   *
-   * Default: [ChannelListHeaderErrorIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#headererrorindicator)
-   */
-  HeaderErrorIndicator: React.ComponentType<HeaderErrorProps>;
-  /**
-   * Custom indicator to display network-down error at top of list, if there is connectivity issue
-   *
-   * Default: [ChannelListHeaderNetworkDownIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#headernetworkdownindicator)
-   */
-  HeaderNetworkDownIndicator: React.ComponentType;
   /**
    * Initial channels query loading state, triggers the LoadingIndicator
    */
   loadingChannels: boolean;
   /**
-   * Custom indicator to use when there is error in fetching channels
-   *
-   * Default: [LoadingErrorIndicator](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#loadingerrorindicator)
-   * */
-  LoadingErrorIndicator: React.ComponentType<LoadingErrorProps>;
-  /**
-   * Custom loading indicator to use on Channel List
-   *
-   * */
-  LoadingIndicator: React.ComponentType<Pick<LoadingProps, 'listType'>>;
-  /**
-   * Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator
+   * Whether or not additional channels are being loaded, triggers the
+   * ChannelListFooterLoadingIndicator
    */
   loadingNextPage: boolean;
   /**
@@ -121,12 +72,6 @@ export type ChannelsContextValue = {
    * Number of skeletons that should show when loading. Default: 6
    */
   numberOfSkeletons: number;
-  /**
-   * Custom UI component to display individual channel list items
-   *
-   * Default: [ChannelPreviewView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-preview-view/)
-   */
-  Preview: React.ComponentType<ChannelPreviewViewProps>;
   /**
    * Triggered when the channel list is refreshing, displays a loading spinner at the top of the list
    */
@@ -159,73 +104,16 @@ export type ChannelsContextValue = {
    * ```
    */
   setFlatListRef: (ref: FlatList<Channel> | null) => void;
-  /**
-   * Custom UI component to display loading channel skeletons
-   *
-   * Default: [Skeleton](https://getstream.io/chat/docs/sdk/reactnative/contexts/channels-context/#skeleton)
-   */
-  Skeleton: React.ComponentType;
   /**
    * Error in channels query, if any
    */
   error?: Error;
-  ListHeaderComponent?: React.ComponentType;
   /**
    * Function to set the currently active channel, acts as a bridge between ChannelList and Channel components
    *
    * @param channel A channel object
    */
   onSelect?: (channel: Channel) => void;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx)
-   */
-  PreviewAvatar?: React.ComponentType<ChannelAvatarProps>;
-  /**
-   * Custom UI component to render preview of latest message on channel.
-   *
-   * **Default** [ChannelPreviewMessage](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx)
-   */
-  PreviewMessage?: React.ComponentType<ChannelPreviewMessageProps>;
-  /**
-   * Custom UI component to render delivery status of latest message on channel.
-   *
-   * **Default** [ChannelMessagePreviewDeliveryStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx)
-   */
-  PreviewMessageDeliveryStatus?: React.ComponentType<ChannelMessagePreviewDeliveryStatusProps>;
-  /**
-   * Custom UI component to render muted status.
-   *
-   * **Default** [ChannelMutedStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewMutedStatus.tsx)
-   */
-  PreviewMutedStatus?: React.ComponentType;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewStatus](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewStatus.tsx)
-   */
-  PreviewStatus?: React.ComponentType<ChannelPreviewStatusProps>;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewTitle](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewTitle.tsx)
-   */
-  PreviewTitle?: React.ComponentType<ChannelPreviewTitleProps>;
-  /**
-   * Custom UI component to render preview avatar.
-   *
-   * **Default** [ChannelPreviewUnreadCount](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelPreviewUnreadCount.tsx)
-   */
-  PreviewUnreadCount?: React.ComponentType<ChannelPreviewUnreadCountProps>;
-  PreviewTypingIndicator?: React.ComponentType<ChannelPreviewTypingIndicatorProps>;
-  ChannelDetailsBottomSheet?: React.ComponentType<ChannelDetailsBottomSheetProps>;
-  /**
-   * Custom UI component to render preview of last message on channel.
-   *
-   * **Default** [ChannelLastMessagePreview](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx)
-   */
-  PreviewLastMessage?: React.ComponentType<ChannelLastMessagePreviewProps>;
   getChannelActionItems?: GetChannelActionItems;
   swipeActionsEnabled?: boolean;
 

package/src/contexts/chatContext/ChatContext.tsx

@@ -1,5 +1,4 @@
 import React, { PropsWithChildren, useContext } from 'react';
-import type { ImageProps } from 'react-native';
 
 import type { AppSettingsAPIResponse, Channel, Mute, StreamChat } from 'stream-chat';
 
@@ -32,10 +31,6 @@ export type ChatContextValue = {
   client: StreamChat;
   connectionRecovering: boolean;
   enableOfflineSupport: boolean;
-  /**
-   * Drop in replacement of all the underlying Image components within SDK. This is useful for the purpose of offline caching of images. Please check the Offline Support Guide for usage.
-   */
-  ImageComponent: React.ComponentType<ImageProps>;
   isOnline: boolean | null;
   mutedUsers: Mute[];
   /**

package/src/contexts/componentsContext/ComponentsContext.tsx

@@ -0,0 +1,62 @@
+import React, { PropsWithChildren, useContext, useMemo } from 'react';
+
+/**
+ * All overridable UI components in the SDK.
+ * Derived from the DEFAULT_COMPONENTS map in defaultComponents.ts.
+ * Adding a new default automatically makes it available as an override.
+ *
+ * Every key is optional — only specify the components you want to override.
+ */
+export type ComponentOverrides = Partial<
+  (typeof import('./defaultComponents'))['DEFAULT_COMPONENTS']
+>;
+
+const ComponentsContext = React.createContext<ComponentOverrides>({});
+
+/**
+ * Provider to override UI components at any level of the tree.
+ * Supports nesting — inner overrides merge over outer ones (closest wins).
+ *
+ * @example
+ * ```tsx
+ * <WithComponents overrides={{ Message: MyCustomMessage, SendButton: MyCustomSendButton }}>
+ *   <Channel channel={channel}>
+ *     <MessageList />
+ *     <MessageInput />
+ *   </Channel>
+ * </WithComponents>
+ * ```
+ */
+export const WithComponents = ({
+  children,
+  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 }), []);
+  return <ComponentsContext.Provider value={merged}>{children}</ComponentsContext.Provider>;
+};
+
+// Lazy-loaded to break circular dependency:
+// defaultComponents.ts → imports components → components import useComponentsContext from this file
+let cachedDefaults: ComponentOverrides | undefined;
+const getDefaults = (): ComponentOverrides => {
+  if (!cachedDefaults) {
+    cachedDefaults = (require('./defaultComponents') as { DEFAULT_COMPONENTS: ComponentOverrides })
+      .DEFAULT_COMPONENTS;
+  }
+  return cachedDefaults;
+};
+
+/**
+ * Hook to access resolved component overrides.
+ * Returns all components with defaults filled in — user overrides merged over defaults.
+ */
+export const useComponentsContext = () => {
+  const overrides = useContext(ComponentsContext);
+  return useMemo(
+    () => ({ ...getDefaults(), ...overrides }) as Required<ComponentOverrides>,
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- intentionally stable: overrides are set once at mount
+    [],
+  );
+};