stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.10

package/src/components/AutoCompleteInput/AutoCompleteSuggestionList.tsx

@@ -62,7 +62,7 @@ export const AutoCompleteSuggestionList = ({
 
   const {
     theme: {
-      messageInput: {
+      messageComposer: {
         container: { maxHeight },
       },
     },
@@ -116,7 +116,7 @@ const useStyles = () => {
   const {
     theme: {
       semantics,
-      messageInput: {
+      messageComposer: {
         suggestionsListContainer: { flatlist },
       },
     },
@@ -150,4 +150,4 @@ const useStyles = () => {
 };
 
 AutoCompleteSuggestionList.displayName =
-  'AutoCompleteSuggestionList{messageInput{suggestions{List}}}';
+  'AutoCompleteSuggestionList{messageComposer{suggestions{List}}}';

package/src/components/Channel/Channel.tsx

@@ -144,31 +144,31 @@ import {
   KeyboardCompatibleViewProps,
 } from '../KeyboardCompatibleView/KeyboardControllerAvoidingView';
 import { Message as MessageDefault } from '../Message/Message';
-import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageSimple/Headers/MessagePinnedHeader';
-import { MessageReminderHeader as MessageReminderHeaderDefault } from '../Message/MessageSimple/Headers/MessageReminderHeader';
-import { MessageSavedForLaterHeader as MessageSavedForLaterHeaderDefault } from '../Message/MessageSimple/Headers/MessageSavedForLaterHeader';
-import { SentToChannelHeader as SentToChannelHeaderDefault } from '../Message/MessageSimple/Headers/SentToChannelHeader';
-import { MessageAvatar as MessageAvatarDefault } from '../Message/MessageSimple/MessageAvatar';
-import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageSimple/MessageBlocked';
-import { MessageBounce as MessageBounceDefault } from '../Message/MessageSimple/MessageBounce';
-import { MessageContent as MessageContentDefault } from '../Message/MessageSimple/MessageContent';
-import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageSimple/MessageDeleted';
-import { MessageError as MessageErrorDefault } from '../Message/MessageSimple/MessageError';
-import { MessageFooter as MessageFooterDefault } from '../Message/MessageSimple/MessageFooter';
-import { MessageHeader as MessageHeaderDefault } from '../Message/MessageSimple/MessageHeader';
-import { MessageReplies as MessageRepliesDefault } from '../Message/MessageSimple/MessageReplies';
-import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageSimple/MessageRepliesAvatars';
-import { MessageSimple as MessageSimpleDefault } from '../Message/MessageSimple/MessageSimple';
-import { MessageStatus as MessageStatusDefault } from '../Message/MessageSimple/MessageStatus';
-import { MessageSwipeContent as MessageSwipeContentDefault } from '../Message/MessageSimple/MessageSwipeContent';
-import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageSimple/MessageTimestamp';
-import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageSimple/ReactionList/ReactionListBottom';
-import { ReactionListClustered as ReactionListClusteredDefault } from '../Message/MessageSimple/ReactionList/ReactionListClustered';
-import { ReactionListCountItem as ReactionListCountItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
-import { ReactionListItem as ReactionListItemDefault } from '../Message/MessageSimple/ReactionList/ReactionListItem';
-import { ReactionListItemWrapper as ReactionListItemWrapperDefault } from '../Message/MessageSimple/ReactionList/ReactionListItemWrapper';
-import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageSimple/ReactionList/ReactionListTop';
-import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageSimple/StreamingMessageView';
+import { MessagePinnedHeader as MessagePinnedHeaderDefault } from '../Message/MessageItemView/Headers/MessagePinnedHeader';
+import { MessageReminderHeader as MessageReminderHeaderDefault } from '../Message/MessageItemView/Headers/MessageReminderHeader';
+import { MessageSavedForLaterHeader as MessageSavedForLaterHeaderDefault } from '../Message/MessageItemView/Headers/MessageSavedForLaterHeader';
+import { SentToChannelHeader as SentToChannelHeaderDefault } from '../Message/MessageItemView/Headers/SentToChannelHeader';
+import { MessageAuthor as MessageAuthorDefault } from '../Message/MessageItemView/MessageAuthor';
+import { MessageBlocked as MessageBlockedDefault } from '../Message/MessageItemView/MessageBlocked';
+import { MessageBounce as MessageBounceDefault } from '../Message/MessageItemView/MessageBounce';
+import { MessageContent as MessageContentDefault } from '../Message/MessageItemView/MessageContent';
+import { MessageDeleted as MessageDeletedDefault } from '../Message/MessageItemView/MessageDeleted';
+import { MessageError as MessageErrorDefault } from '../Message/MessageItemView/MessageError';
+import { MessageFooter as MessageFooterDefault } from '../Message/MessageItemView/MessageFooter';
+import { MessageHeader as MessageHeaderDefault } from '../Message/MessageItemView/MessageHeader';
+import { MessageItemView as MessageItemViewDefault } from '../Message/MessageItemView/MessageItemView';
+import { MessageReplies as MessageRepliesDefault } from '../Message/MessageItemView/MessageReplies';
+import { MessageRepliesAvatars as MessageRepliesAvatarsDefault } from '../Message/MessageItemView/MessageRepliesAvatars';
+import { MessageStatus as MessageStatusDefault } from '../Message/MessageItemView/MessageStatus';
+import { MessageSwipeContent as MessageSwipeContentDefault } from '../Message/MessageItemView/MessageSwipeContent';
+import { MessageTimestamp as MessageTimestampDefault } from '../Message/MessageItemView/MessageTimestamp';
+import { ReactionListBottom as ReactionListBottomDefault } from '../Message/MessageItemView/ReactionList/ReactionListBottom';
+import { ReactionListClustered as ReactionListClusteredDefault } from '../Message/MessageItemView/ReactionList/ReactionListClustered';
+import { ReactionListCountItem as ReactionListCountItemDefault } from '../Message/MessageItemView/ReactionList/ReactionListItem';
+import { ReactionListItem as ReactionListItemDefault } from '../Message/MessageItemView/ReactionList/ReactionListItem';
+import { ReactionListItemWrapper as ReactionListItemWrapperDefault } from '../Message/MessageItemView/ReactionList/ReactionListItemWrapper';
+import { ReactionListTop as ReactionListTopDefault } from '../Message/MessageItemView/ReactionList/ReactionListTop';
+import { StreamingMessageView as DefaultStreamingMessageView } from '../Message/MessageItemView/StreamingMessageView';
 import { AttachmentUploadPreviewList as AttachmentUploadPreviewDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadPreviewList';
 import { FileUploadInProgressIndicator as FileUploadInProgressIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
 import { FileUploadRetryIndicator as FileUploadRetryIndicatorDefault } from '../MessageInput/components/AttachmentPreview/AttachmentUploadProgressIndicator';
@@ -215,13 +215,11 @@ import { emojis } from '../MessageMenu/emojis';
 import { MessageActionList as MessageActionListDefault } from '../MessageMenu/MessageActionList';
 import { MessageActionListItem as MessageActionListItemDefault } from '../MessageMenu/MessageActionListItem';
 import { MessageMenu as MessageMenuDefault } from '../MessageMenu/MessageMenu';
-import {
-  MessageReactionPicker as MessageReactionPickerDefault,
-  toUnicodeScalarString,
-} from '../MessageMenu/MessageReactionPicker';
+import { MessageReactionPicker as MessageReactionPickerDefault } from '../MessageMenu/MessageReactionPicker';
 import { MessageUserReactions as MessageUserReactionsDefault } from '../MessageMenu/MessageUserReactions';
 import { MessageUserReactionsAvatar as MessageUserReactionsAvatarDefault } from '../MessageMenu/MessageUserReactionsAvatar';
 import { MessageUserReactionsItem as MessageUserReactionsItemDefault } from '../MessageMenu/MessageUserReactionsItem';
+import { toUnicodeScalarString } from '../MessageMenu/utils/toUnicodeScalarString';
 import { Reply as ReplyDefault } from '../Reply/Reply';
 
 export type MarkReadFunctionOptions = {
@@ -367,11 +365,15 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'MessageActionList'
       | 'MessageActionListItem'
       | 'messageActions'
-      | 'MessageAvatar'
+      | 'MessageAuthor'
       | 'MessageBounce'
       | 'MessageBlocked'
       | 'MessageContent'
+      | 'MessageContentBottomView'
+      | 'MessageContentLeadingView'
       | 'messageContentOrder'
+      | 'MessageContentTrailingView'
+      | 'MessageContentTopView'
       | 'MessageDeleted'
       | 'MessageError'
       | 'MessageFooter'
@@ -385,7 +387,8 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
       | 'SentToChannelHeader'
       | 'MessageReplies'
       | 'MessageRepliesAvatars'
-      | 'MessageSimple'
+      | 'MessageSpacer'
+      | 'MessageItemView'
       | 'MessageStatus'
       | 'MessageSystem'
       | 'MessageText'
@@ -571,8 +574,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     allowThreadMessagesInChannel = true,
     asyncMessagesLockDistance = 50,
     asyncMessagesMinimumPressDuration = 500,
-    asyncMessagesMultiSendEnabled = true,
     asyncMessagesSlideToCancelDistance = 75,
+    audioRecordingSendOnComplete = true,
     AttachButton = AttachButtonDefault,
     Attachment = AttachmentDefault,
     attachmentPickerBottomSheetHeight = disableAttachmentPicker ? 72 : 333,
@@ -685,10 +688,12 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageActionList = MessageActionListDefault,
     MessageActionListItem = MessageActionListItemDefault,
     messageActions,
-    MessageAvatar = MessageAvatarDefault,
+    MessageAuthor = MessageAuthorDefault,
     MessageBlocked = MessageBlockedDefault,
     MessageBounce = MessageBounceDefault,
     MessageContent = MessageContentDefault,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     messageContentOrder = [
       'quoted_reply',
       'gallery',
@@ -699,6 +704,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
       'text',
       'location',
     ],
+    MessageContentTrailingView,
+    MessageContentTopView,
     MessageDeleted = MessageDeletedDefault,
     MessageError = MessageErrorDefault,
     messageInputFloating = false,
@@ -719,7 +726,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageReactionPicker = MessageReactionPickerDefault,
     MessageReplies = MessageRepliesDefault,
     MessageRepliesAvatars = MessageRepliesAvatarsDefault,
-    MessageSimple = MessageSimpleDefault,
+    MessageSpacer,
+    MessageItemView = MessageItemViewDefault,
     MessageStatus = MessageStatusDefault,
     MessageSwipeContent = MessageSwipeContentDefault,
     messageSwipeToReplyHitSlop,
@@ -1842,7 +1850,7 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     allowSendBeforeAttachmentsUpload,
     asyncMessagesLockDistance,
     asyncMessagesMinimumPressDuration,
-    asyncMessagesMultiSendEnabled,
+    audioRecordingSendOnComplete,
     asyncMessagesSlideToCancelDistance,
     AttachButton,
     attachmentPickerBottomSheetHeight,
@@ -1968,11 +1976,15 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageActionList,
     MessageActionListItem,
     messageActions,
-    MessageAvatar,
+    MessageAuthor,
     MessageBlocked,
     MessageBounce,
     MessageContent,
+    MessageContentBottomView,
+    MessageContentLeadingView,
     messageContentOrder,
+    MessageContentTrailingView,
+    MessageContentTopView,
     MessageDeleted,
     MessageError,
     MessageFooter,
@@ -1987,7 +1999,8 @@ const ChannelWithContext = (props: PropsWithChildren<ChannelPropsWithContext>) =
     MessageReactionPicker,
     MessageReplies,
     MessageRepliesAvatars,
-    MessageSimple,
+    MessageSpacer,
+    MessageItemView,
     MessageStatus,
     MessageSwipeContent,
     messageSwipeToReplyHitSlop,
@@ -2119,7 +2132,7 @@ export type ChannelProps = Partial<Omit<ChannelPropsWithContext, 'channel' | 'th
 /**
  *
  * The wrapper component for a chat channel. Channel needs to be placed inside a Chat component
- * to receive the StreamChat client instance. MessageList, Thread, and MessageInput must be
+ * to receive the StreamChat client instance. MessageList, Thread, and MessageComposer must be
  * children of the Channel component to receive the ChannelContext.
  *
  * @example ./Channel.md

package/src/components/Channel/__tests__/ownCapabilities.test.js

@@ -17,7 +17,7 @@ import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { registerNativeHandlers } from '../../../native';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
-import { MessageInput } from '../../MessageInput/MessageInput';
+import { MessageComposer } from '../../MessageInput/MessageComposer';
 import { MessageList } from '../../MessageList/MessageList';
 
 describe('Own capabilities', () => {
@@ -54,7 +54,7 @@ describe('Own capabilities', () => {
         <Chat client={chatClient}>
           <Channel channel={channel} {...props}>
             <MessageList FlatList={FlatList} />
-            <MessageInput />
+            <MessageComposer />
           </Channel>
         </Chat>
       </OverlayProvider>

package/src/components/Channel/hooks/useCreateInputMessageInputContext.ts

@@ -7,8 +7,8 @@ export const useCreateInputMessageInputContext = ({
   allowSendBeforeAttachmentsUpload,
   asyncMessagesLockDistance,
   asyncMessagesMinimumPressDuration,
-  asyncMessagesMultiSendEnabled,
   asyncMessagesSlideToCancelDistance,
+  audioRecordingSendOnComplete,
   AttachButton,
   attachmentPickerBottomSheetHeight,
   AttachmentPickerSelectionBar,
@@ -77,8 +77,8 @@ export const useCreateInputMessageInputContext = ({
       allowSendBeforeAttachmentsUpload,
       asyncMessagesLockDistance,
       asyncMessagesMinimumPressDuration,
-      asyncMessagesMultiSendEnabled,
       asyncMessagesSlideToCancelDistance,
+      audioRecordingSendOnComplete,
       AttachButton,
       attachmentPickerBottomSheetHeight,
       AttachmentPickerSelectionBar,

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -53,11 +53,15 @@ export const useCreateMessagesContext = ({
   MessageActionList,
   MessageActionListItem,
   messageActions,
-  MessageAvatar,
+  MessageAuthor,
   MessageBlocked,
   MessageBounce,
   MessageContent,
+  MessageContentBottomView,
+  MessageContentLeadingView,
   messageContentOrder,
+  MessageContentTrailingView,
+  MessageContentTopView,
   MessageDeleted,
   MessageError,
   MessageFooter,
@@ -72,7 +76,8 @@ export const useCreateMessagesContext = ({
   MessageReactionPicker,
   MessageReplies,
   MessageRepliesAvatars,
-  MessageSimple,
+  MessageSpacer,
+  MessageItemView,
   MessageStatus,
   MessageSwipeContent,
   messageSwipeToReplyHitSlop,
@@ -177,11 +182,15 @@ export const useCreateMessagesContext = ({
       MessageActionList,
       MessageActionListItem,
       messageActions,
-      MessageAvatar,
+      MessageAuthor,
       MessageBlocked,
       MessageBounce,
       MessageContent,
+      MessageContentBottomView,
+      MessageContentLeadingView,
       messageContentOrder,
+      MessageContentTrailingView,
+      MessageContentTopView,
       MessageDeleted,
       MessageError,
       MessageFooter,
@@ -196,7 +205,8 @@ export const useCreateMessagesContext = ({
       MessageReactionPicker,
       MessageReplies,
       MessageRepliesAvatars,
-      MessageSimple,
+      MessageSpacer,
+      MessageItemView,
       MessageStatus,
       MessageSwipeContent,
       messageSwipeToReplyHitSlop,

package/src/components/ChannelList/ChannelList.tsx

@@ -15,7 +15,7 @@ import { ChannelListFooterLoadingIndicator } from './ChannelListFooterLoadingInd
 import { ChannelListHeaderErrorIndicator } from './ChannelListHeaderErrorIndicator';
 import { ChannelListHeaderNetworkDownIndicator } from './ChannelListHeaderNetworkDownIndicator';
 import { ChannelListLoadingIndicator } from './ChannelListLoadingIndicator';
-import { ChannelListMessenger, ChannelListMessengerProps } from './ChannelListMessenger';
+import { ChannelListView, ChannelListViewProps } from './ChannelListView';
 import { useChannelUpdated } from './hooks/listeners/useChannelUpdated';
 import { useCreateChannelsContext } from './hooks/useCreateChannelsContext';
 import { usePaginatedChannels } from './hooks/usePaginatedChannels';
@@ -28,7 +28,7 @@ import {
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
 import { SwipeRegistryProvider } from '../../contexts/swipeableContext/SwipeRegistryContext';
 import type { ChannelListEventListenerOptions } from '../../types/types';
-import { ChannelPreviewMessenger } from '../ChannelPreview/ChannelPreviewMessenger';
+import { ChannelPreviewView } from '../ChannelPreview/ChannelPreviewView';
 import { EmptyStateIndicator as EmptyStateIndicatorDefault } from '../Indicators/EmptyStateIndicator';
 import { LoadingErrorIndicator as LoadingErrorIndicatorDefault } from '../Indicators/LoadingErrorIndicator';
 
@@ -78,9 +78,9 @@ export type ChannelListProps = Partial<
   /**
    * Custom UI component to display the list of channels
    *
-   * Default: [ChannelListMessenger](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-list-messenger/)
+   * Default: [ChannelListView](https://getstream.io/chat/docs/sdk/reactnative/ui-components/channel-list-view/)
    */
-  List?: React.ComponentType<ChannelListMessengerProps>;
+  List?: React.ComponentType<ChannelListViewProps>;
   /**
    * If set to true, channels won't dynamically sort by most recent message, defaults to false
    */
@@ -248,7 +248,7 @@ const DEFAULT_SORT = {};
 /**
  * This component fetches a list of channels, allowing you to select the channel you want to open.
  * The ChannelList doesn't provide any UI for the underlying React Native FlatList. UI is determined by the `List` component which is
- * provided to the ChannelList component as a prop. By default, the ChannelListMessenger component is used as the list UI.
+ * provided to the ChannelList component as a prop. By default, the ChannelListView component is used as the list UI.
  *
  * @example ./ChannelList.md
  */
@@ -261,7 +261,7 @@ export const ChannelList = (props: ChannelListProps) => {
     FooterLoadingIndicator = ChannelListFooterLoadingIndicator,
     HeaderErrorIndicator = ChannelListHeaderErrorIndicator,
     HeaderNetworkDownIndicator = ChannelListHeaderNetworkDownIndicator,
-    List = ChannelListMessenger,
+    List = ChannelListView,
     ListHeaderComponent,
     LoadingErrorIndicator = LoadingErrorIndicatorDefault,
     LoadingIndicator = ChannelListLoadingIndicator,
@@ -282,7 +282,7 @@ export const ChannelList = (props: ChannelListProps) => {
     onRemovedFromChannel,
     onSelect,
     options = DEFAULT_OPTIONS,
-    Preview = ChannelPreviewMessenger,
+    Preview = ChannelPreviewView,
     getChannelActionItems,
     PreviewAvatar,
     PreviewMessage,

package/src/components/ChannelList/{ChannelListMessenger.tsx → ChannelListView.tsx}

@@ -16,7 +16,7 @@ import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStableCallback } from '../../hooks';
 import { ChannelPreview } from '../ChannelPreview/ChannelPreview';
 
-export type ChannelListMessengerPropsWithContext = Omit<
+export type ChannelListViewPropsWithContext = Omit<
   ChannelsContextValue,
   | 'HeaderErrorIndicator'
   | 'HeaderNetworkDownIndicator'
@@ -61,7 +61,7 @@ const renderItem = ({ item }: { item: Channel }) => <ChannelPreview channel={ite
 
 const keyExtractor = (item: Channel) => item.cid;
 
-const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithContext) => {
+const ChannelListViewWithContext = (props: ChannelListViewPropsWithContext) => {
   const onEndReachedCalledDuringCurrentScrollRef = useRef<boolean>(false);
   const {
     additionalFlatListProps,
@@ -159,7 +159,7 @@ const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithCon
         refreshing={refreshing}
         renderItem={renderItem}
         style={styles.flatList}
-        testID='channel-list-messenger'
+        testID='channel-list-view'
         {...additionalFlatListProps}
       />
       <StatusIndicator />
@@ -167,15 +167,15 @@ const ChannelListMessengerWithContext = (props: ChannelListMessengerPropsWithCon
   );
 };
 
-export type ChannelListMessengerProps = Partial<ChannelListMessengerPropsWithContext>;
+export type ChannelListViewProps = Partial<ChannelListViewPropsWithContext>;
 
 /**
  * This UI component displays the preview list of channels and handles Channel navigation. It
  * receives all props from the ChannelList component.
  *
- * @example ./ChannelListMessenger.md
+ * @example ./ChannelListView.md
  */
-export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
+export const ChannelListView = (props: ChannelListViewProps) => {
   const {
     additionalFlatListProps,
     channelListInitialized,
@@ -199,7 +199,7 @@ export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
   } = useChannelsContext();
 
   return (
-    <ChannelListMessengerWithContext
+    <ChannelListViewWithContext
       {...{
         additionalFlatListProps,
         channelListInitialized,
@@ -226,12 +226,12 @@ export const ChannelListMessenger = (props: ChannelListMessengerProps) => {
   );
 };
 
-ChannelListMessenger.displayName = 'ChannelListMessenger{channelListMessenger}';
+ChannelListView.displayName = 'ChannelListView{channelListView}';
 
 const useStyles = () => {
   const {
     theme: {
-      channelListMessenger: { flatList, flatListContent },
+      channelListView: { flatList, flatListContent },
     },
   } = useTheme();
   return useMemo(() => {

package/src/components/ChannelList/__tests__/ChannelList.test.js

@@ -20,6 +20,7 @@ import dispatchChannelDeletedEvent from '../../../mock-builders/event/channelDel
 import dispatchChannelHiddenEvent from '../../../mock-builders/event/channelHidden';
 import dispatchChannelTruncatedEvent from '../../../mock-builders/event/channelTruncated';
 import dispatchChannelUpdatedEvent from '../../../mock-builders/event/channelUpdated';
+import dispatchConnectionChangedEvent from '../../../mock-builders/event/connectionChanged';
 import dispatchConnectionRecoveredEvent from '../../../mock-builders/event/connectionRecovered';
 import dispatchMessageNewEvent from '../../../mock-builders/event/messageNew';
 import dispatchNotificationAddedToChannelEvent from '../../../mock-builders/event/notificationAddedToChannel';
@@ -43,7 +44,7 @@ jest.mock('../../ChannelPreview/ChannelSwipableWrapper', () => ({
 
 /**
  * We are gonna use following custom UI components for preview and list.
- * If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
+ * If we use ChannelPreviewView or ChannelPreviewLastMessage here, then changes
  * to those components might end up breaking tests for ChannelList, which will be quite painful
  * to debug.
  */
@@ -75,6 +76,11 @@ const ChannelListSwipeActionsProbe = () => {
   return <Text testID='swipe-actions-enabled'>{`${swipeActionsEnabled}`}</Text>;
 };
 
+const ChannelListRefreshingProbe = () => {
+  const { refreshing } = useChannelsContext();
+  return <Text testID='refreshing'>{`${refreshing}`}</Text>;
+};
+
 const ChannelPreviewContent = ({ unread }) => <Text testID='preview-unread'>{`${unread}`}</Text>;
 
 const ChannelListWithChannelPreview = () => {
@@ -427,7 +433,7 @@ describe('ChannelList', () => {
         );
 
         await waitFor(() => {
-          expect(screen.getByTestId('channel-list-messenger')).toBeTruthy();
+          expect(screen.getByTestId('channel-list-view')).toBeTruthy();
         });
 
         const newMessage = sendNewMessageOnChannel3();
@@ -805,6 +811,43 @@ describe('ChannelList', () => {
       });
     });
 
+    describe('connection.changed', () => {
+      it('should keep background reconnection refreshes debounced and out of pull-to-refresh UI', async () => {
+        useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+        const deferredPromise = new DeferredPromise();
+        const dateNowSpy = jest.spyOn(Date, 'now');
+        dateNowSpy.mockReturnValueOnce(0);
+        dateNowSpy.mockReturnValue(6000);
+
+        render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} List={ChannelListRefreshingProbe} />
+          </Chat>,
+        );
+
+        await waitFor(() => {
+          expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+        });
+
+        chatClient.queryChannels = jest.fn(() => deferredPromise.promise);
+
+        act(() => dispatchConnectionChangedEvent(chatClient, false));
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        await waitFor(() => {
+          expect(chatClient.queryChannels).toHaveBeenCalled();
+        });
+
+        act(() => dispatchConnectionChangedEvent(chatClient, true));
+
+        expect(chatClient.queryChannels).toHaveBeenCalledTimes(1);
+        expect(screen.getByTestId('refreshing').children[0]).toBe('false');
+
+        deferredPromise.resolve([testChannel1]);
+        dateNowSpy.mockRestore();
+      });
+    });
+
     describe('channel.truncated', () => {
       it('should call the `onChannelTruncated` function prop, if provided', async () => {
         useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);

package/src/components/ChannelList/__tests__/{ChannelListMessenger.test.js → ChannelListView.test.js}

@@ -14,7 +14,7 @@ import { generateChannelResponse } from '../../../mock-builders/generator/channe
 import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { Chat } from '../../Chat/Chat';
 import { ChannelList } from '../ChannelList';
-import { ChannelListMessenger } from '../ChannelListMessenger';
+import { ChannelListView } from '../ChannelListView';
 
 let mockChannels;
 let chatClient;
@@ -24,7 +24,7 @@ const ListMessenger = ({ error, loadingChannels, ...props }) => {
 
   return (
     <ChannelsProvider value={{ ...channelsContext, error, loadingChannels }}>
-      <ChannelListMessenger {...props} />
+      <ChannelListView {...props} />
     </ChannelsProvider>
   );
 };
@@ -54,7 +54,7 @@ const Component = ({ error = false, loadingChannels = false }) => {
   );
 };
 
-describe('ChannelListMessenger', () => {
+describe('ChannelListView', () => {
   beforeAll(async () => {
     chatClient = await getTestClientWithUser({ id: 'vishal' });
     const c1 = generateChannelResponse();
@@ -71,7 +71,7 @@ describe('ChannelListMessenger', () => {
   it('renders without crashing', async () => {
     const { getByTestId } = render(<Component />);
     await waitFor(() => {
-      expect(getByTestId('channel-list-messenger')).toBeTruthy();
+      expect(getByTestId('channel-list-view')).toBeTruthy();
     });
   });
 

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -24,7 +24,7 @@ type Parameters = {
 
 const RETRY_INTERVAL_IN_MS = 5000;
 
-type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels';
+type QueryType = 'queryLocalDB' | 'reload' | 'refresh' | 'loadChannels' | 'backgroundRefresh';
 
 export type QueryChannels = (queryType?: QueryType, retryCount?: number) => Promise<void>;
 
@@ -68,6 +68,7 @@ export const usePaginatedChannels = ({
     const hasUpdatedData =
       queryType === 'loadChannels' ||
       queryType === 'refresh' ||
+      queryType === 'backgroundRefresh' ||
       [
         JSON.stringify(filtersRef.current) !== JSON.stringify(filters),
         JSON.stringify(sortRef.current) !== JSON.stringify(sort),
@@ -129,7 +130,7 @@ export const usePaginatedChannels = ({
     setActiveQueryType(null);
   };
 
-  const refreshList = async () => {
+  const refreshList = async ({ isBackground = false }: { isBackground?: boolean } = {}) => {
     const now = Date.now();
     // Only allow pull-to-refresh 5 seconds after last successful refresh.
     if (now - lastRefresh.current < RETRY_INTERVAL_IN_MS && error === undefined) {
@@ -137,7 +138,7 @@ export const usePaginatedChannels = ({
     }
 
     lastRefresh.current = Date.now();
-    await queryChannels('refresh');
+    await queryChannels(isBackground ? 'backgroundRefresh' : 'refresh');
   };
 
   const reloadList = async () => {
@@ -167,7 +168,9 @@ export const usePaginatedChannels = ({
       'connection.changed',
       async (event) => {
         if (event.online) {
-          await refreshList();
+          // Reconnection refreshes should stay silent, but still share the same debounce
+          // path as pull-to-refresh.
+          await refreshList({ isBackground: true });
         }
       },
     );
@@ -195,7 +198,7 @@ export const usePaginatedChannels = ({
     loadingNextPage: pagination?.isLoadingNext,
     loadNextPage: channelManager.loadNext,
     refreshing: activeQueryType === 'refresh',
-    refreshList,
+    refreshList: () => refreshList(),
     reloadList,
     staticChannelsActive,
   };

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { StyleSheet, Text } from 'react-native';
 
 import { ChannelPreviewProps } from './ChannelPreview';
-import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
+import type { ChannelPreviewViewPropsWithContext } from './ChannelPreviewView';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../contexts/translationContext/TranslationContext';
@@ -11,7 +11,7 @@ import { primitives } from '../../theme';
 import { getDateString } from '../../utils/i18n/getDateString';
 
 export type ChannelPreviewStatusProps = Pick<
-  ChannelPreviewMessengerPropsWithContext,
+  ChannelPreviewViewPropsWithContext,
   'formatLatestMessageDate' | 'lastMessage'
 > &
   Pick<ChannelPreviewProps, 'channel'>;