From d6f0ba8603d98dd850c41d3d9dfe46d3db7a547a Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Wed, 11 Mar 2026 14:10:18 +0530 Subject: [PATCH 1/5] fix: export relevant hooks from channel preview and channellist and improve customization --- .../components/ChannelList/ChannelList.tsx | 6 ++++ .../src/components/ChannelList/hooks/index.ts | 11 ++++++++ .../hooks/useCreateChannelsContext.ts | 4 +++ .../ChannelPreview/ChannelPreviewMessage.tsx | 23 +++++++++------ ....tsx => ChannelPreviewTypingIndicator.tsx} | 6 ++-- .../components/ChannelPreview/hooks/index.ts | 7 +++++ .../src/components/ChannelPreview/index.ts | 0 package/src/components/Chat/Chat.tsx | 4 +-- package/src/components/Chat/hooks/index.ts | 5 ++++ ...seMutedUsers.ts => useClientMutedUsers.ts} | 2 +- package/src/components/index.ts | 28 ++++++++----------- .../channelsContext/ChannelsContext.tsx | 9 ++++++ 12 files changed, 75 insertions(+), 30 deletions(-) create mode 100644 package/src/components/ChannelList/hooks/index.ts rename package/src/components/ChannelPreview/{ChannelTypingIndicatorPreview.tsx => ChannelPreviewTypingIndicator.tsx} (95%) create mode 100644 package/src/components/ChannelPreview/hooks/index.ts create mode 100644 package/src/components/ChannelPreview/index.ts create mode 100644 package/src/components/Chat/hooks/index.ts rename package/src/components/Chat/hooks/{useMutedUsers.ts => useClientMutedUsers.ts} (90%) diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx index f2a91b0cfb..f134e80bcc 100644 --- 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 new file mode 100644 index 0000000000..ed59263a05 --- /dev/null +++ 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 index c1910c60a5..0cd293d5c7 100644 --- 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 index 27d184eba7..f60fb0b242 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx @@ -5,7 +5,7 @@ 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'; @@ -13,6 +13,7 @@ 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 & { - lastMessage?: LastMessageType; -}; +export type ChannelPreviewMessageProps = Pick & + Pick & { + 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 ; + return ; } if (draftMessage) { @@ -94,14 +101,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { if (channel.data?.name || membersWithoutSelf.length > 1) { return ( - + ); } else { return ( - + ); diff --git a/package/src/components/ChannelPreview/ChannelTypingIndicatorPreview.tsx b/package/src/components/ChannelPreview/ChannelPreviewTypingIndicator.tsx similarity index 95% rename from package/src/components/ChannelPreview/ChannelTypingIndicatorPreview.tsx rename to package/src/components/ChannelPreview/ChannelPreviewTypingIndicator.tsx index 5e0ab591ad..07c90b37f9 100644 --- a/package/src/components/ChannelPreview/ChannelTypingIndicatorPreview.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewTypingIndicator.tsx @@ -56,14 +56,14 @@ const getTypingString = ({ } }; -export type ChannelTypingIndicatorPreviewProps = Pick & { +export type ChannelPreviewTypingIndicatorProps = Pick & { 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 new file mode 100644 index 0000000000..84a62ce423 --- /dev/null +++ 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 new file mode 100644 index 0000000000..e69de29bb2 diff --git a/package/src/components/Chat/Chat.tsx b/package/src/components/Chat/Chat.tsx index f190c0d2d5..4ec7d68606 100644 --- 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) => { * 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 new file mode 100644 index 0000000000..a632fec00a --- /dev/null +++ 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/useMutedUsers.ts b/package/src/components/Chat/hooks/useClientMutedUsers.ts similarity index 90% rename from package/src/components/Chat/hooks/useMutedUsers.ts rename to package/src/components/Chat/hooks/useClientMutedUsers.ts index 07f88ce028..46f84de9b5 100644 --- a/package/src/components/Chat/hooks/useMutedUsers.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(client?.mutedUsers || []); useEffect(() => { diff --git a/package/src/components/index.ts b/package/src/components/index.ts index b5402f95a1..96aa678d75 100644 --- 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 index 1fce3bb725..61815648eb 100644 --- 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; + /** + * 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; /** * 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; + PreviewTypingIndicator?: React.ComponentType; ChannelDetailsBottomSheet?: React.ComponentType; getChannelActionItems?: GetChannelActionItems; swipeActionsEnabled?: boolean; From b2596f3375fee76f90726834d892d49dd4266f8c Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Wed, 11 Mar 2026 14:11:50 +0530 Subject: [PATCH 2/5] fix: hooks export --- package/src/components/Chat/hooks/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/package/src/components/Chat/hooks/index.ts b/package/src/components/Chat/hooks/index.ts index a632fec00a..cfdd671242 100644 --- a/package/src/components/Chat/hooks/index.ts +++ b/package/src/components/Chat/hooks/index.ts @@ -3,3 +3,4 @@ export * from './useIsOnline'; export * from './useSyncDatabase'; export * from './useAppSettings'; export * from './useClientMutedUsers'; +export * from './useCreateChatContext'; From f175d271b4da626c1414c3880a33bd6af1e68c3a Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Wed, 11 Mar 2026 15:23:23 +0530 Subject: [PATCH 3/5] fix: remove deprecated useSyncDatabase hook --- package/src/components/Chat/hooks/index.ts | 1 - .../components/Chat/hooks/useSyncDatabase.ts | 19 ------------------- 2 files changed, 20 deletions(-) delete mode 100644 package/src/components/Chat/hooks/useSyncDatabase.ts diff --git a/package/src/components/Chat/hooks/index.ts b/package/src/components/Chat/hooks/index.ts index cfdd671242..2d7822d6a2 100644 --- a/package/src/components/Chat/hooks/index.ts +++ b/package/src/components/Chat/hooks/index.ts @@ -1,6 +1,5 @@ export * from './useCreateChatClient'; export * from './useIsOnline'; -export * from './useSyncDatabase'; export * from './useAppSettings'; export * from './useClientMutedUsers'; export * from './useCreateChatContext'; diff --git a/package/src/components/Chat/hooks/useSyncDatabase.ts b/package/src/components/Chat/hooks/useSyncDatabase.ts deleted file mode 100644 index 22645d7f37..0000000000 --- a/package/src/components/Chat/hooks/useSyncDatabase.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type { StreamChat } from 'stream-chat'; - -type Params = { - client: StreamChat; - enableOfflineSupport: boolean; - initialisedDatabase: boolean; -}; - -/** - * @deprecated - * With the recent rework of the Offline Support feature, the handling of events has been moved - * to the stream-chat client instead of the SDK. This hook now does nothing and you can safely - * remove it from your code if you were using it. It will be removed in the next major release. - * @param client - * @param initialisedDatabase - */ -// @ts-ignore -// eslint-disable-next-line @typescript-eslint/no-unused-vars -export const useSyncDatabase = ({ client, initialisedDatabase }: Params) => {}; From cd1b2fd5be3b1874b7e5a1048ca18a80be519b32 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Wed, 11 Mar 2026 16:11:24 +0530 Subject: [PATCH 4/5] feat: add ability to customize channel preview last message --- .../ChannelList/hooks/useCreateChannelsContext.ts | 2 ++ ...gePreview.tsx => ChannelLastMessagePreview.tsx} | 4 ++-- .../ChannelPreview/ChannelPreviewMessage.tsx | 14 +++++++++----- .../ChannelPreview/ChannelPreviewMessenger.tsx | 2 +- package/src/components/index.ts | 3 ++- package/src/components/ui/Avatar/ChannelAvatar.tsx | 4 ++-- .../contexts/channelsContext/ChannelsContext.tsx | 10 +++++++++- 7 files changed, 27 insertions(+), 12 deletions(-) rename package/src/components/ChannelPreview/{ChannelMessagePreview.tsx => ChannelLastMessagePreview.tsx} (93%) diff --git a/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts b/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts index 0cd293d5c7..7badceb7a0 100644 --- a/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts +++ b/package/src/components/ChannelList/hooks/useCreateChannelsContext.ts @@ -30,6 +30,7 @@ export const useCreateChannelsContext = ({ PreviewMutedStatus, PreviewStatus, PreviewTitle, + PreviewLastMessage, PreviewTypingIndicator, PreviewMessageDeliveryStatus, PreviewUnreadCount, @@ -84,6 +85,7 @@ export const useCreateChannelsContext = ({ PreviewUnreadCount, PreviewTypingIndicator, PreviewMessageDeliveryStatus, + PreviewLastMessage, ChannelDetailsBottomSheet, swipeActionsEnabled, refreshing, diff --git a/package/src/components/ChannelPreview/ChannelMessagePreview.tsx b/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx similarity index 93% rename from package/src/components/ChannelPreview/ChannelMessagePreview.tsx rename to package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx index 0527ab3112..30d323c839 100644 --- a/package/src/components/ChannelPreview/ChannelMessagePreview.tsx +++ b/package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx @@ -7,11 +7,11 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useMessagePreviewIcon, useMessagePreviewText } from '../../hooks'; import { primitives } from '../../theme'; -export type ChannelMessagePreviewProps = { +export type ChannelLastMessagePreviewProps = { message: LocalMessage | MessageResponse | DraftMessage; }; -export const ChannelMessagePreview = ({ message }: ChannelMessagePreviewProps) => { +export const ChannelLastMessagePreview = ({ message }: ChannelLastMessagePreviewProps) => { const isMessageDeleted = message?.type === 'deleted'; const { theme: { semantics }, diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx index f60fb0b242..b2998e6ef3 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from 'react'; import { StyleSheet, Text, View } from 'react-native'; -import { ChannelMessagePreview } from './ChannelMessagePreview'; +import { ChannelLastMessagePreview } from './ChannelLastMessagePreview'; import { ChannelMessagePreviewDeliveryStatus } from './ChannelMessagePreviewDeliveryStatus'; import { ChannelPreviewProps } from './ChannelPreview'; @@ -24,7 +24,10 @@ import { MessageStatusTypes } from '../../utils/utils'; import { ErrorBadge } from '../ui'; export type ChannelPreviewMessageProps = Pick & - Pick & { + Pick< + ChannelsContextValue, + 'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' | 'PreviewLastMessage' + > & { lastMessage?: LastMessageType; }; @@ -34,6 +37,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { lastMessage, PreviewTypingIndicator = ChannelPreviewTypingIndicator, PreviewMessageDeliveryStatus = ChannelMessagePreviewDeliveryStatus, + PreviewLastMessage = ChannelLastMessagePreview, } = props; const { theme: { semantics }, @@ -66,7 +70,7 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { return ( {t('Draft')}: - + ); } @@ -102,14 +106,14 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { return ( - + ); } else { return ( - + ); } diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx index 43ea0c8b02..2b58da414b 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx @@ -111,7 +111,7 @@ const ChannelPreviewMessengerWithContext = (props: ChannelPreviewMessengerPropsW ]} testID='channel-preview-button' > - + { const { client } = useChatContext(); const { channel } = props; const online = useChannelPreviewDisplayPresence(channel); - const { showOnlineIndicator = online, size, showBorder = true } = props; + const { showOnlineIndicator = online, size = 'xl', showBorder = true } = props; const { theme: { semantics }, diff --git a/package/src/contexts/channelsContext/ChannelsContext.tsx b/package/src/contexts/channelsContext/ChannelsContext.tsx index 61815648eb..fd7dd26b04 100644 --- a/package/src/contexts/channelsContext/ChannelsContext.tsx +++ b/package/src/contexts/channelsContext/ChannelsContext.tsx @@ -9,6 +9,7 @@ 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 { ChannelLastMessagePreviewProps } from '../../components/ChannelPreview/ChannelLastMessagePreview'; import { ChannelMessagePreviewDeliveryStatusProps } from '../../components/ChannelPreview/ChannelMessagePreviewDeliveryStatus'; import { ChannelPreviewMessageProps } from '../../components/ChannelPreview/ChannelPreviewMessage'; import type { ChannelPreviewMessengerProps } from '../../components/ChannelPreview/ChannelPreviewMessenger'; @@ -20,6 +21,7 @@ import type { EmptyStateProps } from '../../components/Indicators/EmptyStateIndi 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'; @@ -179,7 +181,7 @@ export type ChannelsContextValue = { * * **Default** [ChannelAvatar](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/ChannelPreview/ChannelAvatar.tsx) */ - PreviewAvatar?: React.ComponentType; + PreviewAvatar?: React.ComponentType; /** * Custom UI component to render preview of latest message on channel. * @@ -218,6 +220,12 @@ export type ChannelsContextValue = { PreviewUnreadCount?: React.ComponentType; PreviewTypingIndicator?: React.ComponentType; ChannelDetailsBottomSheet?: React.ComponentType; + /** + * 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; getChannelActionItems?: GetChannelActionItems; swipeActionsEnabled?: boolean; From 19b2bb28ceaba637eb39521ccc782743d98b305a Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Thu, 12 Mar 2026 19:04:52 +0530 Subject: [PATCH 5/5] fix: customizations issue --- .../components/ChannelList/ChannelList.tsx | 3 ++ .../ChannelPreview/ChannelPreviewMessage.tsx | 29 ++++++++++++++----- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/package/src/components/ChannelList/ChannelList.tsx b/package/src/components/ChannelList/ChannelList.tsx index f134e80bcc..cbb860bf54 100644 --- a/package/src/components/ChannelList/ChannelList.tsx +++ b/package/src/components/ChannelList/ChannelList.tsx @@ -51,6 +51,7 @@ export type ChannelListProps = Partial< | 'PreviewMutedStatus' | 'PreviewStatus' | 'PreviewTitle' + | 'PreviewLastMessage' | 'PreviewUnreadCount' | 'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' @@ -286,6 +287,7 @@ export const ChannelList = (props: ChannelListProps) => { PreviewAvatar, PreviewMessage, PreviewMutedStatus, + PreviewLastMessage, PreviewStatus, PreviewTitle, PreviewUnreadCount, @@ -424,6 +426,7 @@ export const ChannelList = (props: ChannelListProps) => { PreviewTypingIndicator, PreviewMessageDeliveryStatus, ChannelDetailsBottomSheet, + PreviewLastMessage, swipeActionsEnabled, refreshing, refreshList, diff --git a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx index b2998e6ef3..c6a129d240 100644 --- a/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx +++ b/package/src/components/ChannelPreview/ChannelPreviewMessage.tsx @@ -13,7 +13,10 @@ import { useChannelPreviewPollLabel } from './hooks/useChannelPreviewPollLabel'; import { useChannelTypingState } from './hooks/useChannelTypingState'; -import { ChannelsContextValue } from '../../contexts/channelsContext/ChannelsContext'; +import { + ChannelsContextValue, + useChannelsContext, +} from '../../contexts/channelsContext/ChannelsContext'; import { useChatContext } from '../../contexts/chatContext/ChatContext'; import { useTheme } from '../../contexts/themeContext/ThemeContext'; import { useTranslationContext } from '../../contexts/translationContext/TranslationContext'; @@ -24,9 +27,11 @@ import { MessageStatusTypes } from '../../utils/utils'; import { ErrorBadge } from '../ui'; export type ChannelPreviewMessageProps = Pick & - Pick< - ChannelsContextValue, - 'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' | 'PreviewLastMessage' + Partial< + Pick< + ChannelsContextValue, + 'PreviewTypingIndicator' | 'PreviewMessageDeliveryStatus' | 'PreviewLastMessage' + > > & { lastMessage?: LastMessageType; }; @@ -35,10 +40,20 @@ export const ChannelPreviewMessage = (props: ChannelPreviewMessageProps) => { const { channel, lastMessage, - PreviewTypingIndicator = ChannelPreviewTypingIndicator, - PreviewMessageDeliveryStatus = ChannelMessagePreviewDeliveryStatus, - PreviewLastMessage = ChannelLastMessagePreview, + PreviewTypingIndicator: PreviewTypingIndicatorProp = ChannelPreviewTypingIndicator, + PreviewMessageDeliveryStatus: + PreviewMessageDeliveryStatusProp = ChannelMessagePreviewDeliveryStatus, + PreviewLastMessage: PreviewLastMessageProp = ChannelLastMessagePreview, } = props; + const { + PreviewTypingIndicator: PreviewTypingIndicatorContext, + PreviewMessageDeliveryStatus: PreviewMessageDeliveryStatusContext, + PreviewLastMessage: PreviewLastMessageContext, + } = useChannelsContext(); + const PreviewTypingIndicator = PreviewTypingIndicatorProp || PreviewTypingIndicatorContext; + const PreviewMessageDeliveryStatus = + PreviewMessageDeliveryStatusProp || PreviewMessageDeliveryStatusContext; + const PreviewLastMessage = PreviewLastMessageProp || PreviewLastMessageContext; const { theme: { semantics }, } = useTheme();