stream-chat-react-native-core 5.0.0-beta.0 → 5.0.0-beta.3

package/lib/typescript/components/Message/Message.d.ts

@@ -1,5 +1,5 @@
 import { GestureResponderEvent, StyleProp, ViewStyle } from 'react-native';
-import type { UserResponse } from 'stream-chat';
+import type { Attachment, UserResponse } from 'stream-chat';
 import { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue } from '../../contexts/chatContext/ChatContext';
 import { KeyboardContextValue } from '../../contexts/keyboardContext/KeyboardContext';
@@ -24,12 +24,18 @@ export declare type UrlTouchableHandlerPayload = {
         url?: string;
     };
 };
+export declare type FileAttachmentTouchableHandlerPayload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+    emitter: 'fileAttachment';
+    additionalInfo?: {
+        attachment?: Attachment<StreamChatGenerics>;
+    };
+};
 export declare type TouchableHandlerPayload = {
     defaultHandler?: () => void;
     event?: GestureResponderEvent;
 } & ({
-    emitter?: TouchableEmitter;
-} | TextMentionTouchableHandlerPayload | UrlTouchableHandlerPayload);
+    emitter?: Exclude<TouchableEmitter, 'textMention' | 'textLink' | 'card' | 'fileAttachment'>;
+} | TextMentionTouchableHandlerPayload | UrlTouchableHandlerPayload | FileAttachmentTouchableHandlerPayload);
 export declare type MessageTouchableHandlerPayload<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = TouchableHandlerPayload & {
     actionHandlers?: MessageActionHandlers;
     additionalInfo?: Record<string, unknown>;

package/lib/typescript/components/MessageList/MessageList.d.ts

@@ -11,7 +11,7 @@ import { PaginatedMessageListContextValue } from '../../contexts/paginatedMessag
 import { ThreadContextValue } from '../../contexts/threadContext/ThreadContext';
 import { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
 import type { DefaultStreamChatGenerics } from '../../types/types';
-declare type MessageListPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<AttachmentPickerContextValue, 'closePicker' | 'selectedPicker' | 'setSelectedPicker'> & Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'disabled' | 'EmptyStateIndicator' | 'hideStickyDateHeader' | 'loadChannelAroundMessage' | 'loading' | 'LoadingIndicator' | 'markRead' | 'NetworkDownIndicator' | 'reloadChannel' | 'scrollToFirstUnreadThreshold' | 'setTargetedMessage' | 'StickyHeader' | 'targetedMessage'> & Pick<ChatContextValue<StreamChatGenerics>, 'client'> & Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImages'> & Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'> & Pick<OverlayContextValue, 'overlay'> & Pick<MessagesContextValue<StreamChatGenerics>, 'deletedMessagesVisibilityType' | 'DateHeader' | 'disableTypingIndicator' | 'FlatList' | 'initialScrollToFirstUnreadMessage' | 'InlineDateSeparator' | 'InlineUnreadIndicator' | 'legacyImageViewerSwipeBehaviour' | 'Message' | 'ScrollToBottomButton' | 'MessageSystem' | 'myMessageTheme' | 'TypingIndicator' | 'TypingIndicatorContainer'> & Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> & Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
+declare type MessageListPropsWithContext<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = Pick<AttachmentPickerContextValue, 'closePicker' | 'selectedPicker' | 'setSelectedPicker'> & Pick<ChannelContextValue<StreamChatGenerics>, 'channel' | 'disabled' | 'EmptyStateIndicator' | 'hideStickyDateHeader' | 'loadChannelAroundMessage' | 'loading' | 'LoadingIndicator' | 'markRead' | 'NetworkDownIndicator' | 'reloadChannel' | 'scrollToFirstUnreadThreshold' | 'setTargetedMessage' | 'StickyHeader' | 'targetedMessage'> & Pick<ChatContextValue<StreamChatGenerics>, 'client'> & Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setMessages'> & Pick<PaginatedMessageListContextValue<StreamChatGenerics>, 'hasNoMoreRecentMessagesToLoad' | 'loadMore' | 'loadMoreRecent'> & Pick<OverlayContextValue, 'overlay'> & Pick<MessagesContextValue<StreamChatGenerics>, 'deletedMessagesVisibilityType' | 'DateHeader' | 'disableTypingIndicator' | 'FlatList' | 'initialScrollToFirstUnreadMessage' | 'InlineDateSeparator' | 'InlineUnreadIndicator' | 'legacyImageViewerSwipeBehaviour' | 'Message' | 'ScrollToBottomButton' | 'MessageSystem' | 'myMessageTheme' | 'TypingIndicator' | 'TypingIndicatorContainer'> & Pick<ThreadContextValue<StreamChatGenerics>, 'loadMoreThread' | 'thread'> & Pick<TranslationContextValue, 't' | 'tDateTimeParser'> & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
      * to attach some additional props to underlying FlatList, you can add it to following prop.

package/lib/typescript/contexts/imageGalleryContext/ImageGalleryContext.d.ts

@@ -1,19 +1,18 @@
 import React, { PropsWithChildren } from 'react';
 import type { MessageType } from '../../components/MessageList/hooks/useMessageList';
 import type { DefaultStreamChatGenerics, UnknownType } from '../../types/types';
+declare type SelectedMessage = {
+    messageId?: string;
+    url?: string;
+};
 export declare type ImageGalleryContextValue<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
-    images: MessageType<StreamChatGenerics>[];
-    setImage: React.Dispatch<React.SetStateAction<{
-        messageId?: string;
-        url?: string;
-    } | undefined>>;
-    setImages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
-    image?: {
-        messageId?: string;
-        url?: string;
-    };
+    messages: MessageType<StreamChatGenerics>[];
+    setMessages: React.Dispatch<React.SetStateAction<MessageType<StreamChatGenerics>[]>>;
+    setSelectedMessage: React.Dispatch<React.SetStateAction<SelectedMessage | undefined>>;
+    selectedMessage?: SelectedMessage;
 };
 export declare const ImageGalleryContext: React.Context<ImageGalleryContextValue<DefaultStreamChatGenerics>>;
 export declare const ImageGalleryProvider: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ children, }: PropsWithChildren<UnknownType>) => JSX.Element;
 export declare const useImageGalleryContext: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>() => ImageGalleryContextValue<StreamChatGenerics>;
 export declare const withImageGalleryContext: <P extends UnknownType, StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(Component: React.ComponentType<P>) => React.FC<Omit<P, keyof ImageGalleryContextValue<StreamChatGenerics>>>;
+export {};

package/lib/typescript/index.d.ts

@@ -17,3 +17,5 @@ export { default as trTranslations } from './i18n/tr.json';
 export { default as heTranslations } from './i18n/he.json';
 export { QuickSqliteClient } from './store/QuickSqliteClient';
 export { version } from './version.json';
+import * as OfflineStoreApis from './store/apis';
+export { OfflineStoreApis };

package/lib/typescript/store/QuickSqliteClient.d.ts

@@ -1,4 +1,8 @@
 import type { PreparedQueries } from './types';
+/**
+ * QuickSqliteClient takes care of any direct interaction with sqlite.
+ * This way usage react-native-quick-sqlite package is scoped to a single class/file.
+ */
 export declare class QuickSqliteClient {
     static dbVersion: number;
     static dbName: string;

package/lib/typescript/store/apis/getChannels.d.ts

@@ -1,7 +1,15 @@
-import type { DefaultStreamChatGenerics } from 'src/types/types';
-import type { ChannelAPIResponse, ChannelFilters, ChannelSort } from 'stream-chat';
-export declare const getChannels: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ currentUserId, filters, sort, }: {
+import type { ChannelAPIResponse } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types/types';
+/**
+ * Returns the list of channels with state enriched for given channel ids.
+ *
+ * @param {Object} param
+ * @param {Array} param.channelIds List of channel ids to fetch.
+ * @param {Array} param.currentUserId Id of the current logged in user.
+ *
+ * @returns {Array} Channels with enriched state.
+ */
+export declare const getChannels: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channelIds, currentUserId, }: {
+    channelIds: string[];
     currentUserId: string;
-    filters?: ChannelFilters<StreamChatGenerics> | undefined;
-    sort?: ChannelSort<StreamChatGenerics> | undefined;
 }) => Omit<ChannelAPIResponse<StreamChatGenerics>, "duration">[];

package/lib/typescript/store/apis/getChannelsForFilterSort.d.ts

@@ -0,0 +1,17 @@
+import type { DefaultStreamChatGenerics } from 'src/types/types';
+import type { ChannelAPIResponse, ChannelFilters, ChannelSort } from 'stream-chat';
+/**
+ * Gets the channels from database for given filter and sort query.
+ *
+ * @param {Object} param
+ * @param {string} param.currentUserId Id of current logged in user
+ * @param {Object} param.filters Filters for channels https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=su#query-parameters
+ * @param {Object} param.sort Sort for channels https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=su#query-parameters
+ *
+ * @returns Array of channels corresponding to filters & sort. Returns null if filters + sort query doesn't exist in "channelQueries" table.
+ */
+export declare const getChannelsForFilterSort: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ currentUserId, filters, sort, }: {
+    currentUserId: string;
+    filters?: ChannelFilters<StreamChatGenerics> | undefined;
+    sort?: ChannelSort<StreamChatGenerics> | undefined;
+}) => Omit<ChannelAPIResponse<StreamChatGenerics>, "duration">[] | null;

package/lib/typescript/store/apis/index.d.ts

@@ -0,0 +1,20 @@
+export * from './deleteChannel';
+export * from './deleteMember';
+export * from './deleteMessagesForChannel';
+export * from './deleteReactions';
+export * from './getAllChannelIds';
+export * from './getChannelMessages';
+export * from './getChannels';
+export * from './getChannelsForFilterSort';
+export * from './getLastSyncedAt';
+export * from './getMembers';
+export * from './getReads';
+export * from './updateMessage';
+export * from './updateReaction';
+export * from './upsertChannelData';
+export * from './upsertChannels';
+export * from './upsertCidsForQuery';
+export * from './upsertLastSyncedAt';
+export * from './upsertMembers';
+export * from './upsertMessages';
+export * from './upsertReads';

package/lib/typescript/store/apis/queries/selectChannelIdsForFilterSort.d.ts

@@ -1,6 +1,15 @@
 import type { ChannelFilters, ChannelSort } from 'stream-chat';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
+/**
+ * Gets the channel ids from database for given filter and sort query.
+ *
+ * @param {Object} param
+ * @param {Object} param.filters Filters for channels https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=su#query-parameters
+ * @param {Object} param.sort Sort for channels https://getstream.io/chat/docs/javascript/query_channels/?language=javascript&q=su#query-parameters
+ *
+ * @returns Array of channel ids corresponding to filters & sort. Returns null if filters + sort query doesn't exist in "channelQueries" table.
+ */
 export declare const selectChannelIdsForFilterSort: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ filters, sort, }: {
     filters?: ChannelFilters<StreamChatGenerics> | undefined;
     sort?: ChannelSort<StreamChatGenerics> | undefined;
-}) => string[];
+}) => string[] | null;

package/lib/typescript/{__tests__/utils → test-utils}/BetterSqlite.d.ts

@@ -3,6 +3,6 @@ export class BetterSqlite {
     static closeDB: () => void;
     static getTables: () => any;
     static dropAllTables: () => void;
-    static selectFromTable: (table: any) => any;
+    static selectFromTable: (table: any) => any[];
     db: null;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stream-chat-react-native-core",
   "description": "The official React Native and Expo components for Stream Chat, a service for building chat applications",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.3",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -78,9 +78,9 @@
     "mime-types": "^2.1.34",
     "path": "0.12.7",
     "react-art": "^17.0.2",
-    "react-native-markdown-package": "1.8.1",
+    "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "7.0.0-offline-support.3"
+    "stream-chat": "7.0.0"
   },
   "peerDependencies": {
     "react-native-svg": "^12.1.0"
@@ -94,6 +94,7 @@
     "@babel/preset-env": "7.13.12",
     "@babel/preset-typescript": "7.13.0",
     "@babel/runtime": "^7.12.5",
+    "@types/better-sqlite3": "^7.6.0",
     "@react-native-community/eslint-config": "2.0.0",
     "@react-native-community/eslint-plugin": "1.1.0",
     "@react-native-community/netinfo": "6.0.0",
@@ -138,7 +139,7 @@
     "react-native-builder-bob": "0.18.1",
     "react-native-fs": "2.18.0",
     "react-native-gesture-handler": "2.3.1",
-    "react-native-quick-sqlite": "^3.1.5",
+    "react-native-quick-sqlite": "^4.0.3",
     "react-native-reanimated": "2.7.0",
     "react-native-svg": "12.1.1",
     "react-native-typescript-transformer": "1.2.13",

package/src/__tests__/offline-feature.test.js

@@ -6,8 +6,6 @@ import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 
 import { v4 as uuidv4 } from 'uuid';
 
-import { BetterSqlite } from './utils/BetterSqlite';
-
 import { ChannelList } from '../components/ChannelList/ChannelList';
 import { Chat } from '../components/Chat/Chat';
 import { useChannelsContext } from '../contexts/channelsContext/ChannelsContext';
@@ -36,6 +34,7 @@ import { generateUser } from '../mock-builders/generator/user';
 import { getTestClientWithUser } from '../mock-builders/mock';
 import { convertFilterSortToQuery } from '../store/apis/utils/convertFilterSortToQuery';
 import { tables } from '../store/schema';
+import { BetterSqlite } from '../test-utils/BetterSqlite';
 
 /**
  * We are gonna use following custom UI components for preview and list.

package/src/components/Attachment/FileAttachment.tsx

@@ -103,6 +103,7 @@ const FileAttachmentWithContext = <
       onLongPress={(event) => {
         if (onLongPress) {
           onLongPress({
+            additionalInfo: { attachment },
             emitter: 'fileAttachment',
             event,
           });
@@ -111,6 +112,7 @@ const FileAttachmentWithContext = <
       onPress={(event) => {
         if (onPress) {
           onPress({
+            additionalInfo: { attachment },
             defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,
@@ -120,6 +122,7 @@ const FileAttachmentWithContext = <
       onPressIn={(event) => {
         if (onPressIn) {
           onPressIn({
+            additionalInfo: { attachment },
             defaultHandler: defaultOnPress,
             emitter: 'fileAttachment',
             event,

package/src/components/Attachment/Gallery.tsx

@@ -83,7 +83,7 @@ const styles = StyleSheet.create({
 
 export type GalleryPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     | 'alignment'
@@ -141,9 +141,9 @@ const GalleryWithContext = <
     onPress,
     onPressIn,
     preventPress,
-    setImage,
-    setImages,
+    setMessages,
     setOverlay,
+    setSelectedMessage,
     threadList,
     videos,
     VideoThumbnail,
@@ -256,9 +256,9 @@ const GalleryWithContext = <
                   onPressIn={onPressIn}
                   preventPress={preventPress}
                   rowIndex={rowIndex}
-                  setImage={setImage}
-                  setImages={setImages}
+                  setMessages={setMessages}
                   setOverlay={setOverlay}
+                  setSelectedMessage={setSelectedMessage}
                   thumbnail={thumbnail}
                   VideoThumbnail={VideoThumbnail}
                 />
@@ -296,7 +296,7 @@ type GalleryThumbnailProps<
   | 'ImageLoadingIndicator'
   | 'ImageLoadingFailedIndicator'
 > &
-  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+  Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     'onLongPress' | 'onPress' | 'onPressIn' | 'preventPress'
@@ -322,9 +322,9 @@ const GalleryThumbnail = <
   onPressIn,
   preventPress,
   rowIndex,
-  setImage,
-  setImages,
+  setMessages,
   setOverlay,
+  setSelectedMessage,
   thumbnail,
   VideoThumbnail,
 }: GalleryThumbnailProps<StreamChatGenerics>) => {
@@ -342,11 +342,11 @@ const GalleryThumbnail = <
       // Added if-else to keep the logic readable, instead of DRY.
       // if - legacyImageViewerSwipeBehaviour is disabled
       // else - legacyImageViewerSwipeBehaviour is enabled
-      setImages([message]);
-      setImage({ messageId: message.id, url: thumbnail.url });
+      setMessages([message]);
+      setSelectedMessage({ messageId: message.id, url: thumbnail.url });
       setOverlay('gallery');
     } else if (legacyImageViewerSwipeBehaviour) {
-      setImage({ messageId: message?.id, url: thumbnail.url });
+      setSelectedMessage({ messageId: message?.id, url: thumbnail.url });
       setOverlay('gallery');
     }
   };
@@ -580,23 +580,25 @@ export const Gallery = <
     ImageLoadingFailedIndicator: PropImageLoadingFailedIndicator,
     ImageLoadingIndicator: PropImageLoadingIndicator,
     images: propImages,
+    message: propMessage,
     onLongPress: propOnLongPress,
     onPress: propOnPress,
     onPressIn: propOnPressIn,
     preventPress: propPreventPress,
-    setImage: propSetImage,
     setOverlay: propSetOverlay,
+    setSelectedMessage: propSetSelectedMessage,
     threadList: propThreadList,
     videos: propVideos,
     VideoThumbnail: PropVideoThumbnail,
   } = props;
 
-  const { setImage: contextSetImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages, setSelectedMessage: contextSetSelectedMessage } =
+    useImageGalleryContext<StreamChatGenerics>();
   const {
     alignment: contextAlignment,
     groupStyles: contextGroupStyles,
     images: contextImages,
-    message,
+    message: contextMessage,
     onLongPress: contextOnLongPress,
     onPress: contextOnPress,
     onPressIn: contextOnPressIn,
@@ -615,6 +617,7 @@ export const Gallery = <
 
   const images = propImages || contextImages;
   const videos = propVideos || contextVideos;
+  const message = propMessage || contextMessage;
 
   if (!images.length && !videos.length) return null;
 
@@ -626,7 +629,7 @@ export const Gallery = <
   const onPress = propOnPress || contextOnPress;
   const preventPress =
     typeof propPreventPress === 'boolean' ? propPreventPress : contextPreventPress;
-  const setImage = propSetImage || contextSetImage;
+  const setSelectedMessage = propSetSelectedMessage || contextSetSelectedMessage;
   const setOverlay = propSetOverlay || contextSetOverlay;
   const threadList = propThreadList || contextThreadList;
   const VideoThumbnail = PropVideoThumbnail || ContextVideoThumnbnail;
@@ -651,9 +654,9 @@ export const Gallery = <
         onPress,
         onPressIn,
         preventPress,
-        setImage,
-        setImages,
+        setMessages,
         setOverlay,
+        setSelectedMessage,
         threadList,
         videos,
         VideoThumbnail,

package/src/components/Attachment/Giphy.tsx

@@ -134,7 +134,7 @@ const styles = StyleSheet.create({
 
 export type GiphyPropsWithContext<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setImage' | 'setImages'> &
+> = Pick<ImageGalleryContextValue<StreamChatGenerics>, 'setSelectedMessage' | 'setMessages'> &
   Pick<
     MessageContextValue<StreamChatGenerics>,
     | 'handleAction'
@@ -173,9 +173,9 @@ const GiphyWithContext = <
     onPress,
     onPressIn,
     preventPress,
-    setImage,
-    setImages,
+    setMessages,
     setOverlay,
+    setSelectedMessage,
   } = props;
 
   const { actions, giphy: giphyData, image_url, thumb_url, title, type } = attachment;
@@ -210,8 +210,8 @@ const GiphyWithContext = <
   const giphyDimensions: { height?: number; width?: number } = {};
 
   const defaultOnPress = () => {
-    setImages([message]);
-    setImage({ messageId: message.id, url: uri });
+    setMessages([message]);
+    setSelectedMessage({ messageId: message.id, url: uri });
     setOverlay('gallery');
   };
 
@@ -447,7 +447,7 @@ export const Giphy = <
   const { handleAction, isMyMessage, message, onLongPress, onPress, onPressIn, preventPress } =
     useMessageContext<StreamChatGenerics>();
   const { additionalTouchableProps, giphyVersion } = useMessagesContext<StreamChatGenerics>();
-  const { setImage, setImages } = useImageGalleryContext<StreamChatGenerics>();
+  const { setMessages, setSelectedMessage } = useImageGalleryContext<StreamChatGenerics>();
   const { setOverlay } = useOverlayContext();
 
   const {
@@ -472,9 +472,9 @@ export const Giphy = <
         onPress,
         onPressIn,
         preventPress,
-        setImage,
-        setImages,
+        setMessages,
         setOverlay,
+        setSelectedMessage,
       }}
       {...props}
     />

package/src/components/Attachment/utils/getGiphyMimeType.ts

@@ -0,0 +1,13 @@
+/**
+ *
+ * @param giphyUrl The giphy attachment url
+ * @returns mimeType for the giphy attachment
+ */
+export function getGiphyMimeType(giphyUrl: string): string {
+  if (giphyUrl.includes('.mp4')) {
+    return 'video/mp4';
+  } else if (giphyUrl.includes('.webp')) {
+    return 'image/webp';
+  }
+  return 'image/gif';
+}

package/src/components/Channel/Channel.tsx

@@ -577,7 +577,7 @@ const ChannelWithContext = <
   const channelId = channel?.id || '';
   useEffect(() => {
     const initChannel = () => {
-      if (!channel || !shouldSyncChannel || channel.staticState) return;
+      if (!channel || !shouldSyncChannel || channel.offlineMode) return;
       /**
        * Loading channel at first unread message  requires channel to be initialized in the first place,
        * since we use read state on channel to decide what offset to load channel at.

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

@@ -246,6 +246,34 @@ describe('ChannelList', () => {
         });
       });
 
+      it('should add channel to top if channel is hidden from the list', async () => {
+        const { getAllByRole, getByTestId, getByText } = render(
+          <Chat client={chatClient}>
+            <ChannelList {...props} />
+          </Chat>,
+        );
+
+        await waitFor(() => expect(getByTestId('channel-list')).toBeTruthy());
+        act(() => dispatchChannelHiddenEvent(chatClient, testChannel3.channel));
+
+        const newItems = getAllByRole('list-item');
+        await waitFor(() => {
+          expect(newItems).toHaveLength(2);
+        });
+
+        const newMessage = sendNewMessageOnChannel3();
+
+        await waitFor(() => {
+          expect(getByText(newMessage.text)).toBeTruthy();
+        });
+
+        const items = getAllByRole('list-item');
+
+        await waitFor(() => {
+          expect(within(items[0]).getByText(newMessage.text)).toBeTruthy();
+        });
+      });
+
       it('should not alter order if `lockChannelOrder` prop is true', async () => {
         const { getAllByRole, getByTestId, getByText } = render(
           <Chat client={chatClient}>

package/src/components/ChannelList/hooks/listeners/useNewMessage.ts

@@ -24,11 +24,24 @@ export const useNewMessage = <
   useEffect(() => {
     const handleEvent = (event: Event<StreamChatGenerics>) => {
       setChannels((channels) => {
-        if (!lockChannelOrder && event.cid) {
-          return moveChannelUp<StreamChatGenerics>({
-            channels,
-            cid: event.cid,
-          });
+        if (!lockChannelOrder && event.cid && event.channel_type && event.channel_id) {
+          const targetChannelIndex = channels.findIndex((c) => c.cid === event.cid);
+
+          if (targetChannelIndex >= 0) {
+            return moveChannelUp<StreamChatGenerics>({
+              channels,
+              cid: event.cid,
+            });
+          }
+
+          // If channel doesn't exist in existing list, check in activeChannels as well.
+          // It may happen that channel was hidden using channel.hide(). In that case
+          // We remove it from `channels` state, but its still being watched and exists in client.activeChannels.
+          const channel = client.channel(event.channel_type, event.channel_id);
+
+          if (channel.initialized) {
+            return [channel, ...channels];
+          }
         }
 
         return [...channels];

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

@@ -6,7 +6,7 @@ import { useActiveChannelsRefContext } from '../../../contexts/activeChannelsRef
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useIsMountedRef } from '../../../hooks/useIsMountedRef';
 
-import { getChannels } from '../../../store/apis/getChannels';
+import { getChannelsForFilterSort } from '../../../store/apis/getChannelsForFilterSort';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
 import { ONE_SECOND_IN_MS } from '../../../utils/date';
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
@@ -44,8 +44,10 @@ export const usePaginatedChannels = <
   sort = {},
 }: Parameters<StreamChatGenerics>) => {
   const { client } = useChatContext<StreamChatGenerics>();
-
-  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>([]);
+  const initialChannelsStateRef = useRef([]);
+  const [channels, setChannels] = useState<Channel<StreamChatGenerics>[]>(
+    initialChannelsStateRef.current,
+  );
   const [staticChannelsActive, setStaticChannelsActive] = useState<boolean>(true);
   const activeChannels = useActiveChannelsRefContext();
 
@@ -181,12 +183,19 @@ export const usePaginatedChannels = <
       if (!client?.user?.id) return;
       if (enableOfflineSupport) {
         try {
-          const channelsFromDB = getChannels({ currentUserId: client.user.id, filters, sort });
-          setChannels(
-            client.hydrateActiveChannels(channelsFromDB, {
-              staticState: true,
-            }),
-          );
+          const channelsFromDB = getChannelsForFilterSort({
+            currentUserId: client.user.id,
+            filters,
+            sort,
+          });
+
+          if (channelsFromDB) {
+            setChannels(
+              client.hydrateActiveChannels(channelsFromDB, {
+                offlineMode: true,
+              }),
+            );
+          }
         } catch (e) {
           console.warn('Failed to get channels from database: ', e);
         }
@@ -205,7 +214,7 @@ export const usePaginatedChannels = <
     loadingChannels:
       activeQueryType === 'queryLocalDB'
         ? true
-        : activeQueryType === 'reload' && channels.length === 0,
+        : activeQueryType === 'reload' && channels === initialChannelsStateRef.current,
     loadingNextPage: activeQueryType === 'loadChannels',
     loadNextPage,
     refreshing: activeQueryType === 'refresh',

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -78,9 +78,12 @@ const ChannelPreviewWithContext = <
     };
 
     const handleUpdatedOrDeletedMessage = (event: Event<StreamChatGenerics>) => {
-      if (event.message?.id === lastMessage?.id) {
-        setLastMessage(event.message);
-      }
+      setLastMessage((prevLastMessage) => {
+        if (prevLastMessage?.id === event.message?.id) {
+          return event.message;
+        }
+        return prevLastMessage;
+      });
     };
 
     const listeners = [