stream-chat-react-native-core 5.25.0-beta.6 → 5.25.0

package/lib/typescript/native.d.ts

@@ -2,26 +2,26 @@ import type React from 'react';
 import { FlatList as DefaultFlatList, StyleProp, ViewStyle } from 'react-native';
 import type { NetInfoSubscription } from '@react-native-community/netinfo';
 import type { Asset, File } from './types/types';
-declare type CompressImage = ({ compressImageQuality, height, uri, width, }: {
+type CompressImage = ({ compressImageQuality, height, uri, width, }: {
     compressImageQuality: number;
     height: number;
     uri: string;
     width: number;
 }) => Promise<string> | never;
 export declare let compressImage: CompressImage;
-declare type DeleteFile = ({ uri }: {
+type DeleteFile = ({ uri }: {
     uri: string;
 }) => Promise<boolean> | never;
 export declare let deleteFile: DeleteFile;
-declare type GetLocalAssetUri = (uriOrAssetId: string) => Promise<string | undefined> | never;
+type GetLocalAssetUri = (uriOrAssetId: string) => Promise<string | undefined> | never;
 export declare let getLocalAssetUri: GetLocalAssetUri;
-declare type OniOS14LibrarySelectionChange = (callback: () => void) => {
+type OniOS14LibrarySelectionChange = (callback: () => void) => {
     unsubscribe: () => void;
 };
 export declare let oniOS14GalleryLibrarySelectionChange: OniOS14LibrarySelectionChange;
-declare type iOS14RefreshGallerySelection = () => Promise<void>;
+type iOS14RefreshGallerySelection = () => Promise<void>;
 export declare let iOS14RefreshGallerySelection: iOS14RefreshGallerySelection;
-declare type GetPhotos = ({ after, first }: {
+type GetPhotos = ({ after, first }: {
     first: number;
     after?: string;
 }) => Promise<{
@@ -33,34 +33,34 @@ declare type GetPhotos = ({ after, first }: {
     iOSLimited: boolean;
 }> | never;
 export declare let getPhotos: GetPhotos;
-declare type NetInfo = {
+type NetInfo = {
     addEventListener: (listener: (isConnected: boolean) => void) => NetInfoSubscription | never;
     fetch: (requestedInterface?: string | undefined) => Promise<boolean> | never;
 };
 export declare let FlatList: typeof DefaultFlatList;
 export declare let NetInfo: NetInfo;
-declare type PickDocument = ({ maxNumberOfFiles }: {
+type PickDocument = ({ maxNumberOfFiles }: {
     maxNumberOfFiles?: number;
 }) => Promise<{
     cancelled: boolean;
     assets?: File[];
 }> | never;
 export declare let pickDocument: PickDocument;
-declare type SaveFileOptions = {
+type SaveFileOptions = {
     fileName: string;
     fromUrl: string;
 };
-declare type SaveFile = (options: SaveFileOptions) => Promise<string> | never;
+type SaveFile = (options: SaveFileOptions) => Promise<string> | never;
 export declare let saveFile: SaveFile;
-declare type SetClipboardString = (text: string) => Promise<void> | never;
+type SetClipboardString = (text: string) => Promise<void> | never;
 export declare let setClipboardString: SetClipboardString;
-declare type ShareOptions = {
+type ShareOptions = {
     type?: string;
     url?: string;
 };
-declare type ShareImage = (options: ShareOptions) => Promise<boolean> | never;
+type ShareImage = (options: ShareOptions) => Promise<boolean> | never;
 export declare let shareImage: ShareImage;
-declare type Photo = (Omit<Asset, 'source'> & {
+type Photo = (Omit<Asset, 'source'> & {
     cancelled: false;
     source: 'camera';
     askToOpenSettings?: boolean;
@@ -68,14 +68,14 @@ declare type Photo = (Omit<Asset, 'source'> & {
     cancelled: true;
     askToOpenSettings?: boolean;
 };
-declare type TakePhoto = (options: {
+type TakePhoto = (options: {
     compressImageQuality?: number;
 }) => Promise<Photo> | never;
 export declare let takePhoto: TakePhoto;
-declare type HapticFeedbackMethod = 'impactHeavy' | 'impactLight' | 'impactMedium' | 'notificationError' | 'notificationSuccess' | 'notificationWarning' | 'selection';
-declare type TriggerHaptic = (method: HapticFeedbackMethod) => void | never;
+type HapticFeedbackMethod = 'impactHeavy' | 'impactLight' | 'impactMedium' | 'notificationError' | 'notificationSuccess' | 'notificationWarning' | 'selection';
+type TriggerHaptic = (method: HapticFeedbackMethod) => void | never;
 export declare let triggerHaptic: TriggerHaptic;
-export declare type PlaybackStatus = {
+export type PlaybackStatus = {
     didJustFinish: boolean;
     durationMillis: number;
     error: string;
@@ -85,7 +85,7 @@ export declare type PlaybackStatus = {
     isPlaying: boolean;
     positionMillis: number;
 };
-export declare type AVPlaybackStatusToSet = {
+export type AVPlaybackStatusToSet = {
     isLooping: boolean;
     isMuted: boolean;
     positionMillis: number;
@@ -96,7 +96,7 @@ export declare type AVPlaybackStatusToSet = {
     volume: number;
 };
 export declare let SDK: string;
-export declare type SoundOptions = {
+export type SoundOptions = {
     basePathOrCallback?: string;
     callback?: () => void;
     filenameOrFile?: string;
@@ -106,7 +106,7 @@ export declare type SoundOptions = {
         uri: string;
     };
 };
-export declare type SoundReturnType = {
+export type SoundReturnType = {
     paused: boolean;
     testID: string;
     getDuration?: () => number;
@@ -133,19 +133,19 @@ export declare type SoundReturnType = {
     unloadAsync?: () => void;
     uri?: string;
 };
-export declare type SoundType = {
+export type SoundType = {
     initializeSound: (source?: {
         uri: string;
     }, initialStatus?: Partial<AVPlaybackStatusToSet>, onPlaybackStatusUpdate?: (playbackStatus: PlaybackStatus) => void) => Promise<SoundReturnType | null>;
     Player: React.ComponentType<SoundReturnType> | null;
 };
 export declare let Sound: SoundType;
-export declare type VideoProgressData = {
+export type VideoProgressData = {
     currentTime: number;
     seekableDuration: number;
     playableDuration?: number;
 };
-export declare type VideoPayloadData = {
+export type VideoPayloadData = {
     duration: number;
     audioTracks?: {
         index: number;
@@ -173,7 +173,7 @@ export declare type VideoPayloadData = {
         width: number;
     }[];
 };
-export declare type VideoType = {
+export type VideoType = {
     paused: boolean;
     testID: string;
     uri: string;
@@ -195,7 +195,7 @@ export declare type VideoType = {
     style?: StyleProp<ViewStyle>;
 };
 export declare let Video: React.ComponentType<VideoType>;
-declare type Handlers = {
+type Handlers = {
     compressImage?: CompressImage;
     deleteFile?: DeleteFile;
     FlatList?: typeof DefaultFlatList;

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

@@ -13,7 +13,7 @@ export declare class QuickSqliteClient {
     static openDB: () => void;
     static closeDB: () => void;
     static executeSqlBatch: (queries: PreparedQueries[]) => void;
-    static executeSql: (query: string, params?: string[] | undefined) => any[];
+    static executeSql: (query: string, params?: string[]) => any[];
     static dropTables: () => void;
     static deleteDatabase: () => boolean;
     static initializeDatabase: () => void;

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

@@ -2,8 +2,8 @@ import type { ChannelAPIResponse, ChannelFilters, ChannelSort } from 'stream-cha
 import type { PreparedQueries } from '../types';
 export declare const upsertChannels: ({ channels, filters, flush, isLatestMessagesSet, sort, }: {
     channels: ChannelAPIResponse[];
-    filters?: ChannelFilters<import("stream-chat").DefaultGenerics> | undefined;
+    filters?: ChannelFilters | undefined;
     flush?: boolean | undefined;
     isLatestMessagesSet?: boolean | undefined;
-    sort?: ChannelSort<import("stream-chat").DefaultGenerics> | undefined;
+    sort?: ChannelSort | undefined;
 }) => PreparedQueries[];

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

@@ -1,7 +1,7 @@
 import type { ChannelFilters, ChannelSort } from 'stream-chat';
 export declare const upsertCidsForQuery: ({ cids, filters, flush, sort, }: {
     cids: string[];
-    filters?: ChannelFilters<import("stream-chat").DefaultGenerics> | undefined;
+    filters?: ChannelFilters | undefined;
     flush?: boolean | undefined;
-    sort?: ChannelSort<import("stream-chat").DefaultGenerics> | undefined;
+    sort?: ChannelSort | undefined;
 }) => import("../types").PreparedQueries[];

package/lib/typescript/store/mappers/mapDateTimeToStorable.d.ts

@@ -1 +1 @@
-export declare const mapDateTimeToStorable: (datetime?: string | Date | undefined) => string;
+export declare const mapDateTimeToStorable: (datetime?: string | Date) => string;

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

@@ -1,7 +1,7 @@
 import type { MessageLabel, Role } from 'stream-chat';
 import type { PendingTaskTypes } from './types';
 import type { ValueOf } from '../types/types';
-declare type Tables = {
+type Tables = {
     [P in keyof Schema]: {
         columns: {
             [K in keyof Schema[P]]: string;
@@ -21,7 +21,7 @@ declare type Tables = {
     };
 };
 export declare const tables: Tables;
-export declare type Schema = {
+export type Schema = {
     channelQueries: {
         cids: string;
         id: string;

package/lib/typescript/store/sqlite-utils/appendOrderByClause.d.ts

@@ -1,3 +1,3 @@
 import type { Schema } from '../schema';
-import type { PreparedQueries } from '../types';
+import type { PreparedQueries, TableColumnNames } from '../types';
 export declare const appendOrderByClause: <T extends keyof Schema>(selectQuery: string, orderBy?: Partial<{ [k in keyof Schema[T]]: 1 | -1; }> | undefined) => PreparedQueries;

package/lib/typescript/store/sqlite-utils/appendWhereCluase.d.ts

@@ -1,3 +1,3 @@
 import type { Schema } from '../schema';
-import type { PreparedQueries, TableColumnValue } from '../types';
+import type { PreparedQueries, TableColumnNames, TableColumnValue } from '../types';
 export declare const appendWhereClause: <T extends keyof Schema>(selectQuery: string, whereCondition?: Partial<{ [k in keyof Schema[T]]: TableColumnValue | TableColumnValue[]; }> | undefined) => PreparedQueries;

package/lib/typescript/store/sqlite-utils/createUpsertQuery.d.ts

@@ -1,5 +1,5 @@
 import { Schema } from '../schema';
-import type { PreparedQueries, TableRow } from '../types';
+import type { PreparedQueries, TableColumnNames, TableRow } from '../types';
 /**
  * Creates a simple upsert query for sqlite.
  *

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

@@ -1,19 +1,19 @@
 import type { Channel, StreamChat } from 'stream-chat';
 import type { Schema } from './schema';
-export declare type Table = keyof Schema;
-export declare type TableRow<T extends Table> = Schema[T];
-export declare type TableRowJoinedUser<T extends Table> = Schema[T] & {
+export type Table = keyof Schema;
+export type TableRow<T extends Table> = Schema[T];
+export type TableRowJoinedUser<T extends Table> = Schema[T] & {
     user: TableRow<'users'>;
 };
-export declare type TableColumnNames<T extends Table> = keyof Schema[T];
-export declare type TableColumnValue = string | boolean | number | undefined;
-export declare type PreparedQueries = [string] | [string, Array<any>];
-export declare type PendingTaskTypes = {
+export type TableColumnNames<T extends Table> = keyof Schema[T];
+export type TableColumnValue = string | boolean | number | undefined;
+export type PreparedQueries = [string] | [string, Array<any>];
+export type PendingTaskTypes = {
     deleteMessage: 'delete-message';
     deleteReaction: 'delete-reaction';
     sendReaction: 'send-reaction';
 };
-export declare type PendingTask = {
+export type PendingTask = {
     channelId: string;
     channelType: string;
     messageId: string;

package/lib/typescript/types/types.d.ts

@@ -1,6 +1,6 @@
 import type { ExtendableGenerics, LiteralStringForUnion } from 'stream-chat';
 import type { FileStateValue } from '../utils/utils';
-export declare type Asset = {
+export type Asset = {
     duration: number;
     height: number;
     name: string;
@@ -11,7 +11,7 @@ export declare type Asset = {
     id?: string;
     size?: number;
 };
-export declare type File = {
+export type File = {
     name: string;
     duration?: number;
     id?: string;
@@ -19,7 +19,7 @@ export declare type File = {
     size?: number;
     uri?: string;
 };
-export declare type FileUpload = {
+export type FileUpload = {
     file: File;
     id: string;
     state: FileStateValue;
@@ -29,7 +29,7 @@ export declare type FileUpload = {
     thumb_url?: string;
     url?: string;
 };
-export declare type ImageUpload = {
+export type ImageUpload = {
     file: Partial<Asset>;
     id: string;
     state: FileStateValue;
@@ -37,7 +37,7 @@ export declare type ImageUpload = {
     url?: string;
     width?: number;
 };
-export declare type DefaultAttachmentType = UnknownType & {
+export type DefaultAttachmentType = UnknownType & {
     file_size?: number;
     mime_type?: string;
     originalFile?: File;
@@ -59,6 +59,6 @@ export interface DefaultStreamChatGenerics extends ExtendableGenerics {
     reactionType: UnknownType;
     userType: DefaultUserType;
 }
-export declare type UnknownType = Record<string, unknown>;
-export declare type ValueOf<T> = T[keyof T];
+export type UnknownType = Record<string, unknown>;
+export type ValueOf<T> = T[keyof T];
 export {};

package/lib/typescript/utils/StreamChatRN.d.ts

@@ -1,4 +1,4 @@
-declare type StreamConfig = {
+type StreamConfig = {
     resizableCDNHosts: string[];
 };
 /**

package/lib/typescript/utils/Streami18n.d.ts

@@ -20,7 +20,7 @@ import 'dayjs/locale/tr';
  */
 import 'dayjs/locale/en';
 import type { DefaultStreamChatGenerics } from '../types/types';
-declare type Options = {
+type Options = {
     DateTimeParser?: typeof Dayjs | typeof moment;
     dayjsLocaleConfigForLanguage?: Partial<ILocale>;
     debug?: boolean;
@@ -29,7 +29,7 @@ declare type Options = {
     logger?: (msg?: string) => void;
     translationsForLanguage?: Partial<typeof enTranslations>;
 };
-declare type I18NextConfig = {
+type I18NextConfig = {
     debug: boolean;
     fallbackLng: false | FallbackLng;
     interpolation: {

package/lib/typescript/utils/compressImage.d.ts

@@ -5,4 +5,4 @@ import type { Asset } from '../types/types';
  * @param compressImageQuality
  * @returns string
  */
-export declare const compressedImageURI: (image: Partial<Asset>, compressImageQuality?: number | undefined) => Promise<string>;
+export declare const compressedImageURI: (image: Partial<Asset>, compressImageQuality?: number) => Promise<string>;

package/lib/typescript/utils/getResizedImageUrl.d.ts

@@ -1,4 +1,4 @@
-export declare type GetResizedImageUrlParams = {
+export type GetResizedImageUrlParams = {
     url: string;
     height?: string | number;
     resize?: 'clip' | 'crop' | 'fill' | 'scale';

package/lib/typescript/utils/utils.d.ts

@@ -8,16 +8,16 @@ import { Emoji } from '../emoji-data';
 import type { IconProps } from '../icons/utils/base';
 import type { TableRowJoinedUser } from '../store/types';
 import type { DefaultStreamChatGenerics, ValueOf } from '../types/types';
-export declare type ReactionData = {
+export type ReactionData = {
     Icon: React.FC<IconProps>;
     type: string;
 };
 export declare const FileState: Readonly<{
-    FINISHED: string;
-    NOT_SUPPORTED: string;
-    UPLOAD_FAILED: string;
-    UPLOADED: string;
-    UPLOADING: string;
+    FINISHED: "finished";
+    NOT_SUPPORTED: "not_supported";
+    UPLOAD_FAILED: "upload_failed";
+    UPLOADED: "uploaded";
+    UPLOADING: "uploading";
 }>;
 export declare const ProgressIndicatorTypes: {
     IN_PROGRESS: 'in_progress';
@@ -30,8 +30,8 @@ export declare const MessageStatusTypes: {
     RECEIVED: string;
     SENDING: string;
 };
-export declare type FileStateValue = typeof FileState[keyof typeof FileState];
-declare type Progress = ValueOf<typeof ProgressIndicatorTypes>;
+export type FileStateValue = typeof FileState[keyof typeof FileState];
+type Progress = ValueOf<typeof ProgressIndicatorTypes>;
 export declare const getIndicatorTypeForFileState: (fileState: FileStateValue, enableOfflineSupport: boolean) => Progress | null;
 /**
  * Utility to check if the message is a Blocked message.
@@ -55,8 +55,8 @@ export declare const queryUsersDebounced: DebouncedFunc<(<StreamChatGenerics ext
 export declare const isCommandTrigger: (trigger: Trigger) => trigger is "/";
 export declare const isEmojiTrigger: (trigger: Trigger) => trigger is ":";
 export declare const isMentionTrigger: (trigger: Trigger) => trigger is "@";
-export declare type Trigger = '/' | '@' | ':';
-export declare type TriggerSettings<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type Trigger = '/' | '@' | ':';
+export type TriggerSettings<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     '/'?: {
         dataProvider: (query: CommandResponse<StreamChatGenerics>['name'], text: string, onReady?: (data: CommandResponse<StreamChatGenerics>[], q: CommandResponse<StreamChatGenerics>['name']) => void, options?: {
             limit?: number;
@@ -92,17 +92,17 @@ export declare type TriggerSettings<StreamChatGenerics extends DefaultStreamChat
         type: SuggestionComponentType;
     };
 };
-export declare type ACITriggerSettingsParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
+export type ACITriggerSettingsParams<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = {
     channel: Channel<StreamChatGenerics>;
     client: StreamChat<StreamChatGenerics>;
     onMentionSelectItem: (item: SuggestionUser<StreamChatGenerics>) => void;
     emojiSearchIndex?: EmojiSearchIndex;
 };
-export declare type QueryUsersFunction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (client: StreamChat<StreamChatGenerics>, query: SuggestionUser<StreamChatGenerics>['name'], onReady?: (users: SuggestionUser<StreamChatGenerics>[]) => void, options?: {
+export type QueryUsersFunction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (client: StreamChat<StreamChatGenerics>, query: SuggestionUser<StreamChatGenerics>['name'], onReady?: (users: SuggestionUser<StreamChatGenerics>[]) => void, options?: {
     limit?: number;
     mentionAllAppUsersQuery?: MentionAllAppUsersQuery<StreamChatGenerics>;
 }) => Promise<void>;
-export declare type QueryMembersFunction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (channel: Channel<StreamChatGenerics>, query: SuggestionUser<StreamChatGenerics>['name'], onReady?: (users: SuggestionUser<StreamChatGenerics>[]) => void, options?: {
+export type QueryMembersFunction<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> = (channel: Channel<StreamChatGenerics>, query: SuggestionUser<StreamChatGenerics>['name'], onReady?: (users: SuggestionUser<StreamChatGenerics>[]) => void, options?: {
     limit?: number;
 }) => Promise<void>;
 /**
@@ -122,7 +122,7 @@ export declare const defaultEmojiSearchIndex: EmojiSearchIndex;
  */
 export declare const ACITriggerSettings: <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>({ channel, client, emojiSearchIndex, onMentionSelectItem, }: ACITriggerSettingsParams<StreamChatGenerics>) => TriggerSettings<StreamChatGenerics>;
 export declare const makeImageCompatibleUrl: (url: string) => string;
-export declare const getUrlWithoutParams: (url?: string | undefined) => string | undefined;
+export declare const getUrlWithoutParams: (url?: string) => string | undefined;
 export declare const isLocalUrl: (url: string) => boolean;
 export declare const generateRandomId: (a?: string) => string;
 export declare const hasOnlyEmojis: (text: string) => boolean;

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.25.0-beta.6",
+  "version": "5.25.0",
   "author": {
     "company": "Stream.io Inc",
     "name": "Stream.io Inc"
@@ -81,7 +81,7 @@
     "path": "0.12.7",
     "react-native-markdown-package": "1.8.2",
     "react-native-url-polyfill": "^1.3.0",
-    "stream-chat": "8.15.0"
+    "stream-chat": "8.17.0"
   },
   "peerDependencies": {
     "react-native-quick-sqlite": ">=5.1.0",
@@ -150,12 +150,8 @@
     "react-native-svg": "12.1.1",
     "react-native-typescript-transformer": "1.2.13",
     "react-test-renderer": "17.0.2",
-    "typescript": "4.4.3",
+    "typescript": "5.0.4",
     "uuid": "^8.3.2",
     "webpack": "4.44.2"
-  },
-  "resolutions": {
-    "@types/react": "17.0.5",
-    "@types/react-native": "0.67.3"
   }
 }

package/src/components/Channel/Channel.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
+import React, { PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { KeyboardAvoidingViewProps, StyleSheet, Text, View } from 'react-native';
 
 import debounce from 'lodash/debounce';
@@ -1472,8 +1472,8 @@ const ChannelWithContext = <
       text,
       type: 'regular',
       user: {
-        id: client.userID,
         ...messageUser,
+        id: client.userID,
       },
       ...extraFields,
     } as unknown as MessageResponse<StreamChatGenerics>;
@@ -2093,6 +2093,11 @@ const ChannelWithContext = <
     }
   };
 
+  const disabledValue = useMemo(
+    () => !!channel?.data?.frozen && disableIfFrozenChannel,
+    [channel.data?.frozen, disableIfFrozenChannel],
+  );
+
   const ownCapabilitiesContext = useCreateOwnCapabilitiesContext({
     channel,
     overrideCapabilities: overrideOwnCapabilities,
@@ -2100,7 +2105,7 @@ const ChannelWithContext = <
 
   const channelContext = useCreateChannelContext({
     channel,
-    disabled: !!channel?.data?.frozen && disableIfFrozenChannel,
+    disabled: disabledValue,
     EmptyStateIndicator,
     enableMessageGroupingByUser,
     enforceUniqueReaction,
@@ -2147,6 +2152,7 @@ const ChannelWithContext = <
     CommandsButton,
     compressImageQuality,
     CooldownTimer,
+    disabled: disabledValue,
     doDocUploadRequest,
     doImageUploadRequest,
     editing,

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

@@ -16,6 +16,7 @@ export const useCreateInputMessageInputContext = <
   CommandsButton,
   compressImageQuality,
   CooldownTimer,
+  disabled,
   doDocUploadRequest,
   doImageUploadRequest,
   editing,
@@ -72,6 +73,7 @@ export const useCreateInputMessageInputContext = <
       CommandsButton,
       compressImageQuality,
       CooldownTimer,
+      disabled,
       doDocUploadRequest,
       doImageUploadRequest,
       editing,
@@ -105,7 +107,15 @@ export const useCreateInputMessageInputContext = <
       ShowThreadMessageInChannelButton,
       UploadProgressIndicator,
     }),
-    [compressImageQuality, channelId, editingDep, initialValue, maxMessageLength, quotedMessageId],
+    [
+      compressImageQuality,
+      channelId,
+      disabled,
+      editingDep,
+      initialValue,
+      maxMessageLength,
+      quotedMessageId,
+    ],
   );
 
   return inputMessageInputContext;

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import type { Channel } from 'stream-chat';
 
@@ -18,15 +18,33 @@ export const useCreateOwnCapabilitiesContext = <
   channel: Channel<StreamChatGenerics>;
   overrideCapabilities?: Partial<OwnCapabilitiesContextValue>;
 }) => {
+  const [own_capabilities, setOwnCapabilites] = useState(
+    JSON.stringify(channel.data?.own_capabilities as Array<string>),
+  );
   const overrideCapabilitiesStr = overrideCapabilities
     ? JSON.stringify(Object.values(overrideCapabilities))
     : null;
-  const ownCapabilitiesStr = channel?.data?.own_capabilities
-    ? JSON.stringify(Object.values(channel?.data?.own_capabilities as Array<string>))
-    : null;
+
+  // Effect to watch for changes in channel.data?.own_capabilities and update the own_capabilties state accordingly.
+  useEffect(() => {
+    setOwnCapabilites(JSON.stringify(channel.data?.own_capabilities as Array<string>));
+  }, [channel.data?.own_capabilities]);
+
+  // Effect to listen to the `capabilities.changed` event.
+  useEffect(() => {
+    const listener = channel.on('capabilities.changed', (event) => {
+      if (event.own_capabilities) {
+        setOwnCapabilites(JSON.stringify(event.own_capabilities as Array<string>));
+      }
+    });
+
+    return () => {
+      listener.unsubscribe();
+    };
+  }, []);
 
   const ownCapabilitiesContext: OwnCapabilitiesContextValue = useMemo(() => {
-    const capabilities = (channel?.data?.own_capabilities || []) as Array<string>;
+    const capabilities = (own_capabilities || []) as Array<string>;
     const ownCapabilitiesContext = Object.keys(allOwnCapabilities).reduce(
       (result, capability) => ({
         ...result,
@@ -38,7 +56,7 @@ export const useCreateOwnCapabilitiesContext = <
     );
 
     return ownCapabilitiesContext;
-  }, [channel.id, overrideCapabilitiesStr, ownCapabilitiesStr]);
+  }, [channel.id, overrideCapabilitiesStr, own_capabilities]);
 
   return ownCapabilitiesContext;
 };

package/src/components/ChannelPreview/ChannelPreview.tsx

@@ -18,7 +18,7 @@ export type ChannelPreviewPropsWithContext<
 > = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
   Pick<ChannelsContextValue<StreamChatGenerics>, 'Preview' | 'forceUpdate'> & {
     /**
-     * The previewed channel
+     * Instance of Channel from stream-chat package.
      */
     channel: Channel<StreamChatGenerics>;
   };

package/src/components/ChannelPreview/ChannelPreviewMessage.tsx

@@ -18,6 +18,9 @@ const styles = StyleSheet.create({
 export type ChannelPreviewMessageProps<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 > = {
+  /**
+   * Latest message on a channel, formatted for preview.
+   */
   latestMessagePreview: LatestMessagePreview<StreamChatGenerics>;
 };
 

package/src/components/ChannelPreview/ChannelPreviewMessenger.tsx

@@ -165,16 +165,15 @@ const ChannelPreviewMessengerWithContext = <
         testID={`channel-preview-content-${channel.id}`}
       >
         <View style={[styles.row, row]}>
-          <PreviewTitle channel={channel} displayName={displayName} />
+          <PreviewTitle displayName={displayName} />
           <View style={[styles.statusContainer, row]}>
             {isChannelMuted && <PreviewMutedStatus />}
-            <PreviewUnreadCount channel={channel} maxUnreadCount={maxUnreadCount} unread={unread} />
+            <PreviewUnreadCount maxUnreadCount={maxUnreadCount} unread={unread} />
           </View>
         </View>
         <View style={[styles.row, row]}>
           <PreviewMessage latestMessagePreview={latestMessagePreview} />
           <PreviewStatus
-            channel={channel}
             formatLatestMessageDate={formatLatestMessageDate}
             latestMessagePreview={latestMessagePreview}
           />

package/src/components/ChannelPreview/ChannelPreviewStatus.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
-import type { ChannelPreviewProps } from './ChannelPreview';
 import type { ChannelPreviewMessengerPropsWithContext } from './ChannelPreviewMessenger';
 import { MessageReadStatus } from './hooks/useLatestMessagePreview';
 
@@ -26,8 +25,7 @@ export type ChannelPreviewStatusProps<
 > = Pick<
   ChannelPreviewMessengerPropsWithContext<StreamChatGenerics>,
   'latestMessagePreview' | 'formatLatestMessageDate'
-> &
-  Pick<ChannelPreviewProps<StreamChatGenerics>, 'channel'>;
+>;
 
 export const ChannelPreviewStatus = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,