@sendbird/uikit-react-native 3.8.0 → 3.8.1

package/lib/module/libs/EmojiManager.js.map

@@ -1 +1 @@
-{"version":3,"names":["InternalLocalCacheStorage","MemoryStorage","constructor","_defineProperty","getAllKeys","Object","keys","_data","getItem","key","removeItem","setItem","value","EmojiManager","internalStorage","container","get","emojiStorage","strItem","freeze","JSON","parse","set","stringify","emojiContainer","category","emojiCategories","_emojiCategoryMap","id","emoji","emojis","_allEmojiMap","_allEmoji","values","emojiCategoryMap","allEmojiMap","allEmoji","emojiHash","_this$emojiStorage$co"],"sources":["EmojiManager.ts"],"sourcesContent":["import type { SendbirdEmoji, SendbirdEmojiCategory, SendbirdEmojiContainer } from '@sendbird/uikit-utils';\n\nimport type { AsyncLocalCacheStorage } from '../types';\nimport InternalLocalCacheStorage from './InternalLocalCacheStorage';\n\nclass MemoryStorage implements AsyncLocalCacheStorage {\n  _data: Record<string, string> = {};\n\n  async getAllKeys(): Promise<readonly string[] | string[]> {\n    return Object.keys(this._data);\n  }\n\n  async getItem(key: string): Promise<string | null> {\n    return this._data[key];\n  }\n\n  async removeItem(key: string): Promise<void> {\n    delete this._data[key];\n  }\n\n  async setItem(key: string, value: string): Promise<void> {\n    this._data[key] = value;\n  }\n}\n\nclass EmojiManager {\n  static key = 'sendbird-uikit@emoji-manager';\n\n  constructor(\n    private internalStorage: InternalLocalCacheStorage = new InternalLocalCacheStorage(new MemoryStorage()),\n  ) {}\n\n  private emojiStorage = {\n    container: null as null | SendbirdEmojiContainer,\n    get: async () => {\n      if (!this.emojiStorage.container) {\n        const strItem = await this.internalStorage.getItem(EmojiManager.key);\n        if (strItem) this.emojiStorage.container = Object.freeze(JSON.parse(strItem));\n      }\n      return this.emojiStorage.container;\n    },\n    set: async (container: SendbirdEmojiContainer) => {\n      this.emojiStorage.container = Object.freeze(container);\n      await this.internalStorage.setItem(EmojiManager.key, JSON.stringify(container));\n    },\n  };\n\n  private _emojiCategoryMap: Record<string, SendbirdEmojiCategory> = {};\n  public get emojiCategoryMap() {\n    return this._emojiCategoryMap;\n  }\n\n  private _allEmojiMap: Record<string, SendbirdEmoji> = {};\n  public get allEmojiMap() {\n    return this._allEmojiMap;\n  }\n\n  private _allEmoji: SendbirdEmoji[] = [];\n  public get allEmoji() {\n    return this._allEmoji;\n  }\n\n  public init = async (emojiContainer?: SendbirdEmojiContainer) => {\n    if (emojiContainer) await this.emojiStorage.set(emojiContainer);\n\n    const container = await this.emojiStorage.get();\n\n    if (container) {\n      for (const category of container.emojiCategories) {\n        this._emojiCategoryMap[category.id] = category;\n        for (const emoji of category.emojis) {\n          this._allEmojiMap[emoji.key] = emoji;\n        }\n      }\n      this._allEmoji = Object.values(this._allEmojiMap);\n    }\n  };\n\n  public get emojiHash() {\n    return this.emojiStorage.container?.emojiHash;\n  }\n}\n\nexport default EmojiManager;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Icon","InternalLocalCacheStorage","MemoryStorage","constructor","_defineProperty","getAllKeys","Object","keys","_data","getItem","key","removeItem","setItem","value","EmojiManager","internalStorage","container","get","emojiStorage","strItem","freeze","JSON","parse","set","stringify","emojiContainer","category","emojiCategories","_emojiCategoryMap","id","emoji","emojis","_allEmojiMap","_allEmoji","values","emojiCategoryMap","allEmojiMap","allEmoji","getEmojiIconSource","url","uri","Assets","question","emojiHash","_this$emojiStorage$co"],"sources":["EmojiManager.ts"],"sourcesContent":["import { ImageProps } from 'react-native';\n\nimport { Icon } from '@sendbird/uikit-react-native-foundation';\nimport type { SendbirdEmoji, SendbirdEmojiCategory, SendbirdEmojiContainer } from '@sendbird/uikit-utils';\n\nimport type { AsyncLocalCacheStorage } from '../types';\nimport InternalLocalCacheStorage from './InternalLocalCacheStorage';\n\nclass MemoryStorage implements AsyncLocalCacheStorage {\n  _data: Record<string, string> = {};\n\n  async getAllKeys(): Promise<readonly string[] | string[]> {\n    return Object.keys(this._data);\n  }\n\n  async getItem(key: string): Promise<string | null> {\n    return this._data[key];\n  }\n\n  async removeItem(key: string): Promise<void> {\n    delete this._data[key];\n  }\n\n  async setItem(key: string, value: string): Promise<void> {\n    this._data[key] = value;\n  }\n}\ntype EmojiCategoryId = string;\ntype EmojiKey = string;\nclass EmojiManager {\n  static key = 'sendbird-uikit@emoji-manager';\n\n  constructor(\n    private internalStorage: InternalLocalCacheStorage = new InternalLocalCacheStorage(new MemoryStorage()),\n  ) {}\n\n  private emojiStorage = {\n    container: null as null | SendbirdEmojiContainer,\n    get: async () => {\n      if (!this.emojiStorage.container) {\n        const strItem = await this.internalStorage.getItem(EmojiManager.key);\n        if (strItem) this.emojiStorage.container = Object.freeze(JSON.parse(strItem));\n      }\n      return this.emojiStorage.container;\n    },\n    set: async (container: SendbirdEmojiContainer) => {\n      this.emojiStorage.container = Object.freeze(container);\n      await this.internalStorage.setItem(EmojiManager.key, JSON.stringify(container));\n    },\n  };\n\n  private _emojiCategoryMap: Record<EmojiCategoryId, SendbirdEmojiCategory> = {};\n  public get emojiCategoryMap() {\n    return this._emojiCategoryMap;\n  }\n\n  private _allEmojiMap: Record<EmojiKey, SendbirdEmoji> = {};\n  public get allEmojiMap() {\n    return this._allEmojiMap;\n  }\n\n  private _allEmoji: SendbirdEmoji[] = [];\n  public get allEmoji() {\n    return this._allEmoji;\n  }\n\n  public getEmojiIconSource(emoji?: SendbirdEmoji | null | undefined): ImageProps['source'] {\n    return emoji?.url ? { uri: emoji.url } : Icon.Assets.question;\n  }\n\n  public init = async (emojiContainer?: SendbirdEmojiContainer) => {\n    if (emojiContainer) await this.emojiStorage.set(emojiContainer);\n\n    const container = await this.emojiStorage.get();\n\n    if (container) {\n      for (const category of container.emojiCategories) {\n        this._emojiCategoryMap[category.id] = category;\n        for (const emoji of category.emojis) {\n          this._allEmojiMap[emoji.key] = emoji;\n        }\n      }\n      this._allEmoji = Object.values(this._allEmojiMap);\n    }\n  };\n\n  public get emojiHash() {\n    return this.emojiStorage.container?.emojiHash;\n  }\n}\n\nexport default EmojiManager;\n"],"mappings":";;;AAEA,SAASA,IAAI,QAAQ,yCAAyC;AAI9D,OAAOC,yBAAyB,MAAM,6BAA6B;AAEnE,MAAMC,aAAa,CAAmC;EAAAC,YAAA;IAAAC,eAAA,gBACpB,CAAC,CAAC;EAAA;EAElC,MAAMC,UAAUA,CAAA,EAA0C;IACxD,OAAOC,MAAM,CAACC,IAAI,CAAC,IAAI,CAACC,KAAK,CAAC;EAChC;EAEA,MAAMC,OAAOA,CAACC,GAAW,EAA0B;IACjD,OAAO,IAAI,CAACF,KAAK,CAACE,GAAG,CAAC;EACxB;EAEA,MAAMC,UAAUA,CAACD,GAAW,EAAiB;IAC3C,OAAO,IAAI,CAACF,KAAK,CAACE,GAAG,CAAC;EACxB;EAEA,MAAME,OAAOA,CAACF,GAAW,EAAEG,KAAa,EAAiB;IACvD,IAAI,CAACL,KAAK,CAACE,GAAG,CAAC,GAAGG,KAAK;EACzB;AACF;AAGA,MAAMC,YAAY,CAAC;EAGjBX,WAAWA,CACDY,eAA0C,GAAG,IAAId,yBAAyB,CAAC,IAAIC,aAAa,CAAC,CAAC,CAAC,EACvG;IAAA,KADQa,eAA0C,GAA1CA,eAA0C;IAAAX,eAAA,uBAG7B;MACrBY,SAAS,EAAE,IAAqC;MAChDC,GAAG,EAAE,MAAAA,CAAA,KAAY;QACf,IAAI,CAAC,IAAI,CAACC,YAAY,CAACF,SAAS,EAAE;UAChC,MAAMG,OAAO,GAAG,MAAM,IAAI,CAACJ,eAAe,CAACN,OAAO,CAACK,YAAY,CAACJ,GAAG,CAAC;UACpE,IAAIS,OAAO,EAAE,IAAI,CAACD,YAAY,CAACF,SAAS,GAAGV,MAAM,CAACc,MAAM,CAACC,IAAI,CAACC,KAAK,CAACH,OAAO,CAAC,CAAC;QAC/E;QACA,OAAO,IAAI,CAACD,YAAY,CAACF,SAAS;MACpC,CAAC;MACDO,GAAG,EAAE,MAAOP,SAAiC,IAAK;QAChD,IAAI,CAACE,YAAY,CAACF,SAAS,GAAGV,MAAM,CAACc,MAAM,CAACJ,SAAS,CAAC;QACtD,MAAM,IAAI,CAACD,eAAe,CAACH,OAAO,CAACE,YAAY,CAACJ,GAAG,EAAEW,IAAI,CAACG,SAAS,CAACR,SAAS,CAAC,CAAC;MACjF;IACF,CAAC;IAAAZ,eAAA,4BAE2E,CAAC,CAAC;IAAAA,eAAA,uBAKtB,CAAC,CAAC;IAAAA,eAAA,oBAKrB,EAAE;IAAAA,eAAA,eASzB,MAAOqB,cAAuC,IAAK;MAC/D,IAAIA,cAAc,EAAE,MAAM,IAAI,CAACP,YAAY,CAACK,GAAG,CAACE,cAAc,CAAC;MAE/D,MAAMT,SAAS,GAAG,MAAM,IAAI,CAACE,YAAY,CAACD,GAAG,CAAC,CAAC;MAE/C,IAAID,SAAS,EAAE;QACb,KAAK,MAAMU,QAAQ,IAAIV,SAAS,CAACW,eAAe,EAAE;UAChD,IAAI,CAACC,iBAAiB,CAACF,QAAQ,CAACG,EAAE,CAAC,GAAGH,QAAQ;UAC9C,KAAK,MAAMI,KAAK,IAAIJ,QAAQ,CAACK,MAAM,EAAE;YACnC,IAAI,CAACC,YAAY,CAACF,KAAK,CAACpB,GAAG,CAAC,GAAGoB,KAAK;UACtC;QACF;QACA,IAAI,CAACG,SAAS,GAAG3B,MAAM,CAAC4B,MAAM,CAAC,IAAI,CAACF,YAAY,CAAC;MACnD;IACF,CAAC;EAlDE;EAkBH,IAAWG,gBAAgBA,CAAA,EAAG;IAC5B,OAAO,IAAI,CAACP,iBAAiB;EAC/B;EAGA,IAAWQ,WAAWA,CAAA,EAAG;IACvB,OAAO,IAAI,CAACJ,YAAY;EAC1B;EAGA,IAAWK,QAAQA,CAAA,EAAG;IACpB,OAAO,IAAI,CAACJ,SAAS;EACvB;EAEOK,kBAAkBA,CAACR,KAAwC,EAAwB;IACxF,OAAOA,KAAK,aAALA,KAAK,eAALA,KAAK,CAAES,GAAG,GAAG;MAAEC,GAAG,EAAEV,KAAK,CAACS;IAAI,CAAC,GAAGvC,IAAI,CAACyC,MAAM,CAACC,QAAQ;EAC/D;EAkBA,IAAWC,SAASA,CAAA,EAAG;IAAA,IAAAC,qBAAA;IACrB,QAAAA,qBAAA,GAAO,IAAI,CAAC1B,YAAY,CAACF,SAAS,cAAA4B,qBAAA,uBAA3BA,qBAAA,CAA6BD,SAAS;EAC/C;AACF;AAACvC,eAAA,CA5DKU,YAAY,SACH,8BAA8B;AA6D7C,eAAeA,YAAY","ignoreList":[]}

package/lib/module/version.js

@@ -1,3 +1,3 @@
-const VERSION = '3.8.0';
+const VERSION = '3.8.1';
 export default VERSION;
 //# sourceMappingURL=version.js.map

package/lib/module/version.js.map

@@ -1 +1 @@
-{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.8.0';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO","ignoreList":[]}
+{"version":3,"names":["VERSION"],"sources":["version.ts"],"sourcesContent":["const VERSION = '3.8.1';\nexport default VERSION;\n"],"mappings":"AAAA,MAAMA,OAAO,GAAG,OAAO;AACvB,eAAeA,OAAO","ignoreList":[]}

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

@@ -13,6 +13,10 @@ export type SuggestedMentionListProps = {
     inputHeight: number;
     onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
     mentionedUsers: MentionedUser[];
+    /**
+     * Whether to show user id information on each item.
+     * */
+    showUserId?: boolean;
 };
 export type ChannelInputProps = {
     style?: StyleProp<TextStyle>;

package/lib/typescript/src/components/ReactionAddons/ReactionRoundedButton.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
-import { StyleProp, ViewStyle } from 'react-native';
+import { ImageProps, StyleProp, ViewStyle } from 'react-native';
 type Props = {
-    url: string;
+    source: ImageProps['source'];
     count: number;
     reacted: boolean;
     style: StyleProp<ViewStyle>;
+    /**
+     * @deprecated Please use `source` instead
+     * */
+    url?: string;
 };
 declare const ReactionRoundedButton: {
-    ({ url, count, reacted, style }: Props): React.JSX.Element;
+    ({ source, count, reacted, style, url }: Props): React.JSX.Element;
     More({ pressed }: {
         pressed: boolean;
     }): React.JSX.Element;

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -14,7 +14,7 @@ import type { StringSet } from '../localization/StringSet.type';
 import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface, PlayerServiceInterface, RecorderServiceInterface } from '../platform/types';
 import { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "3.8.0";
+    VERSION: "3.8.1";
     PLATFORM: string;
     DEFAULT: {
         AUTO_PUSH_TOKEN_REGISTRATION: boolean;

package/lib/typescript/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { GroupChannelProps } from '../types';
-declare const GroupChannelSuggestedMentionList: ({ text, selection, inputHeight, bottomInset, onPressToMention, mentionedUsers, }: GroupChannelProps['SuggestedMentionList']) => React.JSX.Element;
+declare const GroupChannelSuggestedMentionList: ({ text, selection, inputHeight, bottomInset, onPressToMention, mentionedUsers, showUserId, }: GroupChannelProps['SuggestedMentionList']) => React.JSX.Element;
 export default GroupChannelSuggestedMentionList;

package/lib/typescript/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { GroupChannelThreadProps } from '../types';
-declare const GroupChannelThreadSuggestedMentionList: ({ text, selection, inputHeight, bottomInset, onPressToMention, mentionedUsers, }: GroupChannelThreadProps['SuggestedMentionList']) => React.JSX.Element;
+declare const GroupChannelThreadSuggestedMentionList: ({ text, selection, inputHeight, bottomInset, onPressToMention, mentionedUsers, showUserId, }: GroupChannelThreadProps['SuggestedMentionList']) => React.JSX.Element;
 export default GroupChannelThreadSuggestedMentionList;

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

@@ -1,4 +1,5 @@
-import type { SendbirdEmojiContainer } from '@sendbird/uikit-utils';
+import { ImageProps } from 'react-native';
+import type { SendbirdEmoji, SendbirdEmojiContainer } from '@sendbird/uikit-utils';
 import InternalLocalCacheStorage from './InternalLocalCacheStorage';
 declare class EmojiManager {
     private internalStorage;
@@ -11,6 +12,7 @@ declare class EmojiManager {
     get allEmojiMap(): Record<string, import("@sendbird/chat").Emoji>;
     private _allEmoji;
     get allEmoji(): import("@sendbird/chat").Emoji[];
+    getEmojiIconSource(emoji?: SendbirdEmoji | null | undefined): ImageProps['source'];
     init: (emojiContainer?: SendbirdEmojiContainer) => Promise<void>;
     get emojiHash(): string | undefined;
 }

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

@@ -1,2 +1,2 @@
-declare const VERSION = "3.8.0";
+declare const VERSION = "3.8.1";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.8.0",
+  "version": "3.8.1",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -60,10 +60,10 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.8.0",
-    "@sendbird/uikit-react-native-foundation": "3.8.0",
+    "@sendbird/uikit-chat-hooks": "3.8.1",
+    "@sendbird/uikit-react-native-foundation": "3.8.1",
     "@sendbird/uikit-tools": "0.0.1-alpha.77",
-    "@sendbird/uikit-utils": "3.8.0"
+    "@sendbird/uikit-utils": "3.8.1"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -208,5 +208,5 @@
       ]
     ]
   },
-  "gitHead": "bec311112e7b16076db18c6597c73f6ffb3489ad"
+  "gitHead": "33f4e385cdccfdf83ac1b4fe1ab19955590c1330"
 }

package/src/components/ChannelInput/index.tsx

@@ -37,6 +37,10 @@ export type SuggestedMentionListProps = {
   inputHeight: number;
   onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
   mentionedUsers: MentionedUser[];
+  /**
+   * Whether to show user id information on each item.
+   * */
+  showUserId?: boolean;
 };
 
 export type ChannelInputProps = {

package/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Pressable } from 'react-native';
+import { ImageProps, Pressable } from 'react-native';
 
-import type { Emoji } from '@sendbird/chat';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
@@ -33,7 +32,7 @@ const createOnPressReaction = (
 const createReactionButtons = (
   channel: SendbirdBaseChannel,
   message: SendbirdBaseMessage,
-  getEmoji: (key: string) => Emoji,
+  getIconSource: (reactionKey: string) => ImageProps['source'],
   emojiLimit: number,
   onOpenReactionList: () => void,
   onOpenReactionUserList: (focusIndex: number) => void,
@@ -52,7 +51,7 @@ const createReactionButtons = (
       >
         {({ pressed }) => (
           <ReactionRoundedButton
-            url={getEmoji(reaction.key).url}
+            source={getIconSource(reaction.key)}
             count={getReactionCount(reaction)}
             reacted={pressed || reaction.hasCurrentUserReacted}
             style={
@@ -104,7 +103,10 @@ const MessageReactionAddon = ({
   const reactionButtons = createReactionButtons(
     channel,
     message,
-    (key) => emojiManager.allEmojiMap[key],
+    (reactionKey) => {
+      const emoji = emojiManager.allEmojiMap[reactionKey];
+      return emojiManager.getEmojiIconSource(emoji);
+    },
     emojiManager.allEmoji.length,
     () => openReactionList({ channel, message }),
     (focusIndex) => openReactionUserList({ channel, message, focusIndex }),

package/src/components/ReactionAddons/ReactionRoundedButton.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import { ImageProps, StyleProp, View, ViewStyle } from 'react-native';
 
 import { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { truncatedCount } from '@sendbird/uikit-utils';
 
 type Props = {
-  url: string;
+  source: ImageProps['source'];
   count: number;
   reacted: boolean;
   style: StyleProp<ViewStyle>;
+  /**
+   * @deprecated Please use `source` instead
+   * */
+  url?: string;
 };
 
-const ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {
+const ReactionRoundedButton = ({ source, count, reacted, style, url }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.reaction.rounded;
 
@@ -23,7 +27,7 @@ const ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {
         style,
       ]}
     >
-      <Image source={{ uri: url }} style={styles.emoji} />
+      <Image source={source ? source : { uri: url }} style={styles.emoji} />
       <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>
         {truncatedCount(count, 99, '')}
       </Text>

package/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -10,7 +10,13 @@ import {
   createStyleSheet,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdReaction, getReactionCount, truncatedCount, useSafeAreaPadding } from '@sendbird/uikit-utils';
+import {
+  SendbirdEmoji,
+  SendbirdReaction,
+  getReactionCount,
+  truncatedCount,
+  useSafeAreaPadding,
+} from '@sendbird/uikit-utils';
 
 import type { ReactionBottomSheetProps } from './index';
 
@@ -81,7 +87,7 @@ const ReactionUserListBottomSheet = ({
         {reactions.map((reaction, index) => {
           const isFocused = focusedReaction?.key === reaction.key;
           const isLastItem = reactions.length - 1 === index;
-          const emoji = emojiManager.allEmojiMap[reaction.key];
+          const emoji = emojiManager.allEmojiMap[reaction.key] as SendbirdEmoji | undefined;
 
           return (
             <Pressable
@@ -102,7 +108,7 @@ const ReactionUserListBottomSheet = ({
                 }
               }}
             >
-              <Image source={{ uri: emoji.url }} style={styles.tabEmoji} />
+              <Image source={emojiManager.getEmojiIconSource(emoji)} style={styles.tabEmoji} />
               <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>
                 {truncatedCount(getReactionCount(reaction))}
               </Text>

package/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx

@@ -26,6 +26,7 @@ const GroupChannelSuggestedMentionList = ({
   bottomInset,
   onPressToMention,
   mentionedUsers,
+  showUserId = true,
 }: GroupChannelProps['SuggestedMentionList']) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { channel } = useContext(GroupChannelContexts.Fragment);
@@ -79,9 +80,11 @@ const GroupChannelSuggestedMentionList = ({
                 <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
                   {member.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
-                <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
-                  {member.userId}
-                </Text>
+                {!!showUserId && (
+                  <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
+                    {member.userId}
+                  </Text>
+                )}
                 <Divider style={{ position: 'absolute', bottom: 0 }} />
               </Box>
             </Pressable>

package/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx

@@ -25,6 +25,7 @@ const GroupChannelThreadSuggestedMentionList = ({
   bottomInset,
   onPressToMention,
   mentionedUsers,
+  showUserId = true,
 }: GroupChannelThreadProps['SuggestedMentionList']) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { channel } = useContext(GroupChannelThreadContexts.Fragment);
@@ -78,9 +79,11 @@ const GroupChannelThreadSuggestedMentionList = ({
                 <Text body2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
                   {member.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
-                <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
-                  {member.userId}
-                </Text>
+                {!!showUserId && (
+                  <Text body3 color={colors.onBackground03} numberOfLines={1} style={styles.userId}>
+                    {member.userId}
+                  </Text>
+                )}
                 <Divider style={{ position: 'absolute', bottom: 0 }} />
               </View>
             </Pressable>

package/src/libs/EmojiManager.ts

@@ -1,3 +1,6 @@
+import { ImageProps } from 'react-native';
+
+import { Icon } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdEmoji, SendbirdEmojiCategory, SendbirdEmojiContainer } from '@sendbird/uikit-utils';
 
 import type { AsyncLocalCacheStorage } from '../types';
@@ -22,7 +25,8 @@ class MemoryStorage implements AsyncLocalCacheStorage {
     this._data[key] = value;
   }
 }
-
+type EmojiCategoryId = string;
+type EmojiKey = string;
 class EmojiManager {
   static key = 'sendbird-uikit@emoji-manager';
 
@@ -45,12 +49,12 @@ class EmojiManager {
     },
   };
 
-  private _emojiCategoryMap: Record<string, SendbirdEmojiCategory> = {};
+  private _emojiCategoryMap: Record<EmojiCategoryId, SendbirdEmojiCategory> = {};
   public get emojiCategoryMap() {
     return this._emojiCategoryMap;
   }
 
-  private _allEmojiMap: Record<string, SendbirdEmoji> = {};
+  private _allEmojiMap: Record<EmojiKey, SendbirdEmoji> = {};
   public get allEmojiMap() {
     return this._allEmojiMap;
   }
@@ -60,6 +64,10 @@ class EmojiManager {
     return this._allEmoji;
   }
 
+  public getEmojiIconSource(emoji?: SendbirdEmoji | null | undefined): ImageProps['source'] {
+    return emoji?.url ? { uri: emoji.url } : Icon.Assets.question;
+  }
+
   public init = async (emojiContainer?: SendbirdEmojiContainer) => {
     if (emojiContainer) await this.emojiStorage.set(emojiContainer);
 

package/src/version.ts

@@ -1,2 +1,2 @@
-const VERSION = '3.8.0';
+const VERSION = '3.8.1';
 export default VERSION;