@sendbird/uikit-react-native 1.0.0 → 1.1.0

package/src/components/MessageRenderer/MessageOutgoingStatus.tsx

@@ -1,59 +1,52 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 
 import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import type {
-  SendbirdFileMessage,
-  SendbirdGroupChannel,
-  SendbirdMessage,
-  SendbirdUserMessage,
-} from '@sendbird/uikit-utils';
-import { useUniqId } from '@sendbird/uikit-utils';
+import type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../../hooks/useContext';
 
 const SIZE = 16;
 
 type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
-const MessageOutgoingStatus: React.FC<Props> = ({ channel, message }) => {
+const MessageOutgoingStatus = ({ channel, message }: Props) => {
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
 
-  const handlerId = useUniqId('MessageOutgoingStatus');
-
   const { sdk, features } = useSendbirdChat();
   const { colors } = useUIKitTheme();
 
-  const [state, setState] = useState(() => ({
-    unreadCount: channel.getUnreadMemberCount(message),
-    undeliveredCount: channel.getUndeliveredMemberCount(message),
-  }));
-
-  const getCounts = (channel: SendbirdGroupChannel, message: SendbirdUserMessage | SendbirdFileMessage) => {
-    return {
-      unreadCount: channel.getUnreadMemberCount(message),
-      undeliveredCount: channel.getUndeliveredMemberCount(message),
-    };
-  };
+  const uniqId = useUniqId('MessageOutgoingStatus');
+  const forceUpdate = useForceUpdate();
 
   useEffect(() => {
-    const id = String(handlerId);
-    if (message.sendingStatus === 'succeeded' && state.unreadCount === 0 && state.undeliveredCount === 0) {
-      sdk.removeChannelHandler(id);
+    const handlerId = `MessageOutgoingStatus_${uniqId}`;
+
+    if (
+      message.sendingStatus === 'succeeded' &&
+      channel.getUnreadMemberCount(message) === 0 &&
+      channel.getUndeliveredMemberCount(message) === 0
+    ) {
+      sdk.removeChannelHandler(handlerId);
     } else {
       const handler = new sdk.ChannelHandler();
-      handler.onReadReceiptUpdated = (channel) => {
-        if (channel.url === message.channelUrl) setState(getCounts(channel, message));
+
+      handler.onReadReceiptUpdated = (eventChannel) => {
+        if (isDifferentChannel(channel, eventChannel)) return;
+        forceUpdate();
       };
 
       if (features.deliveryReceiptEnabled) {
-        handler.onDeliveryReceiptUpdated = (channel) => {
-          if (channel.url === message.channelUrl && channel.isGroupChannel()) setState(getCounts(channel, message));
+        handler.onDeliveryReceiptUpdated = (eventChannel) => {
+          if (isDifferentChannel(channel, eventChannel)) return;
+          forceUpdate();
         };
       }
-      sdk.addChannelHandler(id, handler);
+
+      sdk.addChannelHandler(handlerId, handler);
     }
 
     return () => {
-      sdk.removeChannelHandler(id);
+      sdk.removeChannelHandler(handlerId);
     };
   }, [message.sendingStatus]);
 
@@ -65,12 +58,12 @@ const MessageOutgoingStatus: React.FC<Props> = ({ channel, message }) => {
     return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;
   }
 
-  if (state.unreadCount === 0) {
+  if (channel.getUnreadMemberCount(message) === 0) {
     return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;
   }
 
   if (features.deliveryReceiptEnabled) {
-    if (state.undeliveredCount === 0) {
+    if (channel.getUndeliveredMemberCount(message) === 0) {
       return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
     }
     return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;

package/src/components/MessageRenderer/MessageTime.tsx

@@ -6,8 +6,12 @@ import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
 import { useLocalization } from '../../hooks/useContext';
 
-type Props = { message: SendbirdMessage; grouping: boolean; style?: StyleProp<ViewStyle> };
-const MessageTime: React.FC<Props> = ({ message, grouping, style }) => {
+type Props = {
+  message: SendbirdMessage;
+  grouping: boolean;
+  style?: StyleProp<ViewStyle>;
+};
+const MessageTime = ({ message, grouping, style }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   if (grouping) return null;

package/src/components/MessageRenderer/UnknownMessage/index.tsx

@@ -7,7 +7,7 @@ import { useLocalization } from '../../../hooks/useContext';
 import type { MessageRendererInterface } from '../index';
 
 export type UnknownMessageProps = MessageRendererInterface;
-const UnknownMessage: React.FC<UnknownMessageProps> = ({ message, variant, pressed }) => {
+const UnknownMessage = ({ message, variant, pressed }: UnknownMessageProps) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];

package/src/components/MessageRenderer/UserMessage/BaseUserMessage.tsx

@@ -6,7 +6,7 @@ import { Text, URLParsedText, createStyleSheet, useUIKitTheme } from '@sendbird/
 import { useLocalization } from '../../../hooks/useContext';
 import type { UserMessageProps } from './index';
 
-const BaseUserMessage: React.FC<UserMessageProps> = ({ message, variant, pressed }) => {
+const BaseUserMessage = ({ message, variant, pressed }: UserMessageProps) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   const { STRINGS } = useLocalization();

package/src/components/MessageRenderer/UserMessage/OpenGraphUserMessage.tsx

@@ -15,8 +15,10 @@ import { conditionChaining } from '@sendbird/uikit-utils';
 import { useLocalization } from '../../../hooks/useContext';
 import type { UserMessageProps } from './index';
 
-type Props = UserMessageProps & { ogMetaData: Sendbird.OGMetaData };
-const OpenGraphUserMessage: React.FC<Props> = ({ message, variant, pressed, ogMetaData }) => {
+type Props = UserMessageProps & {
+  ogMetaData: Sendbird.OGMetaData;
+};
+const OpenGraphUserMessage = ({ message, variant, pressed, ogMetaData }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors, select, palette } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];

package/src/components/MessageRenderer/UserMessage/index.tsx

@@ -7,7 +7,7 @@ import BaseUserMessage from './BaseUserMessage';
 import OpenGraphUserMessage from './OpenGraphUserMessage';
 
 export type UserMessageProps = MessageRendererInterface<SendbirdUserMessage>;
-const UserMessage: React.FC<UserMessageProps> = (props) => {
+const UserMessage = (props: UserMessageProps) => {
   if (props.message.ogMetaData) {
     return <OpenGraphUserMessage {...props} ogMetaData={props.message.ogMetaData} />;
   }

package/src/components/NewMessagesButton.tsx

@@ -11,7 +11,7 @@ type Props = {
   visible: boolean;
   onPress: () => void;
 };
-const NewMessagesButton: React.FC<Props> = ({ newMessages, visible, onPress }) => {
+const NewMessagesButton = ({ newMessages, visible, onPress }: Props) => {
   const { STRINGS } = useLocalization();
   const { select, palette, colors } = useUIKitTheme();
   if (newMessages.length === 0 || !visible) return null;

package/src/components/ProviderLayout.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 
-const ProviderLayout: React.FC = ({ children }) => {
+const ProviderLayout = ({ children }: React.PropsWithChildren) => {
   const { colors } = useUIKitTheme();
   return <View style={[styles.view, { backgroundColor: colors.background }]}>{children}</View>;
 };

package/src/components/SBUPressable.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Pressable, PressableProps, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
+
+type Components = 'Pressable' | 'TouchableOpacity';
+type Props<T extends Components = 'Pressable'> = {
+  as?: T;
+} & ExtractProps<T, AsProps>;
+
+type AsProps =
+  | {
+      type: 'Pressable';
+      props: PressableProps;
+    }
+  | {
+      type: 'TouchableOpacity';
+      props: TouchableOpacityProps;
+    };
+
+type ExtractProps<T extends Components, U extends AsProps> = U extends { type: T; props: infer P } ? P : never;
+
+function getComponent(as?: Components) {
+  switch (as) {
+    case 'Pressable':
+      return Pressable;
+    case 'TouchableOpacity':
+      return TouchableOpacity;
+    default:
+      return Pressable;
+  }
+}
+
+const SBUPressable = <T extends Components>({ as, ...props }: Props<T>) => {
+  const Renderer = getComponent(as);
+  // @ts-ignore
+  return <Renderer delayLongPress={DEFAULT_LONG_PRESS_DELAY} {...props} />;
+};
+
+export default SBUPressable;

package/src/components/ScrollToBottomButton.tsx

@@ -7,7 +7,7 @@ type Props = {
   visible: boolean;
   onPress: () => void;
 };
-const ScrollToBottomButton: React.FC<Props> = ({ visible, onPress }) => {
+const ScrollToBottomButton = ({ visible, onPress }: Props) => {
   const { palette, select } = useUIKitTheme();
   return (
     <TouchableOpacity

package/src/components/TypedPlaceholder.tsx

@@ -16,7 +16,7 @@ type Props = {
     | 'loading';
   onPressRetry?: () => void;
 };
-const TypedPlaceholder: React.FC<Props> = ({ type, onPressRetry }) => {
+const TypedPlaceholder = ({ type, onPressRetry }: Props) => {
   const { STRINGS } = useLocalization();
   switch (type) {
     case 'no-banned-members':

package/src/components/UserActionBar.tsx

@@ -12,7 +12,7 @@ type Props = {
   disabled: boolean;
   onPressActionMenu?: () => void;
 };
-const UserActionBar: React.FC<Props> = ({ muted, uri, name, disabled, onPressActionMenu, label }) => {
+const UserActionBar = ({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => {
   const { colors } = useUIKitTheme();
 
   const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);
@@ -70,4 +70,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(UserActionBar);
+export default UserActionBar;

package/src/components/UserSelectableBar.tsx

@@ -10,7 +10,7 @@ type Props = {
   selected: boolean;
   disabled: boolean;
 };
-const UserSelectableBar: React.FC<Props> = ({ uri, name, selected, disabled }) => {
+const UserSelectableBar = ({ uri, name, selected, disabled }: Props) => {
   const { colors } = useUIKitTheme();
 
   const iconColor = conditionChaining(
@@ -55,4 +55,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(UserSelectableBar);
+export default UserSelectableBar;

package/src/constants.ts

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

package/src/contexts/Localization.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 
 import type { StringSet } from '../localization/StringSet.type';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   stringSet: StringSet;
-  children?: React.ReactNode;
-};
+}>;
 
 export type LocalizationContextType = {
   STRINGS: StringSet;

package/src/contexts/PlatformService.tsx

@@ -1,22 +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 = {
+type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
-};
+  mediaService?: MediaServiceInterface;
+}>;
 
 export const PlatformServiceContext = React.createContext<Props | null>(null);
-export const PlatformServiceProvider: React.FC<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

@@ -7,13 +7,13 @@ import { useForceUpdate } from '@sendbird/uikit-utils';
 
 import type { FileType } from '../platform/types';
 
-type Props = {
+type Props = React.PropsWithChildren<{
   sdkInstance: SendbirdChatSDK;
 
   enableAutoPushTokenRegistration: boolean;
-  // enableChannelListTypingIndicator: boolean;
-  // enableChannelListMessageReceiptStatus: boolean;
-};
+  enableChannelListTypingIndicator: boolean;
+  enableChannelListMessageReceiptStatus: boolean;
+}>;
 
 type Context = {
   sdk: SendbirdChatSDK;
@@ -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: React.FC<Props> = ({ children, sdkInstance, enableAutoPushTokenRegistration }) => {
+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: React.FC<Props> = ({ children, sdkInstance, e
     features: {
       ...appFeatures,
       autoPushTokenRegistrationEnabled: enableAutoPushTokenRegistration,
+      channelListTypingIndicatorEnabled: enableChannelListTypingIndicator,
+      channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
     },
   };
 

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

@@ -8,7 +8,7 @@ import { useLocalization } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
 
-const GroupChannelHeader: React.FC<GroupChannelProps['Header']> = ({ onPressHeaderLeft, onPressHeaderRight }) => {
+const GroupChannelHeader = ({ onPressHeaderLeft, onPressHeaderRight }: GroupChannelProps['Header']) => {
   const { headerTitle, channel } = useContext(GroupChannelContexts.Fragment);
   const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
   const { STRINGS } = useLocalization();

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

@@ -15,7 +15,7 @@ type EditInputProps = GroupChannelProps['Input'] & {
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const EditInput: React.FC<EditInputProps> = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }) => {
+const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }: EditInputProps) => {
   const { STRINGS } = useLocalization();
   const inputRef = useRef<RNTextInput>(null);
   const toast = useToast();

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

@@ -19,7 +19,7 @@ type SendInputProps = GroupChannelProps['Input'] & {
   setText: (val: string) => void;
   disabled: boolean;
 };
-const SendInput: React.FC<SendInputProps> = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }) => {
+const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {
   const { STRINGS } = useLocalization();
   const { openSheet } = useBottomSheet();
   const { fileService } = usePlatformService();
@@ -38,7 +38,7 @@ const SendInput: React.FC<SendInputProps> = ({ onSendUserMessage, onSendFileMess
           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/GroupChannelInput/index.tsx

@@ -11,7 +11,7 @@ import EditInput from './EditInput';
 import SendInput from './SendInput';
 
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
-const GroupChannelInput: React.FC<GroupChannelProps['Input']> = (props) => {
+const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   const { channel } = props;
 
   const { left, right, bottom } = useSafeAreaInsets();
@@ -65,7 +65,7 @@ const GroupChannelInput: React.FC<GroupChannelProps['Input']> = (props) => {
     </KeyboardAvoidingView>
   );
 };
-const SafeAreaBottom: React.FC<{ height: number }> = ({ height }) => {
+const SafeAreaBottom = ({ height }: { height: number }) => {
   return <View style={{ height }} />;
 };
 

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

@@ -19,18 +19,20 @@ 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';
 
 const HANDLE_NEXT_MSG_SEPARATELY = Platform.select({ default: true });
 
-const GroupChannelMessageList: React.FC<GroupChannelProps['MessageList']> = ({
+const GroupChannelMessageList = ({
   currentUserId,
   channel,
   messages,
@@ -44,9 +46,10 @@ const GroupChannelMessageList: React.FC<GroupChannelProps['MessageList']> = ({
   onResendFailedMessage,
   onDeleteMessage,
   onPressImageMessage,
+  onPressMediaMessage,
   flatListProps,
   enableMessageGrouping,
-}) => {
+}: GroupChannelProps['MessageList']) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { left, right } = useSafeAreaInsets();
@@ -56,6 +59,7 @@ const GroupChannelMessageList: React.FC<GroupChannelProps['MessageList']> = ({
   const getMessagePressActions = useGetMessagePressActions({
     onDeleteMessage,
     onPressImageMessage,
+    onPressMediaMessage,
     currentUserId,
     onResendFailedMessage,
   });
@@ -135,15 +139,15 @@ const GroupChannelMessageList: React.FC<GroupChannelProps['MessageList']> = ({
 };
 
 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;
@@ -114,7 +120,7 @@ export interface GroupChannelContextsType {
   }>;
 }
 export interface GroupChannelModule {
-  Provider: React.FC<GroupChannelProps['Provider']>;
+  Provider: CommonComponent<GroupChannelProps['Provider']>;
   Header: CommonComponent<GroupChannelProps['Header']>;
   MessageList: CommonComponent<GroupChannelProps['MessageList']>;
   Input: CommonComponent<GroupChannelProps['Input']>;
@@ -122,4 +128,4 @@ export interface GroupChannelModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelFragment = React.FC<GroupChannelProps['Fragment']>;
+export type GroupChannelFragment = CommonComponent<GroupChannelProps['Fragment']>;

package/src/domain/groupChannelList/component/GroupChannelListHeader.tsx

@@ -5,15 +5,13 @@ import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
 import { GroupChannelListContexts } from '../module/moduleContext';
 import type { GroupChannelListProps } from '../types';
 
-const GroupChannelListHeader: React.FC<GroupChannelListProps['Header']> = ({ children }) => {
+const GroupChannelListHeader = (_: GroupChannelListProps['Header']) => {
   const fragment = useContext(GroupChannelListContexts.Fragment);
   const typeSelector = useContext(GroupChannelListContexts.TypeSelector);
   const { HeaderComponent } = useHeaderStyle();
 
   return (
-    <HeaderComponent title={fragment.headerTitle} right={<Icon icon={'create'} />} onPressRight={typeSelector.show}>
-      {children}
-    </HeaderComponent>
+    <HeaderComponent title={fragment.headerTitle} right={<Icon icon={'create'} />} onPressRight={typeSelector.show} />
   );
 };
 

package/src/domain/groupChannelList/component/GroupChannelListList.tsx

@@ -8,13 +8,13 @@ import { PASS, SendbirdGroupChannel, useFreshCallback } from '@sendbird/uikit-ut
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { GroupChannelListProps } from '../types';
 
-const GroupChannelListList: React.FC<GroupChannelListProps['List']> = ({
+const GroupChannelListList = ({
   renderGroupChannelPreview,
   groupChannels,
   onLoadNext,
   flatListProps,
   menuItemCreator = PASS,
-}) => {
+}: GroupChannelListProps['List']) => {
   const toast = useToast();
   const { openMenu } = useActionMenu();
   const { STRINGS } = useLocalization();