fix: export relevant hooks from channel preview and channellist and improve customization

khushal87 · khushal87 · commit d6f0ba8603d9 · 2026-03-11T14:10:18.000+05:30
diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx
@@ -52,6 +52,8 @@ export type ChannelListProps = Partial<
     | 'PreviewStatus'
     | 'PreviewTitle'
     | 'PreviewUnreadCount'
+    | 'PreviewTypingIndicator'
+    | 'PreviewMessageDeliveryStatus'
     | 'ChannelDetailsBottomSheet'
     | 'getChannelActionItems'
     | 'swipeActionsEnabled'
@@ -287,6 +289,8 @@ export const ChannelList = (props: ChannelListProps) => {
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
+    PreviewTypingIndicator,
+    PreviewMessageDeliveryStatus,
     ChannelDetailsBottomSheet,
     setFlatListRef,
     Skeleton = SkeletonDefault,
@@ -417,6 +421,8 @@ export const ChannelList = (props: ChannelListProps) => {
     PreviewStatus,
     PreviewTitle,
     PreviewUnreadCount,
+    PreviewTypingIndicator,
+    PreviewMessageDeliveryStatus,
     ChannelDetailsBottomSheet,
     swipeActionsEnabled,
     refreshing,
diff --git a/package/src/components/ChannelList/hooks/index.ts b/package/src/components/ChannelList/hooks/index.ts
@@ -0,0 +1,11 @@
+export * from './listeners/useChannelUpdated';
+export * from './useChannelActionItems';
+export * from './useChannelActionItemsById';
+export * from './useChannelActions';
+export * from './useChannelMembershipState';
+export * from './useChannelMembersState';
+export * from './useChannelMuteActive';
+export * from './useChannelOnlineMemberCount';
+export * from './useIsDirectChat';
+export * from './useMutedChannels';
+export * from './useMutedUsers';
diff --git a/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts b/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts
@@ -30,6 +30,8 @@ export const useCreateChannelsContext = ({
   PreviewMutedStatus,
   PreviewStatus,
   PreviewTitle,
+  PreviewTypingIndicator,
+  PreviewMessageDeliveryStatus,
   PreviewUnreadCount,
   ChannelDetailsBottomSheet,
   swipeActionsEnabled,
@@ -80,6 +82,8 @@ export const useCreateChannelsContext = ({
       PreviewStatus,
       PreviewTitle,
       PreviewUnreadCount,
+      PreviewTypingIndicator,
+      PreviewMessageDeliveryStatus,
       ChannelDetailsBottomSheet,
       swipeActionsEnabled,
       refreshing,
diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx
@@ -5,14 +5,15 @@ import { ChannelMessagePreview } from './ChannelMessagePreview';
 import { ChannelMessagePreviewDeliveryStatus } from './ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewProps } from './ChannelPreview';
 
-import { ChannelTypingIndicatorPreview } from './ChannelTypingIndicatorPreview';
+import { ChannelPreviewTypingIndicator } from './ChannelPreviewTypingIndicator';
 import { LastMessageType } from './hooks/useChannelPreviewData';
 
 import { useChannelPreviewDraftMessage } from './hooks/useChannelPreviewDraftMessage';
 import { useChannelPreviewPollLabel } from './hooks/useChannelPreviewPollLabel';
 
 import { useChannelTypingState } from './hooks/useChannelTypingState';
 
+import { ChannelsContextValue } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -22,12 +23,18 @@ import { primitives } from '../../theme';
 import { MessageStatusTypes } from '../../utils/utils';
 import { ErrorBadge } from '../ui';
 
-export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> & {
-  lastMessage?: LastMessageType;
-};
+export type ChannelPreviewMessageProps = Pick<ChannelPreviewProps, 'channel'> &
+  Pick<ChannelsContextValue, 'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus'> & {
+    lastMessage?: LastMessageType;
+  };
 
 export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
-  const { channel, lastMessage } = props;
+  const {
+    channel,
+    lastMessage,
+    PreviewTypingIndicator = ChannelPreviewTypingIndicator,
+    PreviewMessageDeliveryStatus = ChannelMessagePreviewDeliveryStatus,
+  } = props;
   const {
     theme: { semantics },
   } = useTheme();
@@ -52,7 +59,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
     lastMessage?.status === MessageStatusTypes.FAILED || lastMessage?.type === 'error';
 
   if (usersTyping.length > 0) {
-    return <ChannelTypingIndicatorPreview channel={channel} usersTyping={usersTyping} />;
+    return <PreviewTypingIndicator channel={channel} usersTyping={usersTyping} />;
   }
 
   if (draftMessage) {
@@ -94,14 +101,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => {
   if (channel.data?.name || membersWithoutSelf.length > 1) {
     return (
       <View style={styles.container}>
-        <ChannelMessagePreviewDeliveryStatus channel={channel} message={lastMessage} />
+        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
         <ChannelMessagePreview message={lastMessage} />
       </View>
     );
   } else {
     return (
       <View style={styles.container}>
-        <ChannelMessagePreviewDeliveryStatus channel={channel} message={lastMessage} />
+        <PreviewMessageDeliveryStatus channel={channel} message={lastMessage} />
         <ChannelMessagePreview message={lastMessage} />
       </View>
     );
diff --git a/package/src/components/ChannelPreview/ChannelPreviewTypingIndicator.tsx b/package/src/components/ChannelPreview/ChannelPreviewTypingIndicator.tsx
@@ -56,14 +56,14 @@ const getTypingString = ({
   }
 };
 
-export type ChannelTypingIndicatorPreviewProps = Pick<ChannelPreviewProps, 'channel'> & {
+export type ChannelPreviewTypingIndicatorProps = Pick<ChannelPreviewProps, 'channel'> & {
   usersTyping: UserResponse[];
 };
 
-export const ChannelTypingIndicatorPreview = ({
+export const ChannelPreviewTypingIndicator = ({
   usersTyping,
   channel,
-}: ChannelTypingIndicatorPreviewProps) => {
+}: ChannelPreviewTypingIndicatorProps) => {
   const styles = useStyles();
   const { t } = useTranslationContext();
 
diff --git a/package/src/components/ChannelPreview/hooks/index.ts b/package/src/components/ChannelPreview/hooks/index.ts
@@ -0,0 +1,7 @@
+export * from './useChannelPreviewData';
+export * from './useChannelPreviewDraftMessage';
+export * from './useChannelPreviewPollLabel';
+export * from './useChannelPreviewDisplayName';
+export * from './useChannelPreviewDisplayPresence';
+export * from './useIsChannelMuted';
+export * from './useChannelTypingState';
diff --git a/package/src/components/ChannelPreview/index.ts b/package/src/components/ChannelPreview/index.ts
diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx
@@ -3,10 +3,10 @@ import { Image, Platform } from 'react-native';
 
 import { Channel, OfflineDBState } from 'stream-chat';
 
+import { useClientMutedUsers } from './hooks';
 import { useAppSettings } from './hooks/useAppSettings';
 import { useCreateChatContext } from './hooks/useCreateChatContext';
 import { useIsOnline } from './hooks/useIsOnline';
-import { useMutedUsers } from './hooks/useMutedUsers';
 
 import { ChannelsStateProvider } from '../../contexts/channelsStateContext/ChannelsStateContext';
 import { ChatContextValue, ChatProvider } from '../../contexts/chatContext/ChatContext';
@@ -172,7 +172,7 @@ const ChatWithContext = (props: PropsWithChildren<ChatProps>) => {
    * Setup muted user listener
    * TODO: reimplement
    */
-  const mutedUsers = useMutedUsers(client);
+  const mutedUsers = useClientMutedUsers(client);
 
   const debugRef = useDebugContext();
   const isDebugModeEnabled = __DEV__ && debugRef && debugRef.current;
diff --git a/package/src/components/Chat/hooks/index.ts b/package/src/components/Chat/hooks/index.ts
@@ -0,0 +1,5 @@
+export * from './useCreateChatClient';
+export * from './useIsOnline';
+export * from './useSyncDatabase';
+export * from './useAppSettings';
+export * from './useClientMutedUsers';
diff --git a/package/src/components/Chat/hooks/useClientMutedUsers.ts b/package/src/components/Chat/hooks/useClientMutedUsers.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 
 import type { Event, Mute, StreamChat } from 'stream-chat';
 
-export const useMutedUsers = (client: StreamChat) => {
+export const useClientMutedUsers = (client: StreamChat) => {
   const [mutedUsers, setMutedUsers] = useState<Mute[]>(client?.mutedUsers || []);
 
   useEffect(() => {
diff --git a/package/src/components/index.ts b/package/src/components/index.ts
@@ -33,37 +33,33 @@ export * from './Channel/hooks/useCreateThreadContext';
 export * from './Channel/hooks/useCreateTypingContext';
 export * from './Channel/hooks/useTargetedMessage';
 
+/** Channel List exports*/
 export * from './ChannelList/ChannelList';
 export * from './ChannelList/ChannelListFooterLoadingIndicator';
 export * from './ChannelList/ChannelListHeaderErrorIndicator';
 export * from './ChannelList/ChannelListHeaderNetworkDownIndicator';
 export * from './ChannelList/ChannelListLoadingIndicator';
 export * from './ChannelList/ChannelListMessenger';
-export * from './ChannelList/hooks/listeners/useChannelUpdated';
-export * from './ChannelList/hooks/useCreateChannelsContext';
-export * from './ChannelList/hooks/usePaginatedChannels';
-export * from './ChannelList/hooks/useChannelActionItems';
-export * from './ChannelList/hooks/useChannelActionItemsById';
-export * from './ChannelList/hooks/useChannelMembershipState';
 export * from './ChannelList/Skeleton';
+export * from './ChannelList/hooks';
 
+/** Channel Preview exports */
+export * from './ChannelPreview/ChannelDetailsBottomSheet';
+export * from './ChannelPreview/ChannelMessagePreview';
+export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 export * from './ChannelPreview/ChannelPreview';
+export * from './ChannelPreview/ChannelPreviewMessage';
 export * from './ChannelPreview/ChannelPreviewMessenger';
+export * from './ChannelPreview/ChannelPreviewMutedStatus';
 export * from './ChannelPreview/ChannelPreviewStatus';
 export * from './ChannelPreview/ChannelPreviewTitle';
+export * from './ChannelPreview/ChannelPreviewTypingIndicator';
 export * from './ChannelPreview/ChannelPreviewUnreadCount';
-export * from './ChannelPreview/hooks/useChannelPreviewDisplayName';
-export * from './ChannelPreview/hooks/useChannelPreviewDisplayPresence';
-export * from './ChannelPreview/hooks/useChannelPreviewData';
-export * from './ChannelPreview/hooks/useIsChannelMuted';
-export * from './ChannelPreview/ChannelMessagePreviewDeliveryStatus';
+export * from './ChannelPreview/hooks';
 
+/** Chat exports */
 export * from './Chat/Chat';
-export * from './Chat/hooks/useCreateChatClient';
-export * from './Chat/hooks/useCreateChatContext';
-export * from './Chat/hooks/useIsOnline';
-export * from './Chat/hooks/useMutedUsers';
-export * from './Chat/hooks/useSyncDatabase';
+export * from './Chat/hooks';
 
 export * from './ImageGallery/ImageGallery';
 export * from './ImageGallery/components/AnimatedGalleryImage';
diff --git a/package/src/contexts/channelsContext/ChannelsContext.tsx b/package/src/contexts/channelsContext/ChannelsContext.tsx
@@ -9,10 +9,12 @@ import type { HeaderErrorProps } from '../../components/ChannelList/ChannelListH
 import type { GetChannelActionItems } from '../../components/ChannelList/hooks/useChannelActionItems';
 import type { QueryChannels } from '../../components/ChannelList/hooks/usePaginatedChannels';
 import type { ChannelDetailsBottomSheetProps } from '../../components/ChannelPreview/ChannelDetailsBottomSheet';
+import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus';
 import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage';
 import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger';
 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 { EmptyStateProps } from '../../components/Indicators/EmptyStateIndicator';
 import type { LoadingErrorProps } from '../../components/Indicators/LoadingErrorIndicator';
@@ -184,6 +186,12 @@ export type ChannelsContextValue = {
    * **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.
    *
@@ -208,6 +216,7 @@ export type ChannelsContextValue = {
    * **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>;
   getChannelActionItems?: GetChannelActionItems;
   swipeActionsEnabled?: boolean;
