@sendbird/uikit-react-native 1.0.2 → 1.1.0

package/lib/typescript/src/SendbirdUIKitContainer.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import type { HeaderStyleContextType, UIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
 import type { StringSet } from './localization/StringSet.type';
-import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from './platform/types';
+import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface } from './platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from './types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "1.0.2";
+    VERSION: "1.1.0";
     PLATFORM: string;
 }>;
 export declare type SendbirdUIKitContainerProps = React.PropsWithChildren<{
@@ -14,11 +14,14 @@ export declare type SendbirdUIKitContainerProps = React.PropsWithChildren<{
         file: FileServiceInterface;
         notification: NotificationServiceInterface;
         clipboard: ClipboardServiceInterface;
+        media?: MediaServiceInterface;
     };
     chatOptions?: {
         localCacheStorage?: LocalCacheStorage;
-        enableAutoPushTokenRegistration?: boolean;
         onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
+        enableAutoPushTokenRegistration?: boolean;
+        enableChannelListTypingIndicator?: boolean;
+        enableChannelListMessageReceiptStatus?: boolean;
     };
     localization?: {
         stringSet?: StringSet;
@@ -27,6 +30,7 @@ export declare type SendbirdUIKitContainerProps = React.PropsWithChildren<{
         theme?: UIKitTheme;
         statusBarTranslucent?: boolean;
         defaultHeaderTitleAlign?: 'left' | 'center';
+        defaultHeaderHeight?: number;
         HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
     };
     toast?: {

package/lib/typescript/src/components/FileViewer.d.ts

@@ -0,0 +1,12 @@
+import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
+declare type Props = {
+    fileMessage: SendbirdFileMessage;
+    deleteMessage: () => Promise<void>;
+    onClose: () => void;
+    onPressDownload?: (message: SendbirdFileMessage) => void;
+    onPressDelete?: (message: SendbirdFileMessage) => void;
+    headerShown?: boolean;
+    headerTopInset?: number;
+};
+declare const FileViewer: ({ headerShown, deleteMessage, headerTopInset, fileMessage, onPressDownload, onPressDelete, onClose, }: Props) => JSX.Element;
+export default FileViewer;

package/lib/typescript/src/components/GroupChannelPreviewContainer.d.ts

@@ -0,0 +1,8 @@
+import { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+declare type Props = {
+    channel: SendbirdGroupChannel;
+    onPress: () => void;
+    onLongPress: () => void;
+};
+declare const GroupChannelPreviewContainer: ({ onPress, onLongPress, channel }: Props) => JSX.Element;
+export default GroupChannelPreviewContainer;

package/lib/typescript/src/components/MessageRenderer/FileMessage/VideoFileMessage.d.ts

@@ -0,0 +1,3 @@
+import type { FileMessageProps } from './index';
+declare const VideoFileMessage: ({ message }: FileMessageProps) => JSX.Element;
+export default VideoFileMessage;

package/lib/typescript/src/components/SBUPressable.d.ts

@@ -0,0 +1,18 @@
+import { PressableProps, TouchableOpacityProps } from 'react-native';
+declare type Components = 'Pressable' | 'TouchableOpacity';
+declare type Props<T extends Components = 'Pressable'> = {
+    as?: T;
+} & ExtractProps<T, AsProps>;
+declare type AsProps = {
+    type: 'Pressable';
+    props: PressableProps;
+} | {
+    type: 'TouchableOpacity';
+    props: TouchableOpacityProps;
+};
+declare type ExtractProps<T extends Components, U extends AsProps> = U extends {
+    type: T;
+    props: infer P;
+} ? P : never;
+declare const SBUPressable: <T extends Components>({ as, ...props }: Props<T>) => JSX.Element;
+export default SBUPressable;

package/lib/typescript/src/components/UserActionBar.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 declare type Props = {
     uri: string;
     name: string;
@@ -7,5 +6,5 @@ declare type Props = {
     disabled: boolean;
     onPressActionMenu?: () => void;
 };
-declare const _default: React.MemoExoticComponent<({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => JSX.Element>;
-export default _default;
+declare const UserActionBar: ({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => JSX.Element;
+export default UserActionBar;

package/lib/typescript/src/components/UserSelectableBar.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
 declare type Props = {
     uri: string;
     name: string;
     selected: boolean;
     disabled: boolean;
 };
-declare const _default: React.MemoExoticComponent<({ uri, name, selected, disabled }: Props) => JSX.Element>;
-export default _default;
+declare const UserSelectableBar: ({ uri, name, selected, disabled }: Props) => JSX.Element;
+export default UserSelectableBar;

package/lib/typescript/src/constants.d.ts

@@ -1 +1,6 @@
 export declare const DEFAULT_LONG_PRESS_DELAY = 350;
+export declare const DEPRECATION_WARNING: {
+    readonly GROUP_CHANNEL: {
+        readonly ON_PRESS_IMAGE_MESSAGE: "`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead";
+    };
+};

package/lib/typescript/src/contexts/PlatformService.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from '../platform/types';
+import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface } from '../platform/types';
 declare type Props = React.PropsWithChildren<{
     fileService: FileServiceInterface;
     clipboardService: ClipboardServiceInterface;
     notificationService: NotificationServiceInterface;
+    mediaService?: MediaServiceInterface;
 }>;
 export declare const PlatformServiceContext: React.Context<Props | null>;
-export declare const PlatformServiceProvider: ({ children, fileService, clipboardService, notificationService }: Props) => JSX.Element;
+export declare const PlatformServiceProvider: ({ children, fileService, clipboardService, notificationService, mediaService, }: Props) => JSX.Element;
 export {};

package/lib/typescript/src/contexts/SendbirdChat.d.ts

@@ -4,6 +4,8 @@ import type { FileType } from '../platform/types';
 declare type Props = React.PropsWithChildren<{
     sdkInstance: SendbirdChatSDK;
     enableAutoPushTokenRegistration: boolean;
+    enableChannelListTypingIndicator: boolean;
+    enableChannelListMessageReceiptStatus: boolean;
 }>;
 declare type Context = {
     sdk: SendbirdChatSDK;
@@ -13,6 +15,8 @@ declare type Context = {
     markAsDeliveredWithChannel: (channel: SendbirdGroupChannel) => void;
     features: {
         autoPushTokenRegistrationEnabled: boolean;
+        channelListTypingIndicatorEnabled: boolean;
+        channelListMessageReceiptStatusEnabled: boolean;
         deliveryReceiptEnabled: boolean;
         broadcastChannelEnabled: boolean;
         superGroupChannelEnabled: boolean;
@@ -20,5 +24,5 @@ declare type Context = {
     };
 };
 export declare const SendbirdChatContext: React.Context<Context | null>;
-export declare const SendbirdChatProvider: ({ children, sdkInstance, enableAutoPushTokenRegistration }: Props) => JSX.Element;
+export declare const SendbirdChatProvider: ({ children, sdkInstance, enableAutoPushTokenRegistration, enableChannelListMessageReceiptStatus, enableChannelListTypingIndicator, }: Props) => JSX.Element;
 export {};

package/lib/typescript/src/domain/groupChannel/component/GroupChannelMessageList.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
-declare const _default: React.MemoExoticComponent<({ currentUserId, channel, messages, renderMessage, nextMessages, newMessagesFromMembers, onBottomReached, onTopReached, renderNewMessagesButton, renderScrollToBottomButton, onResendFailedMessage, onDeleteMessage, onPressImageMessage, flatListProps, enableMessageGrouping, }: {
+declare const _default: React.MemoExoticComponent<({ currentUserId, channel, messages, renderMessage, nextMessages, newMessagesFromMembers, onBottomReached, onTopReached, renderNewMessagesButton, renderScrollToBottomButton, onResendFailedMessage, onDeleteMessage, onPressImageMessage, onPressMediaMessage, flatListProps, enableMessageGrouping, }: {
     enableMessageGrouping: boolean;
     currentUserId?: string | undefined;
     channel: import("sendbird").GroupChannel;
@@ -11,7 +11,7 @@ declare const _default: React.MemoExoticComponent<({ currentUserId, channel, mes
     onBottomReached: () => void;
     onResendFailedMessage: (failedMessage: import("sendbird").FileMessage | import("sendbird").UserMessage) => Promise<void>;
     onDeleteMessage: (message: import("sendbird").FileMessage | import("sendbird").UserMessage) => Promise<void>;
-    onPressImageMessage?: ((message: import("sendbird").FileMessage, uri: string) => void) | undefined;
+    onPressMediaMessage?: ((message: import("sendbird").FileMessage, deleteMessage: () => Promise<void>, uri: string) => void) | undefined;
     renderMessage: (props: {
         message: SendbirdMessage;
         prevMessage?: SendbirdMessage | undefined;
@@ -32,5 +32,6 @@ declare const _default: React.MemoExoticComponent<({ currentUserId, channel, mes
         onPress: () => void;
     }> | null;
     flatListProps?: Omit<import("react-native").FlatListProps<SendbirdMessage>, "data" | "renderItem"> | undefined;
+    onPressImageMessage?: ((message: import("sendbird").FileMessage, uri: string) => void) | undefined;
 }) => JSX.Element>;
 export default _default;

package/lib/typescript/src/domain/groupChannel/types.d.ts

@@ -12,7 +12,7 @@ export interface GroupChannelProps {
         onPressHeaderRight: GroupChannelProps['Header']['onPressHeaderRight'];
         onBeforeSendFileMessage?: (params: SendbirdFileMessageParams) => SendbirdFileMessageParams | Promise<SendbirdFileMessageParams>;
         onBeforeSendUserMessage?: (params: SendbirdUserMessageParams) => SendbirdUserMessageParams | Promise<SendbirdUserMessageParams>;
-        onPressImageMessage?: GroupChannelProps['MessageList']['onPressImageMessage'];
+        onPressMediaMessage?: GroupChannelProps['MessageList']['onPressMediaMessage'];
         renderMessage?: GroupChannelProps['MessageList']['renderMessage'];
         renderNewMessagesButton?: GroupChannelProps['MessageList']['renderNewMessagesButton'];
         renderScrollToBottomButton?: GroupChannelProps['MessageList']['renderScrollToBottomButton'];
@@ -23,6 +23,8 @@ export interface GroupChannelProps {
         sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
         collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
         queryCreator?: UseGroupChannelMessagesOptions['queryCreator'];
+        /** @deprecated `onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead **/
+        onPressImageMessage?: GroupChannelProps['MessageList']['onPressImageMessage'];
     };
     Header: {
         onPressHeaderLeft: () => void;
@@ -39,7 +41,7 @@ export interface GroupChannelProps {
         onBottomReached: () => void;
         onResendFailedMessage: (failedMessage: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
         onDeleteMessage: (message: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
-        onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
+        onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
         renderMessage: (props: {
             message: SendbirdMessage;
             prevMessage?: SendbirdMessage;
@@ -60,6 +62,8 @@ export interface GroupChannelProps {
             onPress: () => void;
         }>;
         flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+        /** @deprecated `onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead **/
+        onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
     };
     Input: {
         channel: SendbirdGroupChannel;

package/lib/typescript/src/hooks/useContext.d.ts

@@ -1,21 +1,23 @@
-import React from 'react';
-import { LocalizationContextType } from '../contexts/Localization';
-export declare const useLocalization: () => LocalizationContextType;
+/// <reference types="react" />
+export declare const useLocalization: () => import("../contexts/Localization").LocalizationContextType;
 export declare const usePlatformService: () => {
     fileService: import("..").FileServiceInterface;
     clipboardService: import("..").ClipboardServiceInterface;
     notificationService: import("..").NotificationServiceInterface;
+    mediaService?: import("../platform/types").MediaServiceInterface | undefined;
 } & {
-    children?: React.ReactNode;
+    children?: import("react").ReactNode;
 };
 export declare const useSendbirdChat: () => {
     sdk: import("sendbird").SendBirdInstance;
     currentUser?: import("sendbird").User | undefined;
-    setCurrentUser: React.Dispatch<React.SetStateAction<import("sendbird").User | undefined>>;
+    setCurrentUser: import("react").Dispatch<import("react").SetStateAction<import("sendbird").User | undefined>>;
     updateCurrentUserInfo: (nickname: string, profile?: string | import("..").FileType | undefined) => Promise<import("sendbird").User>;
     markAsDeliveredWithChannel: (channel: import("sendbird").GroupChannel) => void;
     features: {
         autoPushTokenRegistrationEnabled: boolean;
+        channelListTypingIndicatorEnabled: boolean;
+        channelListMessageReceiptStatusEnabled: boolean;
         deliveryReceiptEnabled: boolean;
         broadcastChannelEnabled: boolean;
         superGroupChannelEnabled: boolean;

package/lib/typescript/src/index.d.ts

@@ -1,6 +1,7 @@
 export { default as MessageRenderer } from './components/MessageRenderer';
 export { default as ChannelCover } from './components/ChannelCover';
 export { default as ChatFlatList } from './components/ChatFlatList';
+export { default as FileViewer } from './components/FileViewer';
 export { default as NewMessagesButton } from './components/NewMessagesButton';
 export { default as ProviderLayout } from './components/ProviderLayout';
 export { default as ScrollToBottomButton } from './components/ScrollToBottomButton';
@@ -31,9 +32,11 @@ export type { StringSet } from './localization/StringSet.type';
 export { default as createNativeFileService } from './platform/createFileService.native';
 export { default as createNativeClipboardService } from './platform/createClipboardService.native';
 export { default as createNativeNotificationService } from './platform/createNotificationService.native';
+export { default as createNativeMediaService } from './platform/createMediaService.native';
 export { default as createExpoFileService } from './platform/createFileService.expo';
 export { default as createExpoClipboardService } from './platform/createClipboardService.expo';
 export { default as createExpoNotificationService } from './platform/createNotificationService.expo';
+export { default as createExpoMediaService } from './platform/createMediaService.expo';
 export type { FileServiceInterface, ClipboardServiceInterface, FilePickerServiceInterface, FileSystemServiceInterface, SaveOptions, OpenDocumentOptions, OpenCameraOptions, OpenMediaLibraryOptions, OpenResultListener, DownloadedPath, Unsubscribe, FilePickerResponse, FileType, NotificationServiceInterface, } from './platform/types';
 /** Domain **/
 export * from './domain/groupChannel';

package/lib/typescript/src/localization/StringSet.type.d.ts

@@ -107,6 +107,10 @@ export interface StringSet {
         CHANNEL_NO_MEMBERS: string;
         TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
     };
+    FILE_VIEWER: {
+        TITLE: (message: SendbirdFileMessage) => string;
+        SUBTITLE: (message: SendbirdFileMessage) => string;
+    };
     PLACEHOLDER: {
         NO_BANNED_MEMBERS: string;
         NO_USERS: string;

package/lib/typescript/src/platform/createMediaService.expo.d.ts

@@ -0,0 +1,9 @@
+import type * as ExpoAV from 'expo-av';
+import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
+import type { MediaServiceInterface } from './types';
+declare type Modules = {
+    avModule: typeof ExpoAV;
+    thumbnailModule: typeof ExpoVideoThumbnail;
+};
+declare const createExpoMediaService: ({ avModule, thumbnailModule }: Modules) => MediaServiceInterface;
+export default createExpoMediaService;

package/lib/typescript/src/platform/createMediaService.native.d.ts

@@ -0,0 +1,9 @@
+import type * as CreateThumbnail from 'react-native-create-thumbnail';
+import type Video from 'react-native-video';
+import type { MediaServiceInterface } from './types';
+declare type Modules = {
+    VideoComponent: typeof Video;
+    thumbnailModule: typeof CreateThumbnail;
+};
+declare const createNativeMediaService: ({ VideoComponent, thumbnailModule }: Modules) => MediaServiceInterface;
+export default createNativeMediaService;

package/lib/typescript/src/platform/createNotificationService.expo.d.ts

@@ -1,4 +1,4 @@
-import type ExpoNotification from 'expo-notifications';
+import type * as ExpoNotification from 'expo-notifications';
 import type { NotificationServiceInterface } from './types';
 declare const createExpoNotificationService: (messagingModule: typeof ExpoNotification) => NotificationServiceInterface;
 export default createExpoNotificationService;

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

@@ -29,7 +29,7 @@ export interface OpenMediaLibraryOptions extends OpenResultListener {
 }
 export interface OpenCameraOptions extends OpenResultListener {
     cameraType?: 'front' | 'back';
-    mediaType?: 'photo' | 'video';
+    mediaType?: 'photo' | 'video' | 'all';
 }
 export declare type OpenDocumentOptions = OpenResultListener;
 export interface SaveOptions {
@@ -45,3 +45,22 @@ export interface FilePickerServiceInterface {
 export interface FileSystemServiceInterface {
     save(options?: SaveOptions): Promise<DownloadedPath | null>;
 }
+interface VideoProps {
+    source: {
+        uri: string;
+    } | number;
+    resizeMode?: 'cover' | 'contain' | 'stretch';
+    onLoad?: () => void;
+}
+interface GetVideoThumbnailOptions {
+    url: string;
+    timeMills?: number;
+    quality?: number;
+}
+export interface MediaServiceInterface {
+    VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;
+    getVideoThumbnail(options: GetVideoThumbnailOptions): Promise<{
+        path: string;
+    } | null>;
+}
+export {};

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "1.0.2";
+declare const VERSION = "1.1.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,9 +41,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "1.0.2",
-    "@sendbird/uikit-react-native-foundation": "1.0.2",
-    "@sendbird/uikit-utils": "1.0.2"
+    "@sendbird/uikit-chat-hooks": "1.1.0",
+    "@sendbird/uikit-react-native-foundation": "1.1.0",
+    "@sendbird/uikit-utils": "1.1.0"
   },
   "devDependencies": {
     "@react-native-clipboard/clipboard": "^1.8.5",
@@ -53,24 +53,29 @@
     "@react-native-firebase/messaging": "^14.4.0",
     "@types/react": "*",
     "@types/react-native": "*",
+    "@types/react-native-video": "^5.0.14",
     "date-fns": "^2.28.0",
+    "expo-av": "^12.0.4",
     "expo-clipboard": "^2.1.1",
     "expo-document-picker": "^10.1.3",
     "expo-file-system": "^13.1.4",
     "expo-image-picker": "^12.0.2",
     "expo-media-library": "^14.0.1",
     "expo-notifications": "^0.14.1",
+    "expo-video-thumbnails": "^6.4.0",
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",
     "react": "17.0.2",
     "react-native": "0.66.4",
     "react-native-builder-bob": "^0.18.0",
+    "react-native-create-thumbnail": "^1.5.1",
     "react-native-document-picker": "^8.0.0",
     "react-native-file-access": "^2.4.3",
     "react-native-image-picker": "^4.7.1",
     "react-native-permissions": "^3.6.0",
     "react-native-safe-area-context": "^3.3.2",
+    "react-native-video": "^5.2.0",
     "typescript": "^4.1.3"
   },
   "peerDependencies": {
@@ -79,18 +84,22 @@
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
     "date-fns": ">=2.28.0",
+    "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
     "expo-file-system": ">=13.1.4",
     "expo-image-picker": ">=12.0.2",
     "expo-notifications": ">=0.14.1",
+    "expo-video-thumbnails": ">=6.4.0",
     "react": ">=16.13.1",
     "react-native": ">=0.63.3",
+    "react-native-create-thumbnail": ">=1.5.1",
     "react-native-document-picker": ">=8.0.0",
     "react-native-file-access": ">=2.4.3",
     "react-native-image-picker": ">=4.7.1",
     "react-native-permissions": ">=3.6.0",
     "react-native-safe-area-context": ">=3.3.2",
+    "react-native-video": ">=5.2.0",
     "sendbird": "^3.1.22"
   },
   "peerDependenciesMeta": {
@@ -150,5 +159,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "257ece5f957e03ff5c08b79780b33d9d19adc5de"
+  "gitHead": "787ef6d52fec5d01e9b831d7a6f17e33614e2d09"
 }

package/src/SendbirdUIKitContainer.tsx

@@ -23,7 +23,12 @@ import { useLocalization } from './hooks/useContext';
 import StringSetEn from './localization/StringSet.en';
 import type { StringSet } from './localization/StringSet.type';
 import SBUDynamicModule from './platform/dynamicModule';
-import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from './platform/types';
+import type {
+  ClipboardServiceInterface,
+  FileServiceInterface,
+  MediaServiceInterface,
+  NotificationServiceInterface,
+} from './platform/types';
 import type { ErrorBoundaryProps, LocalCacheStorage } from './types';
 import VERSION from './version';
 
@@ -40,11 +45,14 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     file: FileServiceInterface;
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
+    media?: MediaServiceInterface;
   };
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
-    enableAutoPushTokenRegistration?: boolean;
     onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
+    enableAutoPushTokenRegistration?: boolean;
+    enableChannelListTypingIndicator?: boolean;
+    enableChannelListMessageReceiptStatus?: boolean;
   };
   localization?: {
     stringSet?: StringSet;
@@ -53,6 +61,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     theme?: UIKitTheme;
     statusBarTranslucent?: boolean;
     defaultHeaderTitleAlign?: 'left' | 'center';
+    defaultHeaderHeight?: number;
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
   toast?: {
@@ -132,12 +141,15 @@ const SendbirdUIKitContainer = ({
       <SendbirdChatProvider
         sdkInstance={sdkInstance}
         enableAutoPushTokenRegistration={chatOptions?.enableAutoPushTokenRegistration ?? true}
+        enableChannelListTypingIndicator={chatOptions?.enableChannelListTypingIndicator ?? false}
+        enableChannelListMessageReceiptStatus={chatOptions?.enableChannelListMessageReceiptStatus ?? false}
       >
         <LocalizationProvider stringSet={localization?.stringSet ?? StringSetEn}>
           <PlatformServiceProvider
             fileService={platformServices.file}
             notificationService={platformServices.notification}
             clipboardService={platformServices.clipboard}
+            mediaService={platformServices.media}
           >
             <UIKitThemeProvider theme={styles?.theme ?? LightUIKitTheme}>
               <HeaderStyleProvider