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

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/__tests__/__snapshots__/Thread.test.js.snap

@@ -589,6 +589,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                 "color": "#1a1b25",
                                                 "fontSize": 17,
                                                 "lineHeight": 20,
+                                                "writingDirection": "ltr",
                                               }
                                             }
                                           >
@@ -922,6 +923,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                 "color": "#1a1b25",
                                                 "fontSize": 17,
                                                 "lineHeight": 20,
+                                                "writingDirection": "ltr",
                                               }
                                             }
                                           >
@@ -1288,6 +1290,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                                 "color": "#1a1b25",
                                                 "fontSize": 17,
                                                 "lineHeight": 20,
+                                                "writingDirection": "ltr",
                                               }
                                             }
                                           >
@@ -1612,6 +1615,7 @@ exports[`Thread should match thread snapshot 1`] = `
                                               "color": "#1a1b25",
                                               "fontSize": 17,
                                               "lineHeight": 20,
+                                              "writingDirection": "ltr",
                                             }
                                           }
                                         >
@@ -2266,28 +2270,37 @@ exports[`Thread should match thread snapshot 1`] = `
                                 }
                                 strokeWidth={1.5}
                               >
-                                <RNSVGPath
-                                  d="M11.2498 10H6.24982M6.24982 10L3.7881 2.71328C3.74537 2.59349 3.7402 2.4635 3.7733 2.34069C3.80639 2.21788 3.87616 2.10808 3.9733 2.02597C4.07044 1.94386 4.19032 1.89335 4.31693 1.88117C4.44353 1.86899 4.57084 1.89573 4.68185 1.95781L17.8069 9.4461C17.9045 9.50015 17.986 9.57937 18.0427 9.67555C18.0994 9.77172 18.1293 9.88133 18.1293 9.99297C18.1293 10.1046 18.0994 10.2142 18.0427 10.3104C17.986 10.4066 17.9045 10.4858 17.8069 10.5398L4.68185 18.0469C4.57051 18.1096 4.4426 18.1367 4.31537 18.1245C4.18815 18.1123 4.06772 18.0614 3.97032 17.9787C3.87292 17.8959 3.80323 17.7853 3.77065 17.6617C3.73807 17.5381 3.74416 17.4075 3.7881 17.2875L6.24982 10Z"
-                                  fill={null}
-                                  propList={
-                                    [
-                                      "fill",
-                                      "stroke",
-                                      "strokeWidth",
-                                      "strokeLinecap",
-                                      "strokeLinejoin",
-                                    ]
-                                  }
-                                  stroke={
+                                <RNSVGGroup
+                                  fill={
                                     {
-                                      "payload": 4288916666,
+                                      "payload": 4278190080,
                                       "type": 0,
                                     }
                                   }
-                                  strokeLinecap={1}
-                                  strokeLinejoin={1}
-                                  strokeWidth={1.5}
-                                />
+                                >
+                                  <RNSVGPath
+                                    d="M11.2498 10H6.24982M6.24982 10L3.7881 2.71328C3.74537 2.59349 3.7402 2.4635 3.7733 2.34069C3.80639 2.21788 3.87616 2.10808 3.9733 2.02597C4.07044 1.94386 4.19032 1.89335 4.31693 1.88117C4.44353 1.86899 4.57084 1.89573 4.68185 1.95781L17.8069 9.4461C17.9045 9.50015 17.986 9.57937 18.0427 9.67555C18.0994 9.77172 18.1293 9.88133 18.1293 9.99297C18.1293 10.1046 18.0994 10.2142 18.0427 10.3104C17.986 10.4066 17.9045 10.4858 17.8069 10.5398L4.68185 18.0469C4.57051 18.1096 4.4426 18.1367 4.31537 18.1245C4.18815 18.1123 4.06772 18.0614 3.97032 17.9787C3.87292 17.8959 3.80323 17.7853 3.77065 17.6617C3.73807 17.5381 3.74416 17.4075 3.7881 17.2875L6.24982 10Z"
+                                    fill={null}
+                                    propList={
+                                      [
+                                        "fill",
+                                        "stroke",
+                                        "strokeWidth",
+                                        "strokeLinecap",
+                                        "strokeLinejoin",
+                                      ]
+                                    }
+                                    stroke={
+                                      {
+                                        "payload": 4288916666,
+                                        "type": 0,
+                                      }
+                                    }
+                                    strokeLinecap={1}
+                                    strokeLinejoin={1}
+                                    strokeWidth={1.5}
+                                  />
+                                </RNSVGGroup>
                               </RNSVGGroup>
                             </RNSVGSvgView>
                           </View>

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,33 +46,10 @@ 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
    */
@@ -121,12 +71,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 +103,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[];
   /**