@sendbird/uikit-react-native 2.3.0 → 2.4.0

package/src/{domain/groupChannel/component/GroupChannelInput → components/ChannelInput}/SendInput.tsx

@@ -18,34 +18,35 @@ import {
   useToast,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining, isImage, shouldCompressImage } from '@sendbird/uikit-utils';
+import { isImage, shouldCompressImage } from '@sendbird/uikit-utils';
 
-import { useLocalization, usePlatformService, useSendbirdChat } from '../../../../hooks/useContext';
-import SBUError from '../../../../libs/SBUError';
-import SBUUtils from '../../../../libs/SBUUtils';
-import type { MentionedUser } from '../../../../types';
-import type { GroupChannelProps } from '../../types';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import SBUError from '../../libs/SBUError';
+import SBUUtils from '../../libs/SBUUtils';
+import type { FileType } from '../../platform/types';
+import type { MentionedUser } from '../../types';
+import type { ChannelInputProps } from './index';
 
-type SendInputProps = GroupChannelProps['Input'] & {
+interface SendInputProps extends ChannelInputProps {
   text: string;
   onChangeText: (val: string) => void;
-  frozen: boolean;
-  muted: boolean;
-  disabled: boolean;
   onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
   mentionedUsers: MentionedUser[];
-};
+}
+
 const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   {
+    onPressSendUserMessage,
+    onPressSendFileMessage,
     onSendUserMessage,
     onSendFileMessage,
     text,
     onChangeText,
-    disabled,
-    frozen,
-    muted,
     onSelectionChange,
     mentionedUsers,
+    inputDisabled,
+    inputFrozen,
+    inputMuted,
   },
   ref,
 ) {
@@ -57,22 +58,44 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
   const { alert } = useAlert();
   const toast = useToast();
 
-  const onPressSend = () => {
-    const mention = {
-      userIds: mentionedUsers.map((it) => it.user.userId),
-      messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
-      type: MentionType.USERS,
-    };
+  const sendUserMessage = () => {
+    const mentionType = MentionType.USERS;
+    const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
+    const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
+
+    if (onPressSendUserMessage) {
+      onPressSendUserMessage({
+        message: text,
+        mentionType,
+        mentionedUserIds,
+        mentionedMessageTemplate,
+      }).catch(onFailureToSend);
+    } else if (onSendUserMessage) {
+      onSendUserMessage(text, {
+        type: mentionType,
+        userIds: mentionedUserIds,
+        messageTemplate: mentionedMessageTemplate,
+      }).catch(onFailureToSend);
+    }
 
-    onSendUserMessage(text, mention).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
     onChangeText('');
   };
 
+  const sendFileMessage = (file: FileType) => {
+    if (onPressSendFileMessage) {
+      onPressSendFileMessage({ file }).catch(onFailureToSend);
+    } else if (onSendFileMessage) {
+      onSendFileMessage(file).catch(onFailureToSend);
+    }
+  };
+
+  const onFailureToSend = () => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error');
+
   const onPressAttachment = () => {
     openSheet({
       sheetItems: [
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA,
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA,
           icon: 'camera',
           onPress: async () => {
             const mediaFile = await fileService.openCamera({
@@ -114,12 +137,12 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
                 });
               }
 
-              onSendFileMessage(mediaFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+              sendFileMessage(mediaFile);
             }
           },
         },
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY,
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY,
           icon: 'photo',
           onPress: async () => {
             const mediaFiles = await fileService.openMediaLibrary({
@@ -164,12 +187,12 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
                 });
               }
 
-              onSendFileMessage(mediaFiles[0]).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+              sendFileMessage(mediaFile);
             }
           },
         },
         {
-          title: STRINGS.GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES,
+          title: STRINGS.LABELS.CHANNEL_INPUT_ATTACHMENT_FILES,
           icon: 'document',
           onPress: async () => {
             const documentFile = await fileService.openDocument({
@@ -197,7 +220,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
                 });
               }
 
-              onSendFileMessage(documentFile).catch(() => toast.show(STRINGS.TOAST.SEND_MSG_ERROR, 'error'));
+              sendFileMessage(documentFile);
             }
           },
         },
@@ -205,11 +228,19 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     });
   };
 
+  const getPlaceholder = () => {
+    if (!inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
+    if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+    if (inputMuted) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED;
+
+    return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
+  };
+
   return (
     <View style={styles.sendInputContainer}>
-      <TouchableOpacity onPress={onPressAttachment} disabled={disabled}>
+      <TouchableOpacity onPress={onPressAttachment} disabled={inputDisabled}>
         <Icon
-          color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+          color={inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
           icon={'add'}
           size={24}
           containerStyle={styles.iconAttach}
@@ -220,25 +251,20 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
         multiline
         disableFullscreenUI
         onSelectionChange={onSelectionChange}
-        editable={!disabled}
+        editable={!inputDisabled}
         onChangeText={onChangeText}
         style={styles.input}
-        placeholder={conditionChaining(
-          [frozen, muted],
-          [
-            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED,
-            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_MUTED,
-            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE,
-          ],
-        )}
+        placeholder={getPlaceholder()}
       >
         {mentionManager.textToMentionedComponents(text, mentionedUsers)}
       </TextInput>
 
       {Boolean(text.trim()) && (
-        <TouchableOpacity onPress={onPressSend} disabled={disabled}>
+        <TouchableOpacity onPress={sendUserMessage} disabled={inputDisabled}>
           <Icon
-            color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+            color={
+              inputDisabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight
+            }
             icon={'send'}
             size={24}
             containerStyle={styles.iconSend}

package/src/{domain/groupChannel/component/GroupChannelInput → components/ChannelInput}/index.tsx

@@ -1,24 +1,83 @@
-import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import {
+  SendbirdBaseChannel,
+  SendbirdBaseMessage,
   SendbirdFileMessage,
-  SendbirdGroupChannel,
+  SendbirdFileMessageCreateParams,
+  SendbirdFileMessageUpdateParams,
+  SendbirdMember,
   SendbirdUserMessage,
-  getGroupChannelChatAvailableState,
+  SendbirdUserMessageCreateParams,
+  SendbirdUserMessageUpdateParams,
   replace,
   useIIFE,
 } from '@sendbird/uikit-utils';
 
-import { useSendbirdChat } from '../../../../hooks/useContext';
-import useMentionTextInput from '../../../../hooks/useMentionTextInput';
-import { GroupChannelContexts } from '../../module/moduleContext';
-import type { GroupChannelProps } from '../../types';
+import { useSendbirdChat } from '../../hooks/useContext';
+import useMentionTextInput from '../../hooks/useMentionTextInput';
+import type { FileType } from '../../platform/types';
+import type { MentionedUser, Range } from '../../types';
 import EditInput from './EditInput';
 import SendInput from './SendInput';
 
+type UserMessageMentionParams = Required<{
+  messageTemplate: SendbirdUserMessageCreateParams['mentionedMessageTemplate'];
+  userIds: SendbirdUserMessageCreateParams['mentionedUserIds'];
+  type: SendbirdUserMessageCreateParams['mentionType'];
+}>;
+
+export type SuggestedMentionListProps = {
+  text: string;
+  selection: Range;
+  topInset: number;
+  bottomInset: number;
+  inputHeight: number;
+  onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
+  mentionedUsers: MentionedUser[];
+};
+
+export type ChannelInputProps = {
+  // default
+  channel: SendbirdBaseChannel;
+  shouldRenderInput: boolean;
+  keyboardAvoidOffset: number;
+
+  // default actions
+  onPressSendUserMessage: (params: SendbirdUserMessageCreateParams) => Promise<void>;
+  onPressSendFileMessage: (params: SendbirdFileMessageCreateParams) => Promise<void>;
+  onPressUpdateUserMessage: (message: SendbirdUserMessage, params: SendbirdUserMessageUpdateParams) => Promise<void>;
+  onPressUpdateFileMessage: (message: SendbirdFileMessage, params: SendbirdFileMessageUpdateParams) => Promise<void>;
+
+  // input status
+  inputFrozen: boolean;
+  inputMuted: boolean;
+  inputDisabled: boolean;
+
+  // edit
+  messageToEdit: undefined | SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToEdit: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
+
+  // mention
+  SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
+
+  /** @deprecated Please use `onPressSendUserMessage` **/
+  onSendFileMessage?: (file: FileType) => Promise<void>;
+  /** @deprecated Please use `onPressSendFileMessage` **/
+  onSendUserMessage?: (text: string, mention?: UserMessageMentionParams) => Promise<void>;
+  /** @deprecated Please use `onPressUpdateUserMessage` **/
+  onUpdateFileMessage?: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
+  /** @deprecated Please use `onPressUpdateFileMessage` **/
+  onUpdateUserMessage?: (
+    editedText: string,
+    message: SendbirdUserMessage,
+    mention?: UserMessageMentionParams,
+  ) => Promise<void>;
+};
+
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
 
@@ -28,36 +87,32 @@ const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const,
 const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
 
 // TODO: Refactor 'Edit' mode to clearly
-const GroupChannelInput = (props: GroupChannelProps['Input']) => {
+const ChannelInput = (props: ChannelInputProps) => {
+  const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
+
   const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
   const { features, mentionManager } = useSendbirdChat();
-  const {
-    channel,
-    messageToEdit,
-    setMessageToEdit,
-    keyboardAvoidOffset = 0,
-  } = useContext(GroupChannelContexts.Fragment);
 
-  const chatAvailableState = getGroupChannelChatAvailableState(channel);
-  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
+    messageToEdit,
+  });
   const inputMode = useIIFE(() => {
     if (!messageToEdit) return 'send';
     if (messageToEdit.isFileMessage()) return 'send';
     return 'edit';
   });
 
-  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
+  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
-  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
-    messageToEdit: messageToEdit,
-  });
+  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
   useTypingTrigger(text, channel);
-  useTextPersistenceOnDisabled(text, onChangeText, chatAvailableState.disabled);
+  useTextPersistenceOnDisabled(text, onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
 
-  const onPressToMention: GroupChannelProps['SuggestedMentionList']['onPressToMention'] = (user, searchStringRange) => {
+  const onPressToMention = (user: SendbirdMember, searchStringRange: Range) => {
     const mentionedMessageText = mentionManager.asMentionedMessageText(user, true);
     const range = { start: searchStringRange.start, end: searchStringRange.start + mentionedMessageText.length - 1 };
 
@@ -79,8 +134,7 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
             {inputMode === 'send' && (
               <SendInput
                 {...props}
-                {...chatAvailableState}
-                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                key={inputKeyToRemount}
                 ref={textInputRef as never}
                 text={text}
                 onChangeText={onChangeText}
@@ -91,23 +145,22 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
             {inputMode === 'edit' && messageToEdit && (
               <EditInput
                 {...props}
-                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                key={inputKeyToRemount}
                 ref={textInputRef as never}
-                autoFocus={AUTO_FOCUS}
                 text={text}
                 onChangeText={onChangeText}
-                messageToEdit={messageToEdit}
-                setMessageToEdit={setMessageToEdit}
-                disabled={chatAvailableState.disabled}
+                autoFocus={AUTO_FOCUS}
                 onSelectionChange={onSelectionChange}
+                messageToEdit={messageToEdit}
                 mentionedUsers={mentionedUsers}
+                setMessageToEdit={setMessageToEdit}
               />
             )}
           </View>
           <SafeAreaBottom height={bottom} />
         </View>
       </KeyboardAvoidingView>
-      {mentionAvailable && (
+      {mentionAvailable && props.SuggestedMentionList && (
         <props.SuggestedMentionList
           text={text}
           selection={selection}
@@ -122,11 +175,13 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   );
 };
 
-const useTypingTrigger = (text: string, channel: SendbirdGroupChannel) => {
-  useEffect(() => {
-    if (text.length === 0) channel.endTyping();
-    else channel.startTyping();
-  }, [text]);
+const useTypingTrigger = (text: string, channel: SendbirdBaseChannel) => {
+  if (channel.isGroupChannel()) {
+    useEffect(() => {
+      if (text.length === 0) channel.endTyping();
+      else channel.startTyping();
+    }, [text]);
+  }
 };
 
 const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
@@ -144,7 +199,7 @@ const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => vo
 
 const useAutoFocusOnEditMode = (
   textInputRef: MutableRefObject<TextInput | undefined>,
-  messageToEdit?: SendbirdUserMessage | SendbirdFileMessage,
+  messageToEdit?: SendbirdBaseMessage,
 ) => {
   useEffect(() => {
     if (messageToEdit?.isUserMessage()) {
@@ -167,4 +222,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(GroupChannelInput);
+export default React.memo(ChannelInput);

package/src/components/FileViewer.tsx

@@ -104,13 +104,13 @@ const FileViewer = ({
       onPressDelete(fileMessage);
     } else {
       alert({
-        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
         buttons: [
           {
-            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
           },
           {
-            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
             style: 'destructive',
             onPress: () => {
               deleteMessage()

package/src/components/MessageRenderer/FileMessage/BaseFileMessage.tsx

@@ -14,7 +14,7 @@ type Props = FileMessageProps & {
 const BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return (
     <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>
       <View style={styles.container}>

package/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -47,7 +47,11 @@ const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
     <View
       style={[
         styles.bubbleContainer,
-        { backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.message[variant].enabled.background },
+        {
+          backgroundColor: imageNotFound
+            ? colors.onBackground04
+            : colors.ui.groupChannelMessage[variant].enabled.background,
+        },
       ]}
     >
       <View style={style}>

package/src/components/MessageRenderer/FileMessage/VideoFileMessage.tsx

@@ -51,7 +51,9 @@ const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
 
   if (loading) {
     return (
-      <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+      <View
+        style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
+      >
         <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
           <View style={style} />
           <PlayIcon />
@@ -62,7 +64,9 @@ const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
   }
 
   return (
-    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+    <View
+      style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
+    >
       <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
         <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
         <PlayIcon />

package/src/components/MessageRenderer/MessageDateSeparator.tsx

@@ -15,6 +15,7 @@ type Props = {
 const MessageDateSeparator = ({ message, prevMessage }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
+
   const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);
   if (sameDay) return null;
   return (

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -18,7 +18,7 @@ const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   return (
     <View style={styles.sender}>
       {(message.isFileMessage() || message.isUserMessage()) && (
-        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>
+        <Text caption1 color={colors.ui.groupChannelMessage.incoming.enabled.textSenderName} numberOfLines={1}>
           {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
         </Text>
       )}

package/src/components/MessageRenderer/MessageTime.tsx

@@ -18,7 +18,7 @@ const MessageTime = ({ message, grouping, style }: Props) => {
 
   return (
     <View style={style}>
-      <Text caption4 color={colors.ui.message.incoming.enabled.textTime}>
+      <Text caption4 color={colors.ui.groupChannelMessage.incoming.enabled.textTime}>
         {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}
       </Text>
     </View>

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

@@ -10,7 +10,7 @@ export type UnknownMessageProps = MessageRendererInterface;
 const UnknownMessage = ({ message, variant, pressed }: UnknownMessageProps) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return (
     <View style={[styles.container, { backgroundColor: color.background }]}>
       <Text body3 color={colors.onBackground01}>

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

@@ -21,7 +21,7 @@ const BaseUserMessage = ({
   const { STRINGS } = useLocalization();
   const { colors, palette } = useUIKitTheme();
 
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
 
   return (
     <View style={[styles.container, { backgroundColor: color.background }]}>

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

@@ -28,7 +28,7 @@ const OpenGraphUserMessage = ({
   const { colors, select, palette } = useUIKitTheme();
 
   const [imageNotFound, setImageNotFound] = useState(false);
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
 
   const containerBackground = select({ dark: palette.background400, light: palette.background100 });
 

package/src/components/OpenChannelMessageRenderer/OpenChannelMessageDateSeparator.tsx

@@ -0,0 +1,46 @@
+import isSameDay from 'date-fns/isSameDay';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+
+const OpenChannelMessageDateSeparator = ({
+  message,
+  prevMessage,
+}: {
+  message: SendbirdMessage;
+  prevMessage?: SendbirdMessage;
+}) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);
+  if (sameDay) return null;
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>
+        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>
+          {STRINGS.OPEN_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    marginVertical: 16,
+  },
+  view: {
+    borderRadius: 10,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+  },
+});
+
+export default OpenChannelMessageDateSeparator;

package/src/components/OpenChannelMessageRenderer/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import type { OpenChannelMessageProps } from '@sendbird/uikit-react-native-foundation';
+import { Box, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdAdminMessage,
+  SendbirdFileMessage,
+  SendbirdMessage,
+  SendbirdUserMessage,
+  calcMessageGrouping,
+  getMessageType,
+} from '@sendbird/uikit-utils';
+
+import type { OpenChannelProps } from '../../domain/openChannel/types';
+import { useLocalization, usePlatformService } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+import OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';
+
+const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({
+  channel,
+  message,
+  onPress,
+  onLongPress,
+  onPressAvatar,
+  enableMessageGrouping,
+  prevMessage,
+  nextMessage,
+}) => {
+  const { STRINGS } = useLocalization();
+  const { mediaService } = usePlatformService();
+  const { groupWithPrev } = calcMessageGrouping(Boolean(enableMessageGrouping), message, prevMessage, nextMessage);
+
+  const messageProps: Omit<OpenChannelMessageProps<SendbirdMessage>, 'message'> = {
+    channel,
+    onPress,
+    onLongPress,
+    onPressURL: () => message.ogMetaData?.url && SBUUtils.openURL(message.ogMetaData?.url),
+    onPressAvatar: () => 'sender' in message && onPressAvatar?.(message.sender, { hideMessageButton: true }),
+    grouped: groupWithPrev,
+    strings: {
+      edited: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,
+      senderName: ('sender' in message && message.sender.nickname) || STRINGS.LABELS.USER_NO_NAME,
+      sentDate: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_TIME(message),
+      fileName: message.isFileMessage() ? STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message) : '',
+      unknownTitle: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message),
+      unknownDescription: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message),
+    },
+  };
+  const renderMessage = () => {
+    switch (getMessageType(message)) {
+      case 'admin': {
+        return <OpenChannelMessage.Admin message={message as SendbirdAdminMessage} {...messageProps} />;
+      }
+      case 'user': {
+        return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;
+      }
+      case 'user.opengraph': {
+        return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;
+      }
+      case 'file':
+      case 'file.audio': {
+        return <OpenChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;
+      }
+      case 'file.image': {
+        return <OpenChannelMessage.ImageFile message={message as SendbirdFileMessage} {...messageProps} />;
+      }
+      case 'file.video': {
+        return (
+          <OpenChannelMessage.VideoFile
+            message={message as SendbirdFileMessage}
+            fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+            {...messageProps}
+          />
+        );
+      }
+      case 'unknown':
+      default: {
+        return <OpenChannelMessage.Unknown message={message} {...messageProps} />;
+      }
+    }
+  };
+
+  return (
+    <Box>
+      <OpenChannelMessageDateSeparator message={message} prevMessage={prevMessage} />
+      {renderMessage()}
+    </Box>
+  );
+};
+
+export default React.memo(OpenChannelMessageRenderer);