@sendbird/uikit-react-native 1.0.2 → 1.1.1

package/src/{SendbirdUIKitContainer.tsx → containers/SendbirdUIKitContainer.tsx}

@@ -14,18 +14,23 @@ import {
 } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
 
-import InternalErrorBoundary from './InternalErrorBoundary';
-import InternalLocalCacheStorage from './InternalLocalCacheStorage';
-import { LocalizationProvider } from './contexts/Localization';
-import { PlatformServiceProvider } from './contexts/PlatformService';
-import { SendbirdChatProvider } from './contexts/SendbirdChat';
-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 { ErrorBoundaryProps, LocalCacheStorage } from './types';
-import VERSION from './version';
+import { LocalizationProvider } from '../contexts/Localization';
+import { PlatformServiceProvider } from '../contexts/PlatformService';
+import { SendbirdChatProvider } from '../contexts/SendbirdChat';
+import { useLocalization } from '../hooks/useContext';
+import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
+import StringSetEn from '../localization/StringSet.en';
+import type { StringSet } from '../localization/StringSet.type';
+import SBUDynamicModule from '../platform/dynamicModule';
+import type {
+  ClipboardServiceInterface,
+  FileServiceInterface,
+  MediaServiceInterface,
+  NotificationServiceInterface,
+} from '../platform/types';
+import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
+import VERSION from '../version';
+import InternalErrorBoundaryContainer from './InternalErrorBoundaryContainer';
 
 const NetInfo = SBUDynamicModule.get('@react-native-community/netinfo', 'warn');
 
@@ -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
@@ -147,7 +159,7 @@ const SendbirdUIKitContainer = ({
               >
                 <LocalizedDialogProvider>
                   <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <InternalErrorBoundary {...errorBoundary}>{children}</InternalErrorBoundary>
+                    <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
                   </ToastProvider>
                 </LocalizedDialogProvider>
               </HeaderStyleProvider>

package/src/contexts/PlatformService.tsx

@@ -1,17 +1,29 @@
 import React from 'react';
 
-import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from '../platform/types';
+import type {
+  ClipboardServiceInterface,
+  FileServiceInterface,
+  MediaServiceInterface,
+  NotificationServiceInterface,
+} from '../platform/types';
 
 type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
+  mediaService?: MediaServiceInterface;
 }>;
 
 export const PlatformServiceContext = React.createContext<Props | null>(null);
-export const PlatformServiceProvider = ({ children, fileService, clipboardService, notificationService }: Props) => {
+export const PlatformServiceProvider = ({
+  children,
+  fileService,
+  clipboardService,
+  notificationService,
+  mediaService,
+}: Props) => {
   return (
-    <PlatformServiceContext.Provider value={{ fileService, clipboardService, notificationService }}>
+    <PlatformServiceContext.Provider value={{ fileService, clipboardService, notificationService, mediaService }}>
       {children}
     </PlatformServiceContext.Provider>
   );

package/src/contexts/SendbirdChat.tsx

@@ -11,8 +11,8 @@ type Props = React.PropsWithChildren<{
   sdkInstance: SendbirdChatSDK;
 
   enableAutoPushTokenRegistration: boolean;
-  // enableChannelListTypingIndicator: boolean;
-  // enableChannelListMessageReceiptStatus: boolean;
+  enableChannelListTypingIndicator: boolean;
+  enableChannelListMessageReceiptStatus: boolean;
 }>;
 
 type Context = {
@@ -27,8 +27,8 @@ type Context = {
   features: {
     // UIKit features
     autoPushTokenRegistrationEnabled: boolean;
-    // channelListTypingIndicatorEnabled: boolean;
-    // channelListMessageReceiptStateEnabled: boolean;
+    channelListTypingIndicatorEnabled: boolean;
+    channelListMessageReceiptStatusEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -39,7 +39,13 @@ type Context = {
 };
 
 export const SendbirdChatContext = React.createContext<Context | null>(null);
-export const SendbirdChatProvider = ({ children, sdkInstance, enableAutoPushTokenRegistration }: Props) => {
+export const SendbirdChatProvider = ({
+  children,
+  sdkInstance,
+  enableAutoPushTokenRegistration,
+  enableChannelListMessageReceiptStatus,
+  enableChannelListTypingIndicator,
+}: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
   const appFeatures = useAppFeatures(sdkInstance);
@@ -103,6 +109,8 @@ export const SendbirdChatProvider = ({ children, sdkInstance, enableAutoPushToke
     features: {
       ...appFeatures,
       autoPushTokenRegistrationEnabled: enableAutoPushTokenRegistration,
+      channelListTypingIndicatorEnabled: enableChannelListTypingIndicator,
+      channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
     },
   };
 

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -38,7 +38,7 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           icon: 'camera',
           onPress: async () => {
             const photo = await fileService.openCamera({
-              mediaType: 'photo',
+              mediaType: 'all',
               onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
             });
 

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -19,11 +19,13 @@ import {
   getFileType,
   isMyMessage,
   messageKeyExtractor,
+  toMegabyte,
   useFreshCallback,
 } from '@sendbird/uikit-utils';
 
 import type { ChatFlatListRef } from '../../../components/ChatFlatList';
 import ChatFlatList from '../../../components/ChatFlatList';
+import { DEPRECATION_WARNING } from '../../../constants';
 import { useLocalization, usePlatformService } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
@@ -44,6 +46,7 @@ const GroupChannelMessageList = ({
   onResendFailedMessage,
   onDeleteMessage,
   onPressImageMessage,
+  onPressMediaMessage,
   flatListProps,
   enableMessageGrouping,
 }: GroupChannelProps['MessageList']) => {
@@ -56,6 +59,7 @@ const GroupChannelMessageList = ({
   const getMessagePressActions = useGetMessagePressActions({
     onDeleteMessage,
     onPressImageMessage,
+    onPressMediaMessage,
     currentUserId,
     onResendFailedMessage,
   });
@@ -135,15 +139,15 @@ const GroupChannelMessageList = ({
 };
 
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
-const toMegabyte = (byte: number) => byte / 1024 / 1024;
 const useGetMessagePressActions = ({
   onPressImageMessage,
+  onPressMediaMessage,
   onDeleteMessage,
   onResendFailedMessage,
   currentUserId,
 }: Pick<
   GroupChannelProps['MessageList'],
-  'onDeleteMessage' | 'onResendFailedMessage' | 'onPressImageMessage' | 'currentUserId'
+  'onDeleteMessage' | 'onResendFailedMessage' | 'currentUserId' | 'onPressImageMessage' | 'onPressMediaMessage'
 >) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
@@ -253,10 +257,23 @@ const useGetMessagePressActions = ({
       }
 
       const fileType = getFileType(msg.type || getFileExtension(msg.name));
-      if (fileType === 'image') {
-        response.onPress = () => onPressImageMessage?.(msg, getAvailableUriFromFileMessage(msg));
-      } else {
-        response.onPress = () => Linking.openURL(msg.url).catch();
+      switch (fileType) {
+        case 'image':
+        case 'video':
+        case 'audio': {
+          response.onPress = () => {
+            if (onPressImageMessage && fileType === 'image') {
+              Logger.warn(DEPRECATION_WARNING.GROUP_CHANNEL.ON_PRESS_IMAGE_MESSAGE);
+              onPressImageMessage(msg, getAvailableUriFromFileMessage(msg));
+            }
+            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
+          };
+          break;
+        }
+        default: {
+          response.onPress = () => Linking.openURL(msg.url).catch();
+          break;
+        }
       }
     }
 

package/src/domain/groupChannel/module/moduleContext.tsx

@@ -41,20 +41,13 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
   const [editMessage, setEditMessage] = useState<SendbirdUserMessage | SendbirdFileMessage>();
 
-  useChannelHandler(
-    sdk,
-    `GroupChannelContextsProvider_${id}`,
-    {
-      onTypingStatusUpdated(eventChannel) {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        if (!enableTypingIndicator) return;
-
-        const usersWithoutMe = eventChannel.getTypingUsers().filter((u) => u.userId !== currentUser?.userId);
-        setTypingUsers(usersWithoutMe);
-      },
+  useChannelHandler(sdk, `GroupChannelContextsProvider_${id}`, {
+    onTypingStatusUpdated(eventChannel) {
+      if (isDifferentChannel(channel, eventChannel)) return;
+      if (!enableTypingIndicator) return;
+      setTypingUsers(eventChannel.getTypingUsers());
     },
-    [channel, currentUser?.userId, enableTypingIndicator],
-  );
+  });
 
   return (
     <ProviderLayout>

package/src/domain/groupChannel/types.ts

@@ -28,7 +28,7 @@ export interface GroupChannelProps {
     onBeforeSendUserMessage?: (
       params: SendbirdUserMessageParams,
     ) => SendbirdUserMessageParams | Promise<SendbirdUserMessageParams>;
-    onPressImageMessage?: GroupChannelProps['MessageList']['onPressImageMessage'];
+    onPressMediaMessage?: GroupChannelProps['MessageList']['onPressMediaMessage'];
 
     renderMessage?: GroupChannelProps['MessageList']['renderMessage'];
     renderNewMessagesButton?: GroupChannelProps['MessageList']['renderNewMessagesButton'];
@@ -42,6 +42,9 @@ 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;
@@ -59,7 +62,7 @@ export interface GroupChannelProps {
 
     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;
@@ -81,6 +84,9 @@ 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/src/domain/groupChannelList/types.ts

@@ -27,8 +27,8 @@ export interface GroupChannelListProps {
     // skipTypeSelection?: boolean;
     /** Custom Query creator for channels query **/
     queryCreator?: UseGroupChannelListOptions['queryCreator'];
-    /** Sort comparator for sort channels **/
-    sortComparator?: UseGroupChannelListOptions['sortComparator'];
+    /** Custom Collection creator for group channel collection **/
+    collectionCreator?: UseGroupChannelListOptions['collectionCreator'];
     /** FlatList props for GroupChannelList.List **/
     flatListProps?: GroupChannelListProps['List']['flatListProps'];
     /** Action menu item creator for onLongPress **/
@@ -42,6 +42,7 @@ export interface GroupChannelListProps {
     groupChannels: SendbirdGroupChannel[];
     /** Method to render GroupChannel preview **/
     renderGroupChannelPreview: (
+      // FIXME/BREAKING: Changed to props object
       channel: SendbirdGroupChannel,
       onLongPressChannel: () => void,
     ) => React.ReactElement | null;

package/src/domain/groupChannelSettings/module/moduleContext.tsx

@@ -41,16 +41,11 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     forceUpdate();
   };
 
-  useChannelHandler(
-    sdk,
-    `${HOOK_NAME}_${uniqId}`,
-    {
-      onChannelChanged: onChannelChanged,
-      onChannelFrozen: onChannelChanged,
-      onChannelUnfrozen: onChannelChanged,
-    },
-    [activeChannel],
-  );
+  useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+    onChannelChanged: onChannelChanged,
+    onChannelFrozen: onChannelChanged,
+    onChannelUnfrozen: onChannelChanged,
+  });
 
   const toast = useToast();
   const { openSheet } = useBottomSheet();

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
-import { Logger, PASS, SendbirdUser } from '@sendbird/uikit-utils';
+import { Logger, PASS, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';
@@ -50,45 +50,42 @@ const createGroupChannelCreateFragment = <UserType,>(
       sortComparator,
     });
 
-    const _renderUser: NonNullable<typeof renderUser> = useCallback(
-      (user, selectedUsers, setSelectedUsers) => {
-        if (queryCreator && !renderUser) {
-          throw new Error('You should provide "renderUser" when providing "queryCreator"');
-        }
-        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
-
-        const sbUser = user as unknown as SendbirdUser;
-        const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
-        const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
-
-        const isMe = sbUser.userId === currentUser?.userId;
-        if (isMe) return null;
-
-        const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
-        const isSelected = userIdx > -1;
-
-        return (
-          <TouchableOpacity
-            activeOpacity={0.7}
-            onPress={() => {
-              sbSetSelectedUsers(([...draft]) => {
-                if (isSelected) draft.splice(userIdx, 1);
-                else draft.push(sbUser);
-                return draft;
-              });
-            }}
-          >
-            <UserSelectableBar
-              uri={sbUser.profileUrl}
-              name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
-              selected={isSelected}
-              disabled={false}
-            />
-          </TouchableOpacity>
-        );
-      },
-      [renderUser, queryCreator],
-    );
+    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((user, selectedUsers, setSelectedUsers) => {
+      if (queryCreator && !renderUser) {
+        throw new Error('You should provide "renderUser" when providing "queryCreator"');
+      }
+      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+
+      const sbUser = user as unknown as SendbirdUser;
+      const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
+      const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
+
+      const isMe = sbUser.userId === currentUser?.userId;
+      if (isMe) return null;
+
+      const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
+      const isSelected = userIdx > -1;
+
+      return (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={() => {
+            sbSetSelectedUsers(([...draft]) => {
+              if (isSelected) draft.splice(userIdx, 1);
+              else draft.push(sbUser);
+              return draft;
+            });
+          }}
+        >
+          <UserSelectableBar
+            uri={sbUser.profileUrl}
+            name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
+            selected={isSelected}
+            disabled={false}
+          />
+        </TouchableOpacity>
+      );
+    });
 
     return (
       <UserListModule.Provider

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
-import { NOOP, PASS, messageComparator } from '@sendbird/uikit-utils';
+import { NOOP, PASS, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
 
 import MessageRenderer from '../components/MessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
@@ -22,7 +22,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     enableTypingIndicator = true,
     onPressHeaderLeft = NOOP,
     onPressHeaderRight = NOOP,
-    onPressImageMessage = NOOP,
+    onPressImageMessage,
+    onPressMediaMessage = NOOP,
     onChannelDeleted = NOOP,
     onBeforeSendFileMessage = PASS,
     onBeforeSendUserMessage = PASS,
@@ -54,16 +55,13 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       queryCreator,
       sortComparator,
       onChannelDeleted,
-      enableCollectionWithoutLocalCache: true,
+      enableCollectionWithoutLocalCache: !queryCreator,
     });
 
-    const _renderMessage: GroupChannelProps['MessageList']['renderMessage'] = useCallback(
-      (props) => {
-        if (renderMessage) return renderMessage(props);
-        return <MessageRenderer {...props} />;
-      },
-      [renderMessage],
-    );
+    const _renderMessage: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {
+      if (renderMessage) return renderMessage(props);
+      return <MessageRenderer {...props} />;
+    });
 
     const memoizedFlatListProps = useMemo(
       () => ({
@@ -74,42 +72,33 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       [loading, flatListProps],
     );
 
-    const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useCallback(
-      async (file) => {
-        const params = new sdk.FileMessageParams();
-        params.file = file;
-        const processedParams = await onBeforeSendFileMessage(params);
-        await sendFileMessage(processedParams);
-      },
-      [sdk, sendFileMessage, onBeforeSendFileMessage],
-    );
-
-    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useCallback(
-      async (text) => {
-        const params = new sdk.UserMessageParams();
-        params.message = text;
-        const processedParams = await onBeforeSendUserMessage(params);
-        await sendUserMessage(processedParams);
-      },
-      [sdk, sendUserMessage, onBeforeSendUserMessage],
-    );
-    const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useCallback(
+    const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useFreshCallback(async (file) => {
+      const params = new sdk.FileMessageParams();
+      params.file = file;
+      const processedParams = await onBeforeSendFileMessage(params);
+      await sendFileMessage(processedParams);
+    });
+    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(async (text) => {
+      const params = new sdk.UserMessageParams();
+      params.message = text;
+      const processedParams = await onBeforeSendUserMessage(params);
+      await sendUserMessage(processedParams);
+    });
+    const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useFreshCallback(
       async (editedFile, message) => {
         const params = new sdk.FileMessageParams();
         params.file = editedFile;
         const processedParams = await onBeforeSendFileMessage(params);
         await updateFileMessage(message.messageId, processedParams);
       },
-      [sdk, updateFileMessage, onBeforeSendFileMessage],
     );
-    const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useCallback(
+    const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useFreshCallback(
       async (editedText, message) => {
         const params = new sdk.UserMessageParams();
         params.message = editedText;
         const processedParams = await onBeforeSendUserMessage(params);
         await updateUserMessage(message.messageId, processedParams);
       },
-      [sdk, updateUserMessage, onBeforeSendUserMessage],
     );
 
     return (
@@ -135,6 +124,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
             onPressImageMessage={onPressImageMessage}
+            onPressMediaMessage={onPressMediaMessage}
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input

package/src/fragments/createGroupChannelListFragment.tsx

@@ -1,22 +1,19 @@
-import React, { useCallback, useEffect } from 'react';
-import { AppState, Pressable } from 'react-native';
+import React, { useEffect } from 'react';
+import { AppState } from 'react-native';
 
 import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
-import { GroupChannelPreview } from '@sendbird/uikit-react-native-foundation';
-import { Logger, PASS, channelComparator, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+import { Logger, PASS, useFreshCallback } from '@sendbird/uikit-utils';
 
-import ChannelCover from '../components/ChannelCover';
 import StatusComposition from '../components/StatusComposition';
-import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
+import GroupChannelPreviewContainer from '../containers/GroupChannelPreviewContainer';
 import createGroupChannelListModule from '../domain/groupChannelList/module/createGroupChannelListModule';
 import type {
   GroupChannelListFragment,
   GroupChannelListModule,
   GroupChannelListProps,
 } from '../domain/groupChannelList/types';
-import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+import { useSendbirdChat } from '../hooks/useContext';
 
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
 const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListModule>): GroupChannelListFragment => {
   const GroupChannelListModule = createGroupChannelListModule(initModule);
   return ({
@@ -24,18 +21,17 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     onPressChannel,
     onPressCreateChannel,
     queryCreator,
-    sortComparator = channelComparator,
+    collectionCreator,
     renderGroupChannelPreview,
     // skipTypeSelection = true,
     flatListProps = {},
     menuItemCreator = PASS,
   }) => {
     const { sdk, currentUser, features, markAsDeliveredWithChannel } = useSendbirdChat();
-    const { STRINGS } = useLocalization();
     const { groupChannels, next, loading } = useGroupChannelList(sdk, currentUser?.userId, {
       queryCreator,
-      sortComparator,
-      enableCollectionWithoutLocalCache: true,
+      collectionCreator,
+      enableCollectionWithoutLocalCache: !queryCreator,
     });
 
     if (features.deliveryReceiptEnabled) {
@@ -47,35 +43,17 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
       }, []);
     }
 
-    const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useCallback(
+    const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useFreshCallback(
       (channel, onLongPressChannel) => {
         if (renderGroupChannelPreview) return renderGroupChannelPreview(channel, onLongPressChannel);
         return (
-          <Pressable
+          <GroupChannelPreviewContainer
+            channel={channel}
             onPress={() => onPressChannel(channel)}
-            onLongPress={onLongPressChannel}
-            delayLongPress={DEFAULT_LONG_PRESS_DELAY}
-          >
-            <GroupChannelPreview
-              customCover={<ChannelCover channel={channel} size={56} />}
-              coverUrl={channel.coverUrl}
-              title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}
-              titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}
-              body={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel)}
-              badgeCount={channel.unreadMessageCount}
-              bodyIcon={
-                channel.lastMessage?.isFileMessage()
-                  ? iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))]
-                  : undefined
-              }
-              frozen={channel.isFrozen}
-              notificationOff={channel.myPushTriggerOption === 'off'}
-              memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
-            />
-          </Pressable>
+            onLongPress={() => onLongPressChannel()}
+          />
         );
       },
-      [STRINGS, onPressChannel, currentUser?.userId],
     );
 
     if (!currentUser) {