@sendbird/uikit-react-native 2.2.0 → 2.4.0

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

@@ -5,7 +5,7 @@ import { RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uiki
 import { urlRegexStrict } from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
-import { openUrl } from '../../../utils/common';
+import SBUUtils from '../../../libs/SBUUtils';
 import type { UserMessageProps } from './index';
 
 const BaseUserMessage = ({
@@ -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 }]}>
@@ -62,7 +62,7 @@ const BaseUserMessage = ({
                     <Text
                       {...parentProps}
                       key={`${keyPrefix}-${index}`}
-                      onPress={() => openUrl(match)}
+                      onPress={() => SBUUtils.openURL(match)}
                       onLongPress={onLongPressURL}
                       style={[parentProps?.style, { textDecorationLine: 'underline' }]}
                     >

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

@@ -1,12 +1,12 @@
 import React, { useState } from 'react';
-import { Linking, TouchableOpacity, View } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 import type { OGMetaData } from '@sendbird/chat/message';
 import { Icon, Image, RegexText, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining, urlRegexRough } from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat, useUserProfile } from '../../../hooks/useContext';
-import { openUrl } from '../../../utils/common';
+import SBUUtils from '../../../libs/SBUUtils';
 import type { UserMessageProps } from './index';
 
 type Props = UserMessageProps & {
@@ -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 });
 
@@ -73,7 +73,7 @@ const OpenGraphUserMessage = ({
                       <Text
                         {...parentProps}
                         key={`${keyPrefix}-${index}`}
-                        onPress={() => openUrl(match)}
+                        onPress={() => SBUUtils.openURL(match)}
                         onLongPress={onLongPressURL}
                         style={[parentProps?.style, styles.urlText]}
                       >
@@ -98,7 +98,7 @@ const OpenGraphUserMessage = ({
         <TouchableOpacity
           style={{ backgroundColor: select({ dark: palette.background500, light: palette.background200 }) }}
           activeOpacity={0.85}
-          onPress={() => Linking.openURL(ogMetaData.url).catch()}
+          onPress={() => SBUUtils.openURL(ogMetaData.url)}
         >
           <View
             style={[

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);

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdBaseChannel, SendbirdBaseMessage, useUniqId } from '@sendbird/uikit-utils';
+import { SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
@@ -14,15 +14,14 @@ type Props = {
   channel: SendbirdBaseChannel;
   message: SendbirdBaseMessage;
 };
-const COMPONENT_NAME = 'BottomSheetReactionAddon';
 const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   const { emojiManager, currentUser, sdk } = useSendbirdChat();
   const { updateReactionFocusedItem, openReactionList } = useReaction();
   const { colors } = useUIKitTheme();
-  const id = useUniqId(COMPONENT_NAME);
+  const handlerId = useUniqHandlerId('BottomSheetReactionAddon');
   const { left, right } = useSafeAreaInsets();
 
-  useChannelHandler(sdk, COMPONENT_NAME + id, {
+  useChannelHandler(sdk, handlerId, {
     async onReactionUpdated(eventChannel, event) {
       if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {
         updateReactionFocusedItem({

package/src/components/TypedPlaceholder.tsx

@@ -7,6 +7,7 @@ import { useLocalization } from '../hooks/useContext';
 type Props = {
   type:
     | 'no-muted-members'
+    | 'no-muted-participants'
     | 'no-banned-users'
     | 'no-channels'
     | 'no-messages'
@@ -27,6 +28,8 @@ const TypedPlaceholder = ({ type, onPressRetry }: Props) => {
       return <Placeholder icon={'message'} message={STRINGS.PLACEHOLDER.NO_MESSAGES} />;
     case 'no-muted-members':
       return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS} />;
+    case 'no-muted-participants':
+      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_PARTICIPANTS} />;
     case 'no-results-found':
       return <Placeholder icon={'search'} message={STRINGS.PLACEHOLDER.NO_RESULTS_FOUND} />;
     case 'no-users':

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -17,7 +17,7 @@ import {
   isDifferentChannel,
   isMyMessage,
   useIIFE,
-  useUniqId,
+  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ChannelCover from '../components/ChannelCover';
@@ -39,8 +39,8 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
 
   if (features.channelListTypingIndicatorEnabled) {
-    const typingId = useUniqId('GroupChannelPreviewContainer');
-    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {
+    const handlerId = useUniqHandlerId('GroupChannelPreviewContainer_TypingIndicator');
+    useChannelHandler(sdk, handlerId, {
       onTypingStatusUpdated(eventChannel) {
         if (isDifferentChannel(channel, eventChannel)) return;
         setTypingUsers(eventChannel.getTypingUsers());

package/src/containers/SendbirdUIKitContainer.tsx

@@ -15,8 +15,8 @@ import {
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
 import type {
-  SendbirdBaseChannel,
   SendbirdChatSDK,
+  SendbirdGroupChannel,
   SendbirdGroupChannelCreateParams,
   SendbirdMember,
   SendbirdUser,
@@ -30,6 +30,8 @@ import type { UIKitFeaturesInSendbirdChatContext } from '../contexts/SendbirdCha
 import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
 import { UserProfileProvider } from '../contexts/UserProfileCtx';
 import EmojiManager from '../libs/EmojiManager';
+import type { ImageCompressionConfigInterface } from '../libs/ImageCompressionConfig';
+import ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
 import MentionManager from '../libs/MentionManager';
@@ -57,6 +59,7 @@ export const SendbirdUIKit = Object.freeze({
     CHANNEL_LIST_MESSAGE_RECEIPT_STATUS: false,
     USE_USER_ID_FOR_NICKNAME: false,
     USER_MENTION: false,
+    IMAGE_COMPRESSION: true,
   },
 });
 
@@ -66,7 +69,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     file: FileServiceInterface;
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
-    media?: MediaServiceInterface;
+    media: MediaServiceInterface;
   };
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
@@ -82,21 +85,23 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     defaultHeaderHeight?: number;
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
+  errorBoundary?: {
+    disabled?: boolean;
+    onError?: (props: ErrorBoundaryProps) => void;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  };
   toast?: {
     dismissTimeout?: number;
   };
   userProfile?: {
-    onCreateChannel: (channel: SendbirdBaseChannel) => void;
+    onCreateChannel: (channel: SendbirdGroupChannel) => void;
     onBeforeCreateChannel?: (
       channelParams: SendbirdGroupChannelCreateParams,
       users: SendbirdUser[] | SendbirdMember[],
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
   userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
-  errorBoundary?: {
-    onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
-  };
+  imageCompression?: Partial<ImageCompressionConfigInterface>;
 }>;
 
 const SendbirdUIKitContainer = ({
@@ -106,10 +111,11 @@ const SendbirdUIKitContainer = ({
   platformServices,
   localization,
   styles,
+  errorBoundary,
   toast,
   userProfile,
   userMention,
-  errorBoundary,
+  imageCompression,
 }: SendbirdUIKitContainerProps) => {
   const defaultStringSet = localization?.stringSet ?? StringSetEn;
 
@@ -125,7 +131,9 @@ const SendbirdUIKitContainer = ({
     unsubscribes.current = sendbird.unsubscribes;
     return sendbird.chatSDK;
   });
+
   const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
+
   const mentionManager = useMemo(() => {
     const config = new MentionConfig({
       mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
@@ -135,7 +143,20 @@ const SendbirdUIKitContainer = ({
       trigger: MentionConfig.DEFAULT.TRIGGER,
     });
     return new MentionManager(config, chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION);
-  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
+  }, [
+    chatOptions?.enableUserMention,
+    userMention?.mentionLimit,
+    userMention?.suggestionLimit,
+    userMention?.debounceMills,
+  ]);
+
+  const imageCompressionConfig = useMemo(() => {
+    return new ImageCompressionConfig({
+      compressionRate: imageCompression?.compressionRate || ImageCompressionConfig.DEFAULT.COMPRESSION_RATE,
+      width: imageCompression?.width,
+      height: imageCompression?.height,
+    });
+  }, [imageCompression?.compressionRate, imageCompression?.width, imageCompression?.height]);
 
   useLayoutEffect(() => {
     if (!isFirstMount) {
@@ -155,12 +176,21 @@ const SendbirdUIKitContainer = ({
     };
   }, [appId, internalStorage]);
 
+  const renderChildren = () => {
+    if (errorBoundary?.disabled) {
+      return children;
+    } else {
+      return <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>;
+    }
+  };
+
   return (
     <SafeAreaProvider>
       <SendbirdChatProvider
         sdkInstance={sdkInstance}
         emojiManager={emojiManager}
         mentionManager={mentionManager}
+        imageCompressionConfig={imageCompressionConfig}
         enableAutoPushTokenRegistration={
           chatOptions?.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
         }
@@ -175,6 +205,7 @@ const SendbirdUIKitContainer = ({
           chatOptions?.enableUseUserIdForNickname ?? SendbirdUIKit.DEFAULT.USE_USER_ID_FOR_NICKNAME
         }
         enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
+        enableImageCompression={chatOptions?.enableImageCompression ?? SendbirdUIKit.DEFAULT.IMAGE_COMPRESSION}
       >
         <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider
@@ -193,6 +224,7 @@ const SendbirdUIKitContainer = ({
                   <UserProfileProvider
                     onCreateChannel={userProfile?.onCreateChannel}
                     onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
+                    statusBarTranslucent={styles?.statusBarTranslucent ?? true}
                   >
                     <ReactionProvider>
                       <LocalizationContext.Consumer>
@@ -209,9 +241,7 @@ const SendbirdUIKitContainer = ({
                                 },
                               }}
                             >
-                              <InternalErrorBoundaryContainer {...errorBoundary}>
-                                {children}
-                              </InternalErrorBoundaryContainer>
+                              {renderChildren()}
                             </DialogProvider>
                           );
                         }}

package/src/contexts/PlatformServiceCtx.tsx

@@ -11,10 +11,17 @@ type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
-  mediaService?: MediaServiceInterface;
+  mediaService: MediaServiceInterface;
 }>;
 
-export const PlatformServiceContext = React.createContext<Props | null>(null);
+export type PlatformServiceContextType = {
+  fileService: FileServiceInterface;
+  clipboardService: ClipboardServiceInterface;
+  notificationService: NotificationServiceInterface;
+  mediaService: MediaServiceInterface;
+};
+
+export const PlatformServiceContext = React.createContext<PlatformServiceContextType | null>(null);
 export const PlatformServiceProvider = ({
   children,
   fileService,

package/src/contexts/SendbirdChatCtx.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { AppState, AppStateStatus } from 'react-native';
+import React, { useCallback, useState } from 'react';
 
 import { useAppFeatures } from '@sendbird/uikit-chat-hooks';
 import type {
@@ -8,9 +7,10 @@ import type {
   SendbirdUser,
   SendbirdUserUpdateParams,
 } from '@sendbird/uikit-utils';
-import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils';
+import { confirmAndMarkAsDelivered, useAppState, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type EmojiManager from '../libs/EmojiManager';
+import type ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import type MentionManager from '../libs/MentionManager';
 import type { FileType } from '../platform/types';
 
@@ -20,18 +20,21 @@ export interface UIKitFeaturesInSendbirdChatContext {
   enableChannelListMessageReceiptStatus: boolean;
   enableUseUserIdForNickname: boolean;
   enableUserMention: boolean;
+  enableImageCompression: boolean;
 }
 
 interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
   sdkInstance: SendbirdChatSDK;
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
 }
 
-type Context = {
+export type SendbirdChatContextType = {
   sdk: SendbirdChatSDK;
   emojiManager: EmojiManager;
   mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
   currentUser?: SendbirdUser;
   setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
 
@@ -46,6 +49,7 @@ type Context = {
     channelListMessageReceiptStatusEnabled: boolean;
     useUserIdForNicknameEnabled: boolean;
     userMentionEnabled: boolean;
+    imageCompressionEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -55,29 +59,31 @@ type Context = {
   };
 };
 
-export const SendbirdChatContext = React.createContext<Context | null>(null);
+export const SendbirdChatContext = React.createContext<SendbirdChatContextType | null>(null);
 export const SendbirdChatProvider = ({
   children,
   sdkInstance,
   emojiManager,
   mentionManager,
+  imageCompressionConfig,
   enableAutoPushTokenRegistration,
   enableChannelListMessageReceiptStatus,
   enableChannelListTypingIndicator,
   enableUseUserIdForNickname,
   enableUserMention,
+  enableImageCompression,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
   const appFeatures = useAppFeatures(sdkInstance);
 
-  const setCurrentUser: Context['setCurrentUser'] = useCallback((user) => {
+  const setCurrentUser: SendbirdChatContextType['setCurrentUser'] = useCallback((user) => {
     // NOTE: Sendbird SDK handle User object is always same object, so force update after setCurrentUser
     _setCurrentUser(user);
     forceUpdate();
   }, []);
 
-  const updateCurrentUserInfo: Context['updateCurrentUserInfo'] = useCallback(
+  const updateCurrentUserInfo: SendbirdChatContextType['updateCurrentUserInfo'] = useCallback(
     async (nickname, profile) => {
       let user = currentUser;
 
@@ -109,28 +115,24 @@ export const SendbirdChatProvider = ({
     [sdkInstance, currentUser, setCurrentUser],
   );
 
-  const markAsDeliveredWithChannel: Context['markAsDeliveredWithChannel'] = useCallback(
+  const markAsDeliveredWithChannel: SendbirdChatContextType['markAsDeliveredWithChannel'] = useCallback(
     (channel: SendbirdGroupChannel) => {
       if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered([channel]);
     },
     [sdkInstance, appFeatures.deliveryReceiptEnabled],
   );
 
-  useEffect(() => {
-    const listener = (status: AppStateStatus) => {
-      // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
-      if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
-      else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
-    };
+  useAppState('change', (status) => {
+    // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
+    if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
+    else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
+  });
 
-    const subscriber = AppState.addEventListener('change', listener);
-    return () => subscriber.remove();
-  }, [sdkInstance]);
-
-  const value: Context = {
+  const value: SendbirdChatContextType = {
     sdk: sdkInstance,
     emojiManager,
     mentionManager,
+    imageCompressionConfig,
     currentUser,
     setCurrentUser,
 
@@ -144,6 +146,7 @@ export const SendbirdChatProvider = ({
       channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
       useUserIdForNicknameEnabled: enableUseUserIdForNickname,
       userMentionEnabled: enableUserMention,
+      imageCompressionEnabled: enableImageCompression,
     },
   };
 

package/src/contexts/UserProfileCtx.tsx

@@ -8,7 +8,7 @@ import type {
   SendbirdMember,
   SendbirdUser,
 } from '@sendbird/uikit-utils';
-import { Logger, PASS, useIIFE } from '@sendbird/uikit-utils';
+import { Logger, PASS, getDefaultGroupChannelCreateParams, useIIFE } from '@sendbird/uikit-utils';
 
 import { LocalizationContext } from '../contexts/LocalizationCtx';
 import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
@@ -19,20 +19,30 @@ type OnBeforeCreateChannel = (
   users: SendbirdUser[] | SendbirdMember[],
 ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
 
+type ShowOptions = {
+  hideMessageButton?: boolean;
+};
+
 export type UserProfileContextType = {
-  show(user: SendbirdUser | SendbirdMember): void;
+  show(user: SendbirdUser | SendbirdMember, options?: ShowOptions): void;
   hide(): void;
 };
 
 type Props = React.PropsWithChildren<{
   onCreateChannel?: OnCreateChannel;
   onBeforeCreateChannel?: OnBeforeCreateChannel;
+  statusBarTranslucent?: boolean;
 }>;
 
 let WARN_onCreateChannel = false;
 
 export const UserProfileContext = React.createContext<UserProfileContextType | null>(null);
-export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
+export const UserProfileProvider = ({
+  children,
+  onCreateChannel,
+  onBeforeCreateChannel = PASS,
+  statusBarTranslucent = true,
+}: Props) => {
   const chatContext = useContext(SendbirdChatContext);
   const localizationContext = useContext(LocalizationContext);
 
@@ -50,32 +60,36 @@ export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateC
 
   const [user, setUser] = useState<SendbirdUser | SendbirdMember>();
   const [visible, setVisible] = useState(false);
+  const [hideMessageButton, setHideMessageButton] = useState(false);
 
-  const show: UserProfileContextType['show'] = useCallback((user) => {
+  const show: UserProfileContextType['show'] = useCallback((user, options) => {
     setUser(user);
     setVisible(true);
+    setHideMessageButton(Boolean(options?.hideMessageButton));
   }, []);
 
   const hide: UserProfileContextType['hide'] = useCallback(() => {
     setVisible(false);
   }, []);
 
+  const onDismiss = () => {
+    setUser(undefined);
+    setHideMessageButton(false);
+  };
+
   const userProfileButton = useIIFE(() => {
     const isMe = chatContext.currentUser && user?.userId === chatContext.currentUser.userId;
     if (isMe) return undefined;
+    if (hideMessageButton) return undefined;
 
     const onPressMessageButton = async () => {
       if (user) {
-        const params: SendbirdGroupChannelCreateParams = {
+        const params = getDefaultGroupChannelCreateParams({
           invitedUserIds: [user.userId],
-          name: '',
-          coverUrl: '',
-          isDistinct: false,
-        };
+          currentUserId: chatContext.currentUser?.userId,
+        });
 
-        if (chatContext.currentUser) params.operatorUserIds = [chatContext.currentUser.userId];
         const processedParams = await onBeforeCreateChannel(params, [user]);
-
         hide();
         const channel = await chatContext.sdk.groupChannel.createChannel(processedParams);
 
@@ -102,9 +116,10 @@ export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateC
       <Modal
         type={'slide'}
         onClose={hide}
-        onDismiss={() => setUser(undefined)}
+        onDismiss={onDismiss}
         visible={visible && Boolean(user)}
         backgroundStyle={styles.modal}
+        statusBarTranslucent={statusBarTranslucent}
       >
         {user && (
           <ProfileCard