@sendbird/uikit-react-native 2.5.0 → 3.0.0-rc.1

package/src/components/ChannelMessageList/index.tsx

@@ -28,9 +28,8 @@ import {
   useFreshCallback,
 } from '@sendbird/uikit-utils';
 
-import { DEPRECATION_WARNING } from '../../constants';
 import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
-import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import { useLocalization, usePlatformService, useSendbirdChat, useUserProfile } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
 import type { CommonComponent } from '../../types';
 import ChatFlatList from '../ChatFlatList';
@@ -67,7 +66,7 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     nextMessage?: SendbirdMessage;
     onPress?: () => void;
     onLongPress?: () => void;
-    onPressAvatar?: UserProfileContextType['show'];
+    onShowUserProfile?: UserProfileContextType['show'];
     channel: T;
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
     enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
@@ -82,9 +81,6 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     onPress: () => void;
   }>;
   flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
-
-  /** @deprecated Please use `onPressMediaMessage` instead **/
-  onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
 } & {
   ref?: Ref<FlatList<SendbirdMessage>> | undefined;
 };
@@ -112,12 +108,12 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     flatListProps,
     onPressNewMessagesButton,
     onPressScrollToBottomButton,
-    onPressImageMessage,
   }: ChannelMessageListProps<T>,
   ref: React.ForwardedRef<FlatList<SendbirdMessage>>,
 ) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
+  const { show } = useUserProfile();
   const { left, right } = useSafeAreaInsets();
   const getMessagePressActions = useGetMessagePressActions({
     channel,
@@ -125,7 +121,6 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     onEditMessage,
     onDeleteMessage,
     onResendFailedMessage,
-    onPressImageMessage,
     onPressMediaMessage,
   });
 
@@ -139,6 +134,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       nextMessage: messages[index - 1],
       onPress,
       onLongPress,
+      onShowUserProfile: show,
       enableMessageGrouping,
       channel,
       currentUserId,
@@ -193,17 +189,10 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   onResendFailedMessage,
   onEditMessage,
   onDeleteMessage,
-  onPressImageMessage,
   onPressMediaMessage,
 }: Pick<
   ChannelMessageListProps<T>,
-  | 'channel'
-  | 'currentUserId'
-  | 'onEditMessage'
-  | 'onDeleteMessage'
-  | 'onResendFailedMessage'
-  | 'onPressImageMessage'
-  | 'onPressMediaMessage'
+  'channel' | 'currentUserId' | 'onEditMessage' | 'onDeleteMessage' | 'onResendFailedMessage' | 'onPressMediaMessage'
 >) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
@@ -211,7 +200,7 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
   const { openSheet } = useBottomSheet();
   const { alert } = useAlert();
   const { clipboardService, fileService } = usePlatformService();
-  const { features } = useSendbirdChat();
+  const { sbOptions } = useSendbirdChat();
 
   const handleFailedMessage = (message: HandleableMessage) => {
     openSheet({
@@ -269,19 +258,21 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
         },
       });
 
-      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-        sheetItems.push(
-          {
-            icon: 'edit',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
-            onPress: () => onEditMessage(msg),
-          },
-          {
-            icon: 'delete',
-            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-            onPress: () => confirmDelete(msg),
-          },
-        );
+      if (!channel.isEphemeral) {
+        if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+          sheetItems.push(
+            {
+              icon: 'edit',
+              title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+              onPress: () => onEditMessage(msg),
+            },
+            {
+              icon: 'delete',
+              title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+              onPress: () => confirmDelete(msg),
+            },
+          );
+        }
       }
     }
 
@@ -307,12 +298,14 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
         },
       });
 
-      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
-        sheetItems.push({
-          icon: 'delete',
-          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
-          onPress: () => confirmDelete(msg),
-        });
+      if (!channel.isEphemeral) {
+        if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+          sheetItems.push({
+            icon: 'delete',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+            onPress: () => confirmDelete(msg),
+          });
+        }
       }
 
       const fileType = getFileType(msg.type || getFileExtension(msg.name));
@@ -321,10 +314,6 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
         case 'video':
         case 'audio': {
           response.onPress = () => {
-            if (onPressImageMessage && fileType === 'image') {
-              Logger.warn(DEPRECATION_WARNING.CHANNEL.ON_PRESS_IMAGE_MESSAGE);
-              onPressImageMessage(msg, getAvailableUriFromFileMessage(msg));
-            }
             onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
           };
           break;
@@ -340,7 +329,10 @@ const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpen
       response.onLongPress = () => {
         openSheet({
           sheetItems,
-          HeaderComponent: shouldRenderReaction(channel, features.reactionEnabled)
+          HeaderComponent: shouldRenderReaction(
+            channel,
+            sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions,
+          )
             ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
             : undefined,
         });

package/src/components/ChatFlatList/FlatListInternal.tsx

@@ -0,0 +1,40 @@
+/**
+ * */
+import type { ForwardedRef, ReactElement } from 'react';
+import type { FlatListProps, FlatList as RNFlatList, ScrollViewProps } from 'react-native';
+import { Platform } from 'react-native';
+
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+type FlatListBidirectional<T = SendbirdMessage> = (props: FlatListProps<T> & BidirectionalProps<T>) => ReactElement;
+type BidirectionalProps<T> = {
+  onStartReached?: ((info: { distanceFromStart: number }) => void) | null | undefined;
+  onStartReachedThreshold?: number | null | undefined;
+  onEndReached?: ((info: { distanceFromEnd: number }) => void) | null | undefined;
+  onEndReachedThreshold?: number | null | undefined;
+  maintainVisibleContentPosition?: ScrollViewProps['maintainVisibleContentPosition'];
+  ref: ForwardedRef<RNFlatList<T>>;
+};
+
+function shouldUseScrollViewEnhancer() {
+  if (Platform.constants.reactNativeVersion.major < 1) {
+    if (Platform.constants.reactNativeVersion.minor < 72) {
+      return true;
+    }
+  }
+  return false;
+}
+function getFlatList(): FlatListBidirectional {
+  if (shouldUseScrollViewEnhancer()) {
+    try {
+      return require('@sendbird/react-native-scrollview-enhancer').FlatList;
+    } catch {
+      return require('react-native').FlatList;
+    }
+  } else {
+    return require('react-native').FlatList;
+  }
+}
+
+const FlatListInternal = getFlatList();
+export default FlatListInternal;

package/src/components/{ChatFlatList.tsx → ChatFlatList/index.tsx}

@@ -1,10 +1,11 @@
 import React, { forwardRef, useRef } from 'react';
 import { FlatListProps, Platform, FlatList as RNFlatList, StyleSheet } from 'react-native';
 
-import { FlatList } from '@sendbird/react-native-scrollview-enhancer';
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { NOOP, SendbirdMessage, getMessageUniqId, useFreshCallback } from '@sendbird/uikit-utils';
 
+import FlatListInternal from './FlatListInternal';
+
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
 const BOTTOM_DETECT_THRESHOLD = 25;
 const UNREACHABLE_THRESHOLD = Number.MIN_SAFE_INTEGER;
@@ -13,15 +14,10 @@ type Props = Omit<FlatListProps<SendbirdMessage>, 'onEndReached'> & {
   onBottomReached: () => void;
   onTopReached: () => void;
   onScrolledAwayFromBottom: (value: boolean) => void;
-
-  /** @deprecated Please use `onScrolledAwayFromBottom` **/
-  onLeaveScrollBottom?: (value: boolean) => void;
-  /** @deprecated Not used anymore **/
-  nextMessages?: unknown;
 };
 // FIXME: Inverted FlatList performance issue on Android {@link https://github.com/facebook/react-native/issues/30034}
-const ChatFlatList = forwardRef<RNFlatList<SendbirdMessage>, Props>(function CustomFlatList(
-  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onLeaveScrollBottom, onScroll, ...props },
+const ChatFlatList = forwardRef<RNFlatList, Props>(function CustomFlatList(
+  { onTopReached, onBottomReached, onScrolledAwayFromBottom, onScroll, ...props },
   ref,
 ) {
   const { select } = useUIKitTheme();
@@ -37,10 +33,8 @@ const ChatFlatList = forwardRef<RNFlatList<SendbirdMessage>, Props>(function Cus
 
     if (BOTTOM_DETECT_THRESHOLD < prevOffsetY && currOffsetY <= BOTTOM_DETECT_THRESHOLD) {
       onScrolledAwayFromBottom(false);
-      onLeaveScrollBottom?.(false);
     } else if (BOTTOM_DETECT_THRESHOLD < currOffsetY && prevOffsetY <= BOTTOM_DETECT_THRESHOLD) {
       onScrolledAwayFromBottom(true);
-      onLeaveScrollBottom?.(true);
     }
 
     contentOffsetY.current = contentOffset.y;
@@ -50,12 +44,13 @@ const ChatFlatList = forwardRef<RNFlatList<SendbirdMessage>, Props>(function Cus
     ANDROID_BUG_ALERT_SHOWED = true;
     // eslint-disable-next-line no-console
     console.warn(
-      'UIKit Warning: Inverted FlatList has a performance issue on Android, Maybe this is a bug please refer link\nhttps://github.com/facebook/react-native/issues/30034',
+      'UIKit Warning: The inverted FlatList has a performance issue on Android. Maybe this is a bug.\n' +
+        'Please refer to the link: https://github.com/facebook/react-native/issues/30034',
     );
   }
 
   return (
-    <FlatList
+    <FlatListInternal
       bounces={false}
       removeClippedSubviews
       keyboardDismissMode={'on-drag'}

package/src/components/{MessageRenderer/MessageDateSeparator.tsx → GroupChannelMessageRenderer/GroupChannelMessageDateSeparator.tsx}

@@ -7,17 +7,19 @@ import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
 import { useLocalization } from '../../hooks/useContext';
 
-type Props = {
+const GroupChannelMessageDateSeparator = ({
+  message,
+  prevMessage,
+}: {
   message: SendbirdMessage;
   prevMessage?: SendbirdMessage;
-};
-
-const MessageDateSeparator = ({ message, prevMessage }: Props) => {
+}) => {
   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 }]}>
@@ -41,4 +43,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default MessageDateSeparator;
+export default GroupChannelMessageDateSeparator;

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageFocusAnimation.tsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing } from 'react-native';
+
+import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../constants';
+
+const GroupChannelMessageFocusAnimation = (props: React.PropsWithChildren<{ focused: boolean }>) => {
+  const translateY = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (props.focused) {
+      setTimeout(() => {
+        Animated.sequence(
+          [
+            { toValue: -10, duration: 500 },
+            { toValue: 0, duration: 100 },
+            { toValue: -10, duration: 200 },
+            { toValue: 0, duration: 100 },
+          ].map((value) =>
+            Animated.timing(translateY, { ...value, useNativeDriver: true, easing: Easing.inOut(Easing.ease) }),
+          ),
+        ).start();
+      }, MESSAGE_SEARCH_SAFE_SCROLL_DELAY + MESSAGE_FOCUS_ANIMATION_DELAY);
+    }
+  }, [props.focused]);
+
+  return <Animated.View style={{ transform: [{ translateY }] }}>{props.children}</Animated.View>;
+};
+
+export default GroupChannelMessageFocusAnimation;

package/src/components/{MessageRenderer/MessageOutgoingStatus.tsx → GroupChannelMessageRenderer/GroupChannelMessageOutgoingStatus.tsx}

@@ -1,48 +1,48 @@
 import React from 'react';
+import type { ImageStyle, StyleProp } from 'react-native';
 
 import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
-import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Icon, LoadingSpinner, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../../hooks/useContext';
 
 const SIZE = 16;
 
-type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
-const MessageOutgoingStatus = ({ channel, message }: Props) => {
+type Props = {
+  channel: SendbirdGroupChannel;
+  message: SendbirdMessage;
+  style?: StyleProp<ImageStyle>;
+};
+const GroupChannelMessageOutgoingStatus = ({ channel, message, style }: Props) => {
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
+  if (channel.isEphemeral) return null;
 
   const { sdk } = useSendbirdChat();
   const { colors } = useUIKitTheme();
   const outgoingStatus = useMessageOutgoingStatus(sdk, channel, message);
 
   if (outgoingStatus === 'PENDING') {
-    return <LoadingSpinner size={SIZE} style={styles.container} />;
+    return <LoadingSpinner size={SIZE} style={style} />;
   }
 
   if (outgoingStatus === 'FAILED') {
-    return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;
+    return <Icon icon={'error'} size={SIZE} color={colors.error} style={style} />;
   }
 
   if (outgoingStatus === 'READ') {
-    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;
+    return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={style} />;
   }
 
   if (outgoingStatus === 'UNREAD' || outgoingStatus === 'DELIVERED') {
-    return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+    return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={style} />;
   }
 
   if (outgoingStatus === 'UNDELIVERED') {
-    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+    return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={style} />;
   }
 
   return null;
 };
 
-const styles = createStyleSheet({
-  container: {
-    marginRight: 4,
-  },
-});
-
-export default React.memo(MessageOutgoingStatus);
+export default React.memo(GroupChannelMessageOutgoingStatus);

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+
+import type { GroupChannelMessageProps, RegexTextPattern } from '@sendbird/uikit-react-native-foundation';
+import { Box, GroupChannelMessage, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdAdminMessage,
+  SendbirdFileMessage,
+  SendbirdMessage,
+  SendbirdUserMessage,
+  calcMessageGrouping,
+  getMessageType,
+  isMyMessage,
+  shouldRenderReaction,
+  useIIFE,
+} from '@sendbird/uikit-utils';
+
+import type { GroupChannelProps } from '../../domain/groupChannel/types';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+import { ReactionAddons } from '../ReactionAddons';
+import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
+import GroupChannelMessageFocusAnimation from './GroupChannelMessageFocusAnimation';
+import GroupChannelMessageOutgoingStatus from './GroupChannelMessageOutgoingStatus';
+
+const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
+  channel,
+  message,
+  onPress,
+  onLongPress,
+  onShowUserProfile,
+  enableMessageGrouping,
+  focused,
+  prevMessage,
+  nextMessage,
+}) => {
+  const { palette } = useUIKitTheme();
+  const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
+  const { STRINGS } = useLocalization();
+  const { mediaService } = usePlatformService();
+  const { groupWithPrev, groupWithNext } = calcMessageGrouping(
+    Boolean(enableMessageGrouping),
+    message,
+    prevMessage,
+    nextMessage,
+  );
+
+  const reactionChildren = useIIFE(() => {
+    if (
+      shouldRenderReaction(channel, sbOptions.uikitWithAppInfo.groupChannel.channel.enableReactions) &&
+      message.reactions &&
+      message.reactions.length > 0
+    ) {
+      return <ReactionAddons.Message channel={channel} message={message} />;
+    }
+    return null;
+  });
+
+  const messageProps: Omit<GroupChannelMessageProps<SendbirdMessage>, 'message'> = {
+    channel,
+    variant: isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming',
+    onPress,
+    onLongPress,
+    onPressURL: (url) => SBUUtils.openURL(url),
+    onPressAvatar: () => {
+      if ('sender' in message) onShowUserProfile?.(message.sender);
+    },
+    onPressMentionedUser: (mentionedUser) => {
+      if (mentionedUser) onShowUserProfile?.(mentionedUser);
+    },
+    groupedWithPrev: groupWithPrev,
+    groupedWithNext: groupWithNext,
+    children: reactionChildren,
+    sendingStatus: isMyMessage(message, currentUser?.userId) ? (
+      <GroupChannelMessageOutgoingStatus channel={channel} message={message} />
+    ) : null,
+    strings: {
+      edited: STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,
+      senderName: ('sender' in message && message.sender.nickname) || STRINGS.LABELS.USER_NO_NAME,
+      sentDate: STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message),
+      fileName: message.isFileMessage() ? STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message) : '',
+      unknownTitle: STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message),
+      unknownDescription: STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message),
+    },
+  };
+
+  const userMessageProps: {
+    renderRegexTextChildren: (message: SendbirdUserMessage) => string;
+    regexTextPatterns: RegexTextPattern[];
+  } = {
+    renderRegexTextChildren: (message) => {
+      if (
+        mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
+      ) {
+        return message.mentionedMessageTemplate;
+      } else {
+        return message.message;
+      }
+    },
+    regexTextPatterns: [
+      {
+        regex: mentionManager.templateRegex,
+        replacer({ match, groups, parentProps, index, keyPrefix }) {
+          const user = message.mentionedUsers?.find((it) => it.userId === groups[2]);
+          if (user) {
+            const mentionColor =
+              !isMyMessage(message, currentUser?.userId) && user.userId === currentUser?.userId
+                ? palette.onBackgroundLight01
+                : parentProps?.color;
+
+            return (
+              <Text
+                {...parentProps}
+                key={`${keyPrefix}-${index}`}
+                color={mentionColor}
+                onPress={() => messageProps.onPressMentionedUser?.(user)}
+                onLongPress={messageProps.onLongPress}
+                style={[
+                  parentProps?.style,
+                  { fontWeight: '700' },
+                  user.userId === currentUser?.userId && { backgroundColor: palette.highlight },
+                ]}
+              >
+                {`${mentionManager.asMentionedMessageText(user)}`}
+              </Text>
+            );
+          }
+          return match;
+        },
+      },
+    ],
+  };
+
+  const renderMessage = () => {
+    switch (getMessageType(message)) {
+      case 'admin': {
+        return <GroupChannelMessage.Admin message={message as SendbirdAdminMessage} {...messageProps} />;
+      }
+      case 'user':
+      case 'user.opengraph': {
+        if (message.ogMetaData && sbOptions.uikitWithAppInfo.groupChannel.channel.enableOgtag) {
+          return (
+            <GroupChannelMessage.OpenGraphUser
+              message={message as SendbirdUserMessage}
+              {...userMessageProps}
+              {...messageProps}
+            />
+          );
+        } else {
+          return (
+            <GroupChannelMessage.User
+              message={message as SendbirdUserMessage}
+              {...userMessageProps}
+              {...messageProps}
+            />
+          );
+        }
+      }
+      case 'file':
+      case 'file.audio': {
+        return <GroupChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;
+      }
+      case 'file.image': {
+        return <GroupChannelMessage.ImageFile message={message as SendbirdFileMessage} {...messageProps} />;
+      }
+      case 'file.video': {
+        return (
+          <GroupChannelMessage.VideoFile
+            message={message as SendbirdFileMessage}
+            fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+            {...messageProps}
+          />
+        );
+      }
+      case 'unknown':
+      default: {
+        return <GroupChannelMessage.Unknown message={message} {...messageProps} />;
+      }
+    }
+  };
+
+  const messageGap = useIIFE(() => {
+    if (message.isAdminMessage()) {
+      if (nextMessage?.isAdminMessage()) {
+        return 8;
+      } else {
+        return 16;
+      }
+    } else if (groupWithNext) {
+      return 2;
+    } else {
+      return 16;
+    }
+  });
+
+  return (
+    <Box paddingHorizontal={16} marginBottom={messageGap}>
+      <GroupChannelMessageDateSeparator message={message} prevMessage={prevMessage} />
+      <GroupChannelMessageFocusAnimation focused={focused}>{renderMessage()}</GroupChannelMessageFocusAnimation>
+    </Box>
+  );
+};
+
+export default React.memo(GroupChannelMessageRenderer);

package/src/components/MessageSearchResultItem.tsx

@@ -17,7 +17,7 @@ import { useLocalization } from '../hooks/useContext';
 
 const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
 
-export const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultItem'] = ({ onPress, message }) => {
+const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultItem'] = ({ onPress, message }) => {
   const { colors, select, palette } = useUIKitTheme();
   const { STRINGS } = useLocalization();
 
@@ -123,3 +123,5 @@ const styles = createStyleSheet({
     height: 1,
   },
 });
+
+export default MessageSearchResultItem;

package/src/components/OpenChannelMessageRenderer/index.tsx

@@ -12,7 +12,7 @@ import {
 } from '@sendbird/uikit-utils';
 
 import type { OpenChannelProps } from '../../domain/openChannel/types';
-import { useLocalization, usePlatformService } from '../../hooks/useContext';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
 import OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';
 
@@ -21,11 +21,12 @@ const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage']
   message,
   onPress,
   onLongPress,
-  onPressAvatar,
+  onShowUserProfile,
   enableMessageGrouping,
   prevMessage,
   nextMessage,
 }) => {
+  const { sbOptions } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const { mediaService } = usePlatformService();
   const { groupWithPrev } = calcMessageGrouping(Boolean(enableMessageGrouping), message, prevMessage, nextMessage);
@@ -34,8 +35,8 @@ const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage']
     channel,
     onPress,
     onLongPress,
-    onPressURL: () => message.ogMetaData?.url && SBUUtils.openURL(message.ogMetaData?.url),
-    onPressAvatar: () => 'sender' in message && onPressAvatar?.(message.sender, { hideMessageButton: true }),
+    onPressURL: (url) => SBUUtils.openURL(url),
+    onPressAvatar: () => 'sender' in message && onShowUserProfile?.(message.sender, { hideMessageButton: true }),
     grouped: groupWithPrev,
     strings: {
       edited: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,
@@ -55,7 +56,11 @@ const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage']
         return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;
       }
       case 'user.opengraph': {
-        return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;
+        if (sbOptions.uikitWithAppInfo.openChannel.channel.enableOgtag) {
+          return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;
+        } else {
+          return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;
+        }
       }
       case 'file':
       case 'file.audio': {

package/src/constants.ts

@@ -1,10 +1,5 @@
 export const DEFAULT_LONG_PRESS_DELAY = 350;
 export const MESSAGE_SEARCH_SAFE_SCROLL_DELAY = 500;
 export const MESSAGE_FOCUS_ANIMATION_DELAY = 250;
-export const DEPRECATION_WARNING = {
-  CHANNEL: {
-    ON_PRESS_IMAGE_MESSAGE: '`onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead',
-  },
-} as const;
 
 export const UNKNOWN_USER_ID = '##__USER_ID_IS_NOT_PROVIDED__##';