@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/lib/typescript/src/hooks/useMentionSuggestion.d.ts

@@ -0,0 +1,17 @@
+import type { SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
+import type { Range } from '../types';
+declare const useMentionSuggestion: (params: {
+    text: string;
+    selection: Range;
+    channel: SendbirdGroupChannel;
+    mentionedUsers: {
+        user: SendbirdUser;
+        range: Range;
+    }[];
+}) => {
+    members: import("@sendbird/chat/groupChannel").Member[];
+    reset: () => void;
+    searchStringRange: Range;
+    searchLimited: boolean;
+};
+export default useMentionSuggestion;

package/lib/typescript/src/hooks/useMentionTextInput.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import type { NativeSyntheticEvent, TextInput, TextInputSelectionChangeEventData } from 'react-native';
+import { SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import type { MentionedUser } from '../types';
+declare const useMentionTextInput: (params: {
+    messageToEdit?: SendbirdUserMessage | SendbirdFileMessage;
+}) => {
+    textInputRef: import("react").MutableRefObject<TextInput | undefined>;
+    selection: {
+        start: number;
+        end: number;
+    };
+    onSelectionChange: (e: NativeSyntheticEvent<TextInputSelectionChangeEventData>) => void;
+    text: string;
+    onChangeText: (_nextText: string, addedMentionedUser?: MentionedUser) => void;
+    mentionedUsers: MentionedUser[];
+};
+export default useMentionTextInput;

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

@@ -1,4 +1,6 @@
 export { default as MessageRenderer } from './components/MessageRenderer';
+export { ReactionAddons } from './components/ReactionAddons';
+export { ReactionBottomSheets } from './components/ReactionBottomSheets';
 export { default as ChannelCover } from './components/ChannelCover';
 export { default as ChatFlatList } from './components/ChatFlatList';
 export { default as FileViewer } from './components/FileViewer';
@@ -16,14 +18,21 @@ export { default as createGroupChannelSettingsFragment } from './fragments/creat
 export { default as createGroupChannelInviteFragment } from './fragments/createGroupChannelInviteFragment';
 export { default as createGroupChannelListFragment } from './fragments/createGroupChannelListFragment';
 export { default as createGroupChannelMembersFragment } from './fragments/createGroupChannelMembersFragment';
+export { default as createGroupChannelModerationFragment } from './fragments/createGroupChannelModerationFragment';
+export { default as createGroupChannelOperatorsFragment } from './fragments/createGroupChannelOperatorsFragment';
+export { default as createGroupChannelRegisterOperatorFragment } from './fragments/createGroupChannelRegisterOperatorFragment';
+export { default as createGroupChannelMutedMembersFragment } from './fragments/createGroupChannelMutedMembersFragment';
+export { default as createGroupChannelBannedUsersFragment } from './fragments/createGroupChannelBannedUsersFragment';
+export { default as createGroupChannelNotificationsFragment } from './fragments/createGroupChannelNotificationsFragment';
 /** Context **/
-export { SendbirdChatContext, SendbirdChatProvider } from './contexts/SendbirdChat';
-export { PlatformServiceContext, PlatformServiceProvider } from './contexts/PlatformService';
-export { LocalizationContext, LocalizationProvider } from './contexts/Localization';
+export { SendbirdChatContext, SendbirdChatProvider } from './contexts/SendbirdChatCtx';
+export { PlatformServiceContext, PlatformServiceProvider } from './contexts/PlatformServiceCtx';
+export { UserProfileContext, UserProfileProvider } from './contexts/UserProfileCtx';
+export { LocalizationContext, LocalizationProvider } from './contexts/LocalizationCtx';
 /** Hooks **/
 export { default as useConnection } from './hooks/useConnection';
 export { default as usePushTokenRegistration } from './hooks/usePushTokenRegistration';
-export { useLocalization, usePlatformService, useSendbirdChat } from './hooks/useContext';
+export * from './hooks/useContext';
 /** Localization **/
 export { default as StringSetEn } from './localization/StringSet.en';
 export { createBaseStringSet } from './localization/StringSet.type';
@@ -45,9 +54,11 @@ export * from './domain/groupChannelSettings';
 export type { GroupChannelSettingsProps, GroupChannelSettingsModule, GroupChannelSettingsFragment, GroupChannelSettingsContextsType, } from './domain/groupChannelSettings/types';
 export * from './domain/groupChannelList';
 export type { GroupChannelType, GroupChannelListProps, GroupChannelListModule, GroupChannelListFragment, GroupChannelListContextsType, } from './domain/groupChannelList/types';
+export * from './domain/groupChannelNotifications';
+export { GroupChannelNotificationsProps, GroupChannelNotificationsContextsType, GroupChannelNotificationsFragment, GroupChannelNotificationsModule, } from './domain/groupChannelNotifications/types';
+export * from './domain/groupChannelUserList/types';
 export * from './domain/userList';
 export type { UserListProps, UserListModule, UserListContextsType } from './domain/userList/types';
-export * from './domain/groupChannelUserList/types';
 /** UIKit **/
 export { default as SendbirdUIKitContainer, SendbirdUIKit } from './containers/SendbirdUIKitContainer';
 export type { SendbirdUIKitContainerProps } from './containers/SendbirdUIKitContainer';

package/lib/typescript/src/libs/EmojiManager.d.ts

@@ -0,0 +1,16 @@
+import type { SendbirdEmojiContainer } from '@sendbird/uikit-utils';
+import InternalLocalCacheStorage from './InternalLocalCacheStorage';
+declare class EmojiManager {
+    private internalStorage;
+    static key: string;
+    constructor(internalStorage?: InternalLocalCacheStorage);
+    private emojiStorage;
+    private _emojiCategoryMap;
+    get emojiCategoryMap(): Record<string, import("@sendbird/chat").EmojiCategory>;
+    private _allEmojiMap;
+    get allEmojiMap(): Record<string, import("@sendbird/chat").Emoji>;
+    private _allEmoji;
+    get allEmoji(): import("@sendbird/chat").Emoji[];
+    init: (emojiContainer?: SendbirdEmojiContainer) => Promise<void>;
+}
+export default EmojiManager;

package/lib/typescript/src/libs/MentionConfig.d.ts

@@ -0,0 +1,24 @@
+export interface MentionConfigInterface {
+    mentionLimit: number;
+    suggestionLimit: number;
+    debounceMills: number;
+    delimiter: string;
+    trigger: string;
+}
+declare class MentionConfig {
+    private _config;
+    static DEFAULT: {
+        MENTION_LIMIT: number;
+        SUGGESTION_LIMIT: number;
+        DEBOUNCE_MILLS: number;
+        DELIMITER: string;
+        TRIGGER: string;
+    };
+    constructor(_config: MentionConfigInterface);
+    get mentionLimit(): number;
+    get suggestionLimit(): number;
+    get delimiter(): string;
+    get debounceMills(): number;
+    get trigger(): string;
+}
+export default MentionConfig;

package/lib/typescript/src/libs/MentionManager.d.ts

@@ -0,0 +1,61 @@
+import type { SendbirdFileMessage, SendbirdUser, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import type { MentionedUser, Range } from '../types';
+import type { MentionConfigInterface } from './MentionConfig';
+declare class MentionManager {
+    config: MentionConfigInterface;
+    mentionEnabled: boolean;
+    private _invalidStartsKeywords;
+    private _templateRegex;
+    constructor(config: MentionConfigInterface, mentionEnabled: boolean);
+    rangeHelpers: {
+        inRangeUnderOver(start: number, num: number, end: number): boolean;
+        inRangeUnderMore(start: number, num: number, end: number): boolean;
+        inRangeLessOver(start: number, num: number, end: number): boolean;
+        inRangeLessMore(start: number, num: number, end: number): boolean;
+        overlaps(a: Range, b: Range, compare?: 'underOver' | 'underMore' | 'lessOver' | 'lessMore'): boolean;
+    };
+    get templateRegex(): RegExp;
+    getSearchString: (text: string, selectionIndex: number) => {
+        searchString: string;
+        isTriggered: () => boolean;
+        isValidSearchString: () => boolean;
+    };
+    /**
+     * @description Reconcile the range by offset in the mentioned users
+     * */
+    reconcileRangeOfMentionedUsers: (offset: number, selectionIndex: number, mentionedUsers: MentionedUser[]) => MentionedUser[];
+    /**
+     * @description Remove users who in a range
+     * */
+    removeMentionedUsersInSelection: (selection: Range, mentionedUsers: MentionedUser[]) => {
+        filtered: MentionedUser[];
+        lastSelection: number;
+        removedOffset: number;
+    };
+    getSearchStringRangeInText: (selectionIndex: number, searchString: string) => Range;
+    /**
+     * @description User to @{user.id} template format
+     * */
+    asMentionedMessageTemplate: (user: SendbirdUser, delimiter?: boolean) => string;
+    /**
+     * @description User to @user.nickname text format
+     * */
+    asMentionedMessageText: (user: SendbirdUser, delimiter?: boolean) => string;
+    /**
+     * @description Bold @user.nickname
+     * */
+    textToMentionedComponents: (text: string, mentionedUsers: MentionedUser[]) => string | (string | JSX.Element)[];
+    textToMentionedMessageTemplate: (text: string, mentionedUsers: MentionedUser[]) => string;
+    /**
+     * @description Convert @{user.id} template to @user.nickname text and MentionedUser[] array.
+     * */
+    templateToTextAndMentionedUsers: (template: string, mentionedUsers: SendbirdUser[]) => {
+        mentionedText: string;
+        mentionedUsers: MentionedUser[];
+    };
+    shouldUseMentionedMessageTemplate: (message?: SendbirdUserMessage | SendbirdFileMessage) => message is RequiredSpecific<import("@sendbird/chat/message").FileMessage | import("@sendbird/chat/message").UserMessage, "mentionedMessageTemplate" | "mentionedUserIds" | "mentionType" | "mentionedUsers">;
+}
+type RequiredSpecific<T, K extends keyof T> = T & {
+    [P in K]-?: T[P];
+};
+export default MentionManager;

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

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import type { PartialDeep, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
+import type { PartialDeep, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdUser } from '@sendbird/uikit-utils';
 /**
  * StringSet interface
  * Do not configure over 3 depths (for overrides easy)
@@ -21,8 +21,11 @@ export interface StringSet {
         /** 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 */
         DIALOG_MESSAGE_COPY: string;
         DIALOG_MESSAGE_EDIT: string;
@@ -45,9 +48,13 @@ export interface StringSet {
         HEADER_TITLE: string;
         HEADER_RIGHT: string;
         /** GroupChannelSettings > Menu */
-        MENU_NOTIFICATION: string;
+        MENU_MODERATION: string;
         MENU_MEMBERS: string;
         MENU_LEAVE_CHANNEL: string;
+        MENU_NOTIFICATION: string;
+        MENU_NOTIFICATION_LABEL_ON: string;
+        MENU_NOTIFICATION_LABEL_OFF: string;
+        MENU_NOTIFICATION_LABEL_MENTION_ONLY: string;
         /** GroupChannelSettings > Dialog */
         DIALOG_CHANGE_NAME: string;
         DIALOG_CHANGE_IMAGE: string;
@@ -59,6 +66,43 @@ export interface StringSet {
         DIALOG_CHANGE_IMAGE_MENU_CAMERA: string;
         DIALOG_CHANGE_IMAGE_MENU_PHOTO_LIBRARY: string;
     };
+    GROUP_CHANNEL_NOTIFICATIONS: {
+        /** GroupChannelNotifications > Header */
+        HEADER_TITLE: string;
+        /** GroupChannelNotifications > Menu */
+        MENU_NOTIFICATIONS: string;
+        MENU_NOTIFICATIONS_DESC: string;
+        MENU_NOTIFICATIONS_OPTION_ALL: string;
+        MENU_NOTIFICATIONS_OPTION_MENTION_ONLY: string;
+    };
+    GROUP_CHANNEL_MODERATION: {
+        /** GroupChannelModeration > Header */
+        HEADER_TITLE: string;
+        /** GroupChannelModeration > Menu */
+        MENU_OPERATORS: string;
+        MENU_MUTED_MEMBERS: string;
+        MENU_BANNED_USERS: string;
+        MENU_FREEZE_CHANNEL: string;
+    };
+    GROUP_CHANNEL_OPERATORS: {
+        /** GroupChannelOperators > Header */
+        HEADER_TITLE: string;
+    };
+    GROUP_CHANNEL_REGISTER_OPERATOR: {
+        /** GroupChannelRegisterOperator > Header */
+        HEADER_TITLE: string;
+        HEADER_RIGHT: (params: {
+            selectedUsers: Array<SendbirdMember>;
+        }) => string;
+    };
+    GROUP_CHANNEL_MUTED_MEMBERS: {
+        /** GroupChannelMutedMembers > Header */
+        HEADER_TITLE: string;
+    };
+    GROUP_CHANNEL_BANNED_USERS: {
+        /** GroupChannelBannedUsers > Header */
+        HEADER_TITLE: string;
+    };
     GROUP_CHANNEL_LIST: {
         /** GroupChannelList > Header */
         HEADER_TITLE: string;
@@ -80,13 +124,10 @@ export interface StringSet {
     GROUP_CHANNEL_MEMBERS: {
         /** GroupChannelMembers > Header */
         HEADER_TITLE: string;
-        /** GroupChannelMembers > UserBar */
+        /** @deprecated Please use in LABELS **/
         USER_BAR_ME_POSTFIX: string;
+        /** @deprecated Please use in LABELS **/
         USER_BAR_OPERATOR: string;
-        /** GroupChannelMembers > Dialog */
-        DIALOG_USER_DISMISS_OPERATOR: string;
-        DIALOG_USER_MUTE: string;
-        DIALOG_USER_BAN: string;
     };
     GROUP_CHANNEL_INVITE: {
         /** GroupChannelInvite > Header */
@@ -106,13 +147,21 @@ export interface StringSet {
         USER_NO_NAME: string;
         CHANNEL_NO_MEMBERS: string;
         TYPING_INDICATOR_TYPINGS: (users: SendbirdUser[]) => string | undefined;
+        USER_BAR_ME_POSTFIX: string;
+        USER_BAR_OPERATOR: string;
+        REGISTER_AS_OPERATOR: string;
+        UNREGISTER_OPERATOR: string;
+        MUTE: string;
+        UNMUTE: string;
+        BAN: string;
+        UNBAN: string;
     };
     FILE_VIEWER: {
         TITLE: (message: SendbirdFileMessage) => string;
         SUBTITLE: (message: SendbirdFileMessage) => string;
     };
     PLACEHOLDER: {
-        NO_BANNED_MEMBERS: string;
+        NO_BANNED_USERS: string;
         NO_USERS: string;
         NO_CHANNELS: string;
         NO_MESSAGES: string;
@@ -148,8 +197,13 @@ export interface StringSet {
         TURN_OFF_NOTIFICATIONS_ERROR: string;
         LEAVE_CHANNEL_ERROR: string;
     };
+    PROFILE_CARD: {
+        BUTTON_MESSAGE: string;
+        BODY_LABEL: string;
+        BODY: (user: SendbirdUser | SendbirdMember) => string;
+    };
 }
-declare type StringSetCreateOptions = {
+type StringSetCreateOptions = {
     dateLocale: Locale;
     overrides?: PartialDeep<StringSet>;
 };

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

@@ -1,4 +1,4 @@
-import type CameraRoll from '@react-native-community/cameraroll';
+import type { CameraRoll } from '@react-native-camera-roll/camera-roll';
 import type * as DocumentPicker from 'react-native-document-picker';
 import type * as FileAccess from 'react-native-file-access';
 import type * as ImagePicker from 'react-native-image-picker';

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

@@ -1,7 +1,7 @@
 import type * as ExpoAV from 'expo-av';
 import type * as ExpoVideoThumbnail from 'expo-video-thumbnails';
 import type { MediaServiceInterface } from './types';
-declare type Modules = {
+type Modules = {
     avModule: typeof ExpoAV;
     thumbnailModule: typeof ExpoVideoThumbnail;
 };

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

@@ -1,7 +1,7 @@
 import type * as CreateThumbnail from 'react-native-create-thumbnail';
 import type Video from 'react-native-video';
 import type { MediaServiceInterface } from './types';
-declare type Modules = {
+type Modules = {
     VideoComponent: typeof Video;
     thumbnailModule: typeof CreateThumbnail;
 };

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

@@ -6,7 +6,7 @@ export interface DynamicModules {
     'react-native-fast-image': typeof RNFastImage;
     '@react-native-community/netinfo': typeof RNNetInfo;
 }
-export declare type SBUNativeModule = keyof DynamicModules;
+export type SBUNativeModule = keyof DynamicModules;
 interface SBUDynamicModuleInfo {
     packageName: SBUNativeModule;
     minVersion: string;

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

@@ -1,8 +1,8 @@
 import type SBUError from '../libs/SBUError';
-export declare type Unsubscribe = () => void | undefined;
-export declare type DownloadedPath = string;
-export declare type FilePickerResponse = FileType | null;
-export declare type FileType = {
+export type Unsubscribe = () => void | undefined;
+export type DownloadedPath = string;
+export type FilePickerResponse = FileType | null;
+export type FileType = {
     uri: string;
     size: number;
     name: string;
@@ -32,7 +32,7 @@ export interface OpenCameraOptions extends OpenResultListener {
     cameraType?: 'front' | 'back';
     mediaType?: 'photo' | 'video' | 'all';
 }
-export declare type OpenDocumentOptions = OpenResultListener;
+export type OpenDocumentOptions = OpenResultListener;
 export interface SaveOptions {
     fileUrl: string;
     fileName: string;

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

@@ -1,6 +1,7 @@
 import type { ErrorInfo, ReactNode } from 'react';
-export declare type KeyValuePairGet = [string, string | null];
-export declare type KeyValuePairSet = [string, string];
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+export type KeyValuePairGet = [string, string | null];
+export type KeyValuePairSet = [string, string];
 export interface LocalCacheStorage {
     getAllKeys(): Promise<readonly string[] | string[]>;
     getItem(key: string): Promise<string | null>;
@@ -10,11 +11,19 @@ export interface LocalCacheStorage {
     multiGet?(keys: string[]): Promise<readonly KeyValuePairGet[] | KeyValuePairGet[]>;
     multiRemove?(keys: string[]): Promise<void>;
 }
-export declare type ErrorBoundaryProps = {
+export type ErrorBoundaryProps = {
     error: Error;
     errorInfo: ErrorInfo;
     reset: () => void;
 };
-export declare type CommonComponent<P = {}> = (props: P & {
+export type CommonComponent<P = {}> = (props: P & {
     children?: ReactNode;
 }) => null | JSX.Element;
+export type MentionedUser = {
+    range: Range;
+    user: SendbirdUser;
+};
+export type Range = {
+    start: number;
+    end: number;
+};

package/lib/typescript/src/utils/common.d.ts

@@ -0,0 +1 @@
+export declare const openUrl: (url: string) => void;

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.0.3",
+  "version": "2.2.0",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,13 +41,13 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "2.0.3",
-    "@sendbird/uikit-react-native-foundation": "2.0.3",
-    "@sendbird/uikit-utils": "2.0.3"
+    "@sendbird/uikit-chat-hooks": "2.2.0",
+    "@sendbird/uikit-react-native-foundation": "2.2.0",
+    "@sendbird/uikit-utils": "2.2.0"
   },
   "devDependencies": {
+    "@react-native-camera-roll/camera-roll": "^5.0.4",
     "@react-native-clipboard/clipboard": "^1.8.5",
-    "@react-native-community/cameraroll": "^4.1.2",
     "@react-native-community/netinfo": "^9.3.0",
     "@react-native-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
@@ -71,16 +71,16 @@
     "react-native-builder-bob": "^0.18.0",
     "react-native-create-thumbnail": "^1.5.1",
     "react-native-document-picker": "^8.0.0",
-    "react-native-file-access": "^2.4.3",
+    "react-native-file-access": "^2.5.0",
     "react-native-image-picker": "^4.7.1",
     "react-native-permissions": "^3.6.0",
     "react-native-safe-area-context": "^3.3.2",
     "react-native-video": "^5.2.0",
-    "typescript": "^4.1.3"
+    "typescript": "4.9.4"
   },
   "peerDependencies": {
+    "@react-native-camera-roll/camera-roll": ">=5.0.0",
     "@react-native-clipboard/clipboard": ">=1.8.5",
-    "@react-native-community/cameraroll": ">=4.1.2",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
     "@sendbird/chat": "^4.0.13",
@@ -103,10 +103,10 @@
     "react-native-video": ">=5.2.0"
   },
   "peerDependenciesMeta": {
-    "@react-native-clipboard/clipboard": {
+    "@react-native-camera-roll/camera-roll": {
       "optional": true
     },
-    "@react-native-community/cameraroll": {
+    "@react-native-clipboard/clipboard": {
       "optional": true
     },
     "@react-native-firebase/messaging": {
@@ -171,5 +171,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "e3a34ae962741ffd2b647a466cf97e38f5006379"
+  "gitHead": "bd7ab217a07e91ba644c0cb69694a92b123326bf"
 }

package/src/components/ChannelCover.tsx

@@ -1,25 +1,45 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { View } from 'react-native';
 
-import { Avatar } from '@sendbird/uikit-react-native-foundation';
+import { Avatar, Icon, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdGroupChannel, getMembersExcludeMe, isDefaultCoverImage } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../hooks/useContext';
 
 type Props = {
   channel: SendbirdGroupChannel;
-  size?: number;
+  size: number;
   containerStyle?: StyleProp<ViewStyle>;
 };
 
 const ChannelCover = ({ channel, ...avatarProps }: Props) => {
   const { currentUser } = useSendbirdChat();
+  const { colors } = useUIKitTheme();
 
-  // channel cover
+  // 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} />;

package/src/components/ChatFlatList.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef
 import { FlatList, FlatListProps, Platform } from 'react-native';
 
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdMessage, isMyMessage } from '@sendbird/uikit-utils';
+import { SendbirdMessage, getMessageUniqId, isMyMessage } from '@sendbird/uikit-utils';
 
 let ANDROID_BUG_ALERT_SHOWED = Platform.OS !== 'android';
 const BOTTOM_DETECT_THRESHOLD = 25;
@@ -90,6 +90,7 @@ const ChatFlatList = forwardRef<ChatFlatListRef, Props>(function CustomFlatList(
       onEndReached={onTopReached}
       scrollEventThrottle={16}
       onScroll={_onScroll}
+      keyExtractor={getMessageUniqId}
     />
   );
 });

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

@@ -11,32 +11,37 @@ const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: '
 type Props = FileMessageProps & {
   type: 'image' | 'audio' | 'video' | 'file';
 };
-const BaseFileMessage = ({ message, variant, pressed, type }: Props) => {
+const BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
   return (
-    <View style={[styles.container, { backgroundColor: color.background }]}>
-      <Icon
-        icon={iconMapper[type]}
-        size={24}
-        containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
-      />
-      <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>
-        {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}
-      </Text>
+    <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>
+      <View style={styles.container}>
+        <Icon
+          icon={iconMapper[type]}
+          size={24}
+          containerStyle={{ backgroundColor: colors.background, padding: 2, borderRadius: 8, marginRight: 8 }}
+        />
+        <Text body3 ellipsizeMode={'middle'} numberOfLines={1} color={color.textMsg} style={styles.name}>
+          {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message)}
+        </Text>
+      </View>
+      {children}
     </View>
   );
 };
 
 const styles = createStyleSheet({
+  bubbleContainer: {
+    borderRadius: 16,
+    overflow: 'hidden',
+  },
   container: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center',
     paddingHorizontal: 12,
     paddingVertical: 6,
-    borderRadius: 16,
   },
   name: {
     flexShrink: 1,