@sendbird/uikit-react-native 2.2.0 → 2.4.0

package/lib/typescript/src/localization/StringSet.type.d.ts

@@ -1,10 +1,96 @@
 import type { Locale } from 'date-fns';
-import type { PartialDeep, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
+import type { SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
 /**
  * StringSet interface
  * Do not configure over 3 depths (for overrides easy)
  * */
 export interface StringSet {
+    OPEN_CHANNEL: {
+        /** OpenChannel > Header */
+        HEADER_TITLE: (channel: SendbirdOpenChannel) => string;
+        HEADER_SUBTITLE: (channel: SendbirdOpenChannel) => string;
+        /** OpenChannel > List */
+        LIST_BANNER_FROZEN: string;
+        LIST_DATE_SEPARATOR: (date: Date, locale?: Locale) => string;
+        /** OpenChannel > Message bubble */
+        MESSAGE_BUBBLE_TIME: (message: SendbirdMessage, locale?: Locale) => string;
+        MESSAGE_BUBBLE_FILE_TITLE: (message: SendbirdFileMessage) => string;
+        MESSAGE_BUBBLE_EDITED_POSTFIX: string;
+        MESSAGE_BUBBLE_UNKNOWN_TITLE: (message: SendbirdMessage) => string;
+        MESSAGE_BUBBLE_UNKNOWN_DESC: (message: SendbirdMessage) => string;
+    };
+    OPEN_CHANNEL_PARTICIPANTS: {
+        /** OpenChannelParticipants > Header */
+        HEADER_TITLE: string;
+    };
+    OPEN_CHANNEL_SETTINGS: {
+        /** OpenChannelSettings > Header */
+        HEADER_TITLE: string;
+        HEADER_RIGHT: string;
+        /** OpenChannelSettings > Info */
+        INFO_URL: string;
+        /** OpenChannelSettings > Menu */
+        MENU_MODERATION: string;
+        MENU_PARTICIPANTS: string;
+        MENU_DELETE_CHANNEL: string;
+        /** OpenChannelSettings > Dialog */
+        DIALOG_CHANNEL_DELETE_CONFIRM_TITLE: string;
+        DIALOG_CHANNEL_DELETE_CONFIRM_OK: string;
+        DIALOG_CHANNEL_DELETE_CONFIRM_CANCEL: string;
+        DIALOG_CHANGE_NAME: string;
+        DIALOG_CHANGE_IMAGE: string;
+        DIALOG_CHANGE_NAME_PROMPT_TITLE: string;
+        DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER: string;
+        DIALOG_CHANGE_NAME_PROMPT_CANCEL: string;
+        DIALOG_CHANGE_NAME_PROMPT_OK: string;
+        DIALOG_CHANGE_IMAGE_MENU_TITLE: string;
+        DIALOG_CHANGE_IMAGE_MENU_CAMERA: string;
+        DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: string;
+    };
+    OPEN_CHANNEL_LIST: {
+        /** OpenChannelList > Header */
+        HEADER_TITLE: string;
+        /** OpenChannelList > Channel preview */
+        CHANNEL_PREVIEW_TITLE: (channel: SendbirdOpenChannel) => string;
+    };
+    OPEN_CHANNEL_CREATE: {
+        /** OpenChannelCreate > Header */
+        HEADER_TITLE: string;
+        HEADER_RIGHT: string;
+        /** OpenChannelCreate > ProfileInput */
+        PLACEHOLDER: string;
+        /** OpenChannelCreate > Dialog */
+        DIALOG_IMAGE_MENU_REMOVE: string;
+        DIALOG_IMAGE_MENU_CAMERA: string;
+        DIALOG_IMAGE_MENU_PHOTO_LIBRARY: string;
+    };
+    OPEN_CHANNEL_MODERATION: {
+        /** OpenChannelModeration > Header */
+        HEADER_TITLE: string;
+        /** OpenChannelModeration > Menu */
+        MENU_OPERATORS: string;
+        MENU_MUTED_PARTICIPANTS: string;
+        MENU_BANNED_USERS: string;
+    };
+    OPEN_CHANNEL_BANNED_USERS: {
+        /** OpenChannelBannedUsers > Header */
+        HEADER_TITLE: string;
+    };
+    OPEN_CHANNEL_MUTED_PARTICIPANTS: {
+        /** OpenChannelMutedMembers > Header */
+        HEADER_TITLE: string;
+    };
+    OPEN_CHANNEL_OPERATORS: {
+        /** OpenChannelOperators > Header */
+        HEADER_TITLE: string;
+    };
+    OPEN_CHANNEL_REGISTER_OPERATOR: {
+        /** OpenChannelRegisterOperator > Header */
+        HEADER_TITLE: string;
+        HEADER_RIGHT: (params: {
+            selectedUsers: Array<SendbirdParticipant>;
+        }) => string;
+    };
     GROUP_CHANNEL: {
         /** GroupChannel > Header */
         HEADER_TITLE: (currentUserId: string, channel: SendbirdGroupChannel) => string;
@@ -18,30 +104,42 @@ export interface StringSet {
         MESSAGE_BUBBLE_EDITED_POSTFIX: string;
         MESSAGE_BUBBLE_UNKNOWN_TITLE: (message: SendbirdMessage) => string;
         MESSAGE_BUBBLE_UNKNOWN_DESC: (message: SendbirdMessage) => string;
-        /** GroupChannel > Input */
-        INPUT_PLACEHOLDER_ACTIVE: string;
-        INPUT_PLACEHOLDER_DISABLED: string;
-        INPUT_PLACEHOLDER_MUTED: string;
-        INPUT_EDIT_OK: string;
-        INPUT_EDIT_CANCEL: string;
         /** GroupChannel > Suggested mention list */
         MENTION_LIMITED: (mentionLimit: number) => string;
-        /** GroupChannel > Dialog > Message */
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_COPY **/
         DIALOG_MESSAGE_COPY: string;
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_EDIT **/
         DIALOG_MESSAGE_EDIT: string;
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_SAVE **/
         DIALOG_MESSAGE_SAVE: string;
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE **/
         DIALOG_MESSAGE_DELETE: string;
-        /** GroupChannel > Dialog > Message > Delete confirm */
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE **/
         DIALOG_MESSAGE_DELETE_CONFIRM_TITLE: string;
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK **/
         DIALOG_MESSAGE_DELETE_CONFIRM_OK: string;
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL **/
         DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL: string;
-        /** GroupChannel > Dialog > Message > Failed */
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_FAILED_RETRY **/
         DIALOG_MESSAGE_FAILED_RETRY: string;
+        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_FAILED_REMOVE **/
         DIALOG_MESSAGE_FAILED_REMOVE: string;
-        /** GroupChannel > Dialog > Attachments */
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA **/
         DIALOG_ATTACHMENT_CAMERA: string;
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY **/
         DIALOG_ATTACHMENT_PHOTO_LIBRARY: string;
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_ATTACHMENT_FILES **/
         DIALOG_ATTACHMENT_FILES: string;
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE **/
+        INPUT_PLACEHOLDER_ACTIVE: string;
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED **/
+        INPUT_PLACEHOLDER_DISABLED: string;
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED **/
+        INPUT_PLACEHOLDER_MUTED: string;
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_EDIT_OK **/
+        INPUT_EDIT_OK: string;
+        /** @deprecated Please use LABELS.CHANNEL_INPUT_EDIT_CANCEL **/
+        INPUT_EDIT_CANCEL: string;
     };
     GROUP_CHANNEL_SETTINGS: {
         /** GroupChannelSettings > Header */
@@ -124,9 +222,9 @@ export interface StringSet {
     GROUP_CHANNEL_MEMBERS: {
         /** GroupChannelMembers > Header */
         HEADER_TITLE: string;
-        /** @deprecated Please use in LABELS **/
+        /** @deprecated Please use LABELS.USER_BAR_ME_POSTFIX **/
         USER_BAR_ME_POSTFIX: string;
-        /** @deprecated Please use in LABELS **/
+        /** @deprecated Please use LABELS.USER_BAR_OPERATOR **/
         USER_BAR_OPERATOR: string;
     };
     GROUP_CHANNEL_INVITE: {
@@ -144,6 +242,9 @@ export interface StringSet {
         }) => string;
     };
     LABELS: {
+        PERMISSION_APP_NAME: string;
+        PERMISSION_CAMERA: string;
+        PERMISSION_DEVICE_STORAGE: string;
         USER_NO_NAME: string;
         CHANNEL_NO_MEMBERS: string;
         TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
@@ -155,6 +256,28 @@ export interface StringSet {
         UNMUTE: string;
         BAN: string;
         UNBAN: string;
+        /** ChannelInput **/
+        CHANNEL_INPUT_PLACEHOLDER_ACTIVE: string;
+        CHANNEL_INPUT_PLACEHOLDER_DISABLED: string;
+        CHANNEL_INPUT_PLACEHOLDER_MUTED: string;
+        CHANNEL_INPUT_EDIT_OK: string;
+        CHANNEL_INPUT_EDIT_CANCEL: string;
+        /** ChannelInput > Attachments **/
+        CHANNEL_INPUT_ATTACHMENT_CAMERA: string;
+        CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY: string;
+        CHANNEL_INPUT_ATTACHMENT_FILES: string;
+        /** Channel > Message **/
+        CHANNEL_MESSAGE_COPY: string;
+        CHANNEL_MESSAGE_EDIT: string;
+        CHANNEL_MESSAGE_SAVE: string;
+        CHANNEL_MESSAGE_DELETE: string;
+        /** Channel > Message > Delete confirm **/
+        CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE: string;
+        CHANNEL_MESSAGE_DELETE_CONFIRM_OK: string;
+        CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL: string;
+        /** Channel > Message > Failed **/
+        CHANNEL_MESSAGE_FAILED_RETRY: string;
+        CHANNEL_MESSAGE_FAILED_REMOVE: string;
     };
     FILE_VIEWER: {
         TITLE: (message: SendbirdFileMessage) => string;
@@ -166,6 +289,7 @@ export interface StringSet {
         NO_CHANNELS: string;
         NO_MESSAGES: string;
         NO_MUTED_MEMBERS: string;
+        NO_MUTED_PARTICIPANTS: string;
         NO_RESULTS_FOUND: string;
         ERROR: {
             MESSAGE: string;
@@ -196,6 +320,8 @@ export interface StringSet {
         TURN_ON_NOTIFICATIONS_ERROR: string;
         TURN_OFF_NOTIFICATIONS_ERROR: string;
         LEAVE_CHANNEL_ERROR: string;
+        UNKNOWN_ERROR: string;
+        GET_CHANNEL_ERROR: string;
     };
     PROFILE_CARD: {
         BUTTON_MESSAGE: string;
@@ -203,16 +329,3 @@ export interface StringSet {
         BODY: (user: SendbirdUser | SendbirdMember) => string;
     };
 }
-type StringSetCreateOptions = {
-    dateLocale: Locale;
-    overrides?: PartialDeep<StringSet>;
-};
-/**
- * Create string set
- * You can create localized String set, you should provide locale for date and string as a parameters
- *
- * @param {StringSetCreateOptions.dateLocale} dateLocale Date locale (from date-fns)
- * @param {StringSetCreateOptions.overrides} [overrides] Localized strings
- * */
-export declare const createBaseStringSet: ({ dateLocale, overrides }: StringSetCreateOptions) => StringSet;
-export {};

package/lib/typescript/src/localization/createBaseStringSet.d.ts

@@ -0,0 +1,16 @@
+import type { Locale } from 'date-fns';
+import type { PartialDeep } from '@sendbird/uikit-utils';
+import type { StringSet } from './StringSet.type';
+type StringSetCreateOptions = {
+    dateLocale: Locale;
+    overrides?: PartialDeep<StringSet>;
+};
+/**
+ * Create string set
+ * You can create localized String set, you should provide locale for date and string as a parameters
+ *
+ * @param {StringSetCreateOptions.dateLocale} dateLocale Date locale (from date-fns)
+ * @param {StringSetCreateOptions.overrides} [overrides] Localized strings
+ * */
+export declare const createBaseStringSet: ({ dateLocale, overrides }: StringSetCreateOptions) => StringSet;
+export {};

package/lib/typescript/src/platform/createMediaService.expo.d.ts

@@ -1,9 +1,13 @@
 import type * as ExpoAV from 'expo-av';
+import type * as ExpoFS from 'expo-file-system';
+import type * as ExpoImageManipulator from 'expo-image-manipulator';
 import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
 import type { MediaServiceInterface } from './types';
 type Modules = {
     avModule: typeof ExpoAV;
     thumbnailModule: typeof ExpoVideoThumbnail;
+    imageManipulator: typeof ExpoImageManipulator;
+    fsModule: typeof ExpoFS;
 };
-declare const createExpoMediaService: ({ avModule, thumbnailModule }: Modules) => MediaServiceInterface;
+declare const createExpoMediaService: ({ avModule, thumbnailModule, imageManipulator, fsModule, }: Modules) => MediaServiceInterface;
 export default createExpoMediaService;

package/lib/typescript/src/platform/createMediaService.native.d.ts

@@ -1,9 +1,11 @@
-import type * as CreateThumbnail from 'react-native-create-thumbnail';
-import type Video from 'react-native-video';
+import type * as RNImageResizer from '@bam.tech/react-native-image-resizer';
+import type * as RNCreateThumbnail from 'react-native-create-thumbnail';
+import type RNVideo from 'react-native-video';
 import type { MediaServiceInterface } from './types';
 type Modules = {
-    VideoComponent: typeof Video;
-    thumbnailModule: typeof CreateThumbnail;
+    VideoComponent: typeof RNVideo;
+    thumbnailModule: typeof RNCreateThumbnail;
+    imageResizerModule: typeof RNImageResizer;
 };
-declare const createNativeMediaService: ({ VideoComponent, thumbnailModule }: Modules) => MediaServiceInterface;
+declare const createNativeMediaService: ({ VideoComponent, thumbnailModule, imageResizerModule, }: Modules) => MediaServiceInterface;
 export default createNativeMediaService;

package/lib/typescript/src/platform/dynamicModule.d.ts

@@ -1,23 +1,18 @@
-import type RNNetInfo from '@react-native-community/netinfo';
-import type RNFastImage from 'react-native-fast-image';
-import type RNFileAccess from 'react-native-file-access';
-export interface DynamicModules {
-    'react-native-file-access': typeof RNFileAccess;
-    'react-native-fast-image': typeof RNFastImage;
-    '@react-native-community/netinfo': typeof RNNetInfo;
-}
+import type * as RNCNetInfo from '@react-native-community/netinfo';
 export type SBUNativeModule = keyof DynamicModules;
 interface SBUDynamicModuleInfo {
     packageName: SBUNativeModule;
-    minVersion: string;
-    moduleName: string;
+    nativeModuleNamespace: string;
     getPackage: <T>(logLevel: 'error' | 'warn' | 'none') => T;
     url: string;
+    isComponent?: boolean;
+}
+export interface DynamicModules {
+    '@react-native-community/netinfo': typeof RNCNetInfo;
 }
-export declare function checkVersion(minVersion: string, currentVersion: string): boolean;
 declare const SBUDynamicModule: {
     register(mdi: SBUDynamicModuleInfo): void;
     getInfo(name: SBUNativeModule): SBUDynamicModuleInfo;
-    get<K extends keyof DynamicModules, T extends DynamicModules[K]>(name: K, logLevel?: 'error' | 'warn' | 'none'): T;
+    get<K extends "@react-native-community/netinfo", T extends DynamicModules[K]>(name: K, logLevel?: 'error' | 'warn' | 'none'): T;
 };
 export default SBUDynamicModule;

package/lib/typescript/src/platform/types.d.ts

@@ -58,10 +58,35 @@ interface GetVideoThumbnailOptions {
     timeMills?: number;
     quality?: number;
 }
+interface CompressImageOptions {
+    /**
+     * A uri of image file to compress
+     * */
+    uri: string;
+    /**
+     * A resize width, apply only to downscale
+     * */
+    maxWidth?: number;
+    /**
+     * A resize height, apply only to downscale
+     * */
+    maxHeight?: number;
+    /**
+     * A value in range 0.0 - 1.0 specifying compression level of the result image.
+     * 1 means highest quality and 0 the lowest quality.
+     * */
+    compressionRate?: number;
+}
+type GetVideoThumbnailResult = Promise<{
+    path: string;
+} | null>;
+type CompressImageResult = Promise<{
+    uri: string;
+    size: number;
+} | null>;
 export interface MediaServiceInterface {
     VideoComponent<Props = {}>(props: VideoProps & Props): JSX.Element;
-    getVideoThumbnail(options: GetVideoThumbnailOptions): Promise<{
-        path: string;
-    } | null>;
+    getVideoThumbnail(options: GetVideoThumbnailOptions): GetVideoThumbnailResult;
+    compressImage(options: CompressImageOptions): CompressImageResult;
 }
 export {};

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "2.2.0";
+declare const VERSION = "2.4.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.2.0",
+  "version": "2.4.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -10,7 +10,8 @@
   "files": [
     "src",
     "lib",
-    "!**/__tests__"
+    "!**/__tests__",
+    "!**/__template__"
   ],
   "sideEffects": false,
   "scripts": {
@@ -41,11 +42,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "2.2.0",
-    "@sendbird/uikit-react-native-foundation": "2.2.0",
-    "@sendbird/uikit-utils": "2.2.0"
+    "@sendbird/uikit-chat-hooks": "2.4.0",
+    "@sendbird/uikit-react-native-foundation": "2.4.0",
+    "@sendbird/uikit-utils": "2.4.0"
   },
   "devDependencies": {
+    "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@react-native-camera-roll/camera-roll": "^5.0.4",
     "@react-native-clipboard/clipboard": "^1.8.5",
     "@react-native-community/netinfo": "^9.3.0",
@@ -59,6 +61,7 @@
     "expo-clipboard": "^2.1.1",
     "expo-document-picker": "^10.1.3",
     "expo-file-system": "^13.1.4",
+    "expo-image-manipulator": "^11.0.0",
     "expo-image-picker": "^12.0.2",
     "expo-media-library": "^14.0.1",
     "expo-notifications": "^0.14.1",
@@ -67,7 +70,7 @@
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",
     "react": "17.0.2",
-    "react-native": "0.67.4",
+    "react-native": "0.67.5",
     "react-native-builder-bob": "^0.18.0",
     "react-native-create-thumbnail": "^1.5.1",
     "react-native-document-picker": "^8.0.0",
@@ -79,16 +82,18 @@
     "typescript": "4.9.4"
   },
   "peerDependencies": {
+    "@bam.tech/react-native-image-resizer": ">=3.0.0",
     "@react-native-camera-roll/camera-roll": ">=5.0.0",
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.0.13",
+    "@sendbird/chat": "^4.3.0",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
     "expo-document-picker": ">=10.1.3",
     "expo-file-system": ">=13.1.4",
+    "expo-image-manipulator": ">=11.0.0",
     "expo-image-picker": ">=12.0.2",
     "expo-notifications": ">=0.14.1",
     "expo-video-thumbnails": ">=6.4.0",
@@ -103,6 +108,9 @@
     "react-native-video": ">=5.2.0"
   },
   "peerDependenciesMeta": {
+    "@bam.tech/react-native-image-resizer": {
+      "optional": true
+    },
     "@react-native-camera-roll/camera-roll": {
       "optional": true
     },
@@ -124,6 +132,9 @@
     "expo-file-system": {
       "optional": true
     },
+    "expo-image-manipulator": {
+      "optional": true
+    },
     "expo-image-picker": {
       "optional": true
     },
@@ -171,5 +182,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "bd7ab217a07e91ba644c0cb69694a92b123326bf"
+  "gitHead": "05ec076e3a2433089586870c9a7e7bf7639b06be"
 }

package/src/components/ChannelCover.tsx

@@ -3,12 +3,12 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { View } from 'react-native';
 
 import { Avatar, Icon, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdGroupChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';
+import { SendbirdBaseChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../hooks/useContext';
 
 type Props = {
-  channel: SendbirdGroupChannel;
+  channel: SendbirdBaseChannel;
   size: number;
   containerStyle?: StyleProp<ViewStyle>;
 };
@@ -17,48 +17,57 @@ const ChannelCover = ({ channel, ...avatarProps }: Props) => {
   const { currentUser } = useSendbirdChat();
   const { colors } = useUIKitTheme();
 
-  // custom channel cover
-  if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {
-    return <Avatar uri={channel.coverUrl} {...avatarProps} />;
-  }
+  if (channel.isGroupChannel()) {
+    // custom channel cover
+    if (!isDefaultCoverImage(channel.coverUrl) || !currentUser) {
+      return <Avatar uri={channel.coverUrl} {...avatarProps} />;
+    }
+
+    // broadcast channel cover
+    if (channel.isBroadcast) {
+      return (
+        <View style={avatarProps.containerStyle}>
+          <Icon
+            icon={'broadcast'}
+            size={avatarProps.size * (4 / 7)}
+            color={colors.onBackgroundReverse01}
+            containerStyle={{
+              backgroundColor: colors.secondary,
+              borderRadius: avatarProps.size * 0.5,
+              padding: avatarProps.size * (3 / 7) * 0.5,
+            }}
+          />
+        </View>
+      );
+    }
+
+    // no members, use anonymous profile
+    if (channel.memberCount <= 1) {
+      return <Avatar {...avatarProps} />;
+    }
 
-  // broadcast channel cover
-  if (channel.isBroadcast) {
+    // 1:1, use member profile
+    if (channel.memberCount === 2) {
+      const otherUserProfile = channel.members.filter((m) => m.userId !== currentUser.userId)?.[0]?.profileUrl;
+      return <Avatar uri={otherUserProfile} {...avatarProps} />;
+    }
+
+    // group, use members profile
     return (
-      <View style={avatarProps.containerStyle}>
-        <Icon
-          icon={'broadcast'}
-          size={avatarProps.size * (4 / 7)}
-          color={colors.onBackgroundReverse01}
-          containerStyle={{
-            backgroundColor: colors.secondary,
-            borderRadius: avatarProps.size * 0.5,
-            padding: avatarProps.size * (3 / 7) * 0.5,
-          }}
-        />
-      </View>
+      <Avatar.Group {...avatarProps}>
+        {getMembersExcludeMe(channel, currentUser?.userId).map((m) => (
+          <Avatar key={m.userId} uri={m.profileUrl} />
+        ))}
+      </Avatar.Group>
     );
   }
 
-  // no members, use anonymous profile
-  if (channel.memberCount <= 1) {
-    return <Avatar {...avatarProps} />;
-  }
-
-  // 1:1, use member profile
-  if (channel.memberCount === 2) {
-    const otherUserProfile = channel.members.filter((m) => m.userId !== currentUser.userId)?.[0]?.profileUrl;
-    return <Avatar uri={otherUserProfile} {...avatarProps} />;
+  if (channel.isOpenChannel()) {
+    // channel cover
+    return <Avatar uri={channel.coverUrl} {...avatarProps} />;
   }
 
-  // group, use members profile
-  return (
-    <Avatar.Group {...avatarProps}>
-      {getMembersExcludeMe(channel, currentUser?.userId).map((m) => (
-        <Avatar key={m.userId} uri={m.profileUrl} />
-      ))}
-    </Avatar.Group>
-  );
+  return <Avatar uri={channel.coverUrl} {...avatarProps} />;
 };
 
 export default ChannelCover;

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

@@ -11,20 +11,19 @@ import { MentionType } from '@sendbird/chat/message';
 import { Button, TextInput, createStyleSheet, useToast } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
 
-import { useLocalization, useSendbirdChat } from '../../../../hooks/useContext';
-import type { MentionedUser } from '../../../../types';
-import type { GroupChannelProps } from '../../types';
+import { useLocalization, useSendbirdChat } from '../../hooks/useContext';
+import type { MentionedUser } from '../../types';
+import type { ChannelInputProps } from './index';
 
-type EditInputProps = GroupChannelProps['Input'] & {
+interface EditInputProps extends ChannelInputProps {
   text: string;
   onChangeText: (val: string) => void;
   messageToEdit: SendbirdUserMessage | SendbirdFileMessage;
   setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
   onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
-  disabled: boolean;
   autoFocus: boolean;
   mentionedUsers: MentionedUser[];
-};
+}
 
 const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
   {
@@ -32,11 +31,12 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     onChangeText,
     messageToEdit,
     setMessageToEdit,
+    onPressUpdateUserMessage,
     onUpdateUserMessage,
     onSelectionChange,
-    disabled,
     autoFocus,
     mentionedUsers,
+    inputDisabled,
   },
   ref,
 ) {
@@ -51,20 +51,31 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
 
   const onPressSave = () => {
     if (messageToEdit.isUserMessage()) {
-      const mention = {
-        userIds: mentionedUsers.map((it) => it.user.userId),
-        messageTemplate: mentionManager.textToMentionedMessageTemplate(text, mentionedUsers),
-        type: MentionType.USERS,
-      };
+      const mentionType = MentionType.USERS;
+      const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
+      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
 
-      onUpdateUserMessage(text, messageToEdit, mention).catch(() =>
-        toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error'),
-      );
+      if (onPressUpdateUserMessage) {
+        onPressUpdateUserMessage(messageToEdit, {
+          message: text,
+          mentionType,
+          mentionedUserIds,
+          mentionedMessageTemplate,
+        }).catch(onFailureToUpdate);
+      } else if (onUpdateUserMessage) {
+        onUpdateUserMessage(text, messageToEdit, {
+          type: MentionType.USERS,
+          userIds: mentionedUserIds,
+          messageTemplate: mentionedMessageTemplate,
+        }).catch(onFailureToUpdate);
+      }
     }
     setMessageToEdit();
     onChangeText('');
   };
 
+  const onFailureToUpdate = () => toast.show(STRINGS.TOAST.UPDATE_MSG_ERROR, 'error');
+
   return (
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
@@ -72,11 +83,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           ref={ref}
           multiline
           disableFullscreenUI
-          editable={!disabled}
+          editable={!inputDisabled}
           autoFocus={autoFocus}
           onChangeText={onChangeText}
           style={styles.input}
-          placeholder={STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE}
+          placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
         >
           {mentionManager.textToMentionedComponents(text, mentionedUsers)}
@@ -84,11 +95,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
       </View>
       <View style={{ marginTop: 8, flexDirection: 'row' }}>
         <Button variant={'text'} onPress={onPressCancel}>
-          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_CANCEL}
+          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_CANCEL}
         </Button>
         <View style={styles.space} />
         <Button variant={'contained'} onPress={onPressSave}>
-          {STRINGS.GROUP_CHANNEL.INPUT_EDIT_OK}
+          {STRINGS.LABELS.CHANNEL_INPUT_EDIT_OK}
         </Button>
       </View>
     </View>