@sendbird/uikit-react-native 3.8.0 → 3.8.2

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.2";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.8.0",
+  "version": "3.8.2",
   "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.2",
+    "@sendbird/uikit-react-native-foundation": "3.8.2",
     "@sendbird/uikit-tools": "0.0.1-alpha.77",
-    "@sendbird/uikit-utils": "3.8.0"
+    "@sendbird/uikit-utils": "3.8.2"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -208,5 +208,5 @@
       ]
     ]
   },
-  "gitHead": "bec311112e7b16076db18c6597c73f6ffb3489ad"
+  "gitHead": "b5bf785cfdf1e0c505d17d5989f16b15dc89f1dd"
 }

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/containers/SendbirdUIKitContainer.tsx

@@ -72,26 +72,8 @@ export const SendbirdUIKit = Object.freeze({
   },
 });
 
-export type ChatOmittedInitParams = Omit<
-  SendbirdChatParams<[GroupChannelModule, OpenChannelModule]>,
-  (typeof chatOmitKeys)[number]
->;
-
-const chatOmitKeys = [
-  'appId',
-  'newInstance',
-  'modules',
-  'debugMode',
-  'appVersion',
-  'localCacheEnabled',
-  'useAsyncStorageStore',
-  'useMMKVStorageStore',
-] as const;
-function sanitizeChatOptions<T extends Record<string, unknown>>(chatOptions: T): T {
-  const opts = { ...chatOptions };
-  chatOmitKeys.forEach((key) => delete opts[key]);
-  return opts;
-}
+export type ChatOmittedInitParams = SendbirdChatParams<[GroupChannelModule, OpenChannelModule]>;
+
 export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   appId: string;
   platformServices: {
@@ -184,7 +166,7 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
 
   const [internalStorage] = useState(() => new InternalLocalCacheStorage(chatOptions.localCacheStorage));
   const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(() => {
-    const sendbird = initializeSendbird(appId, sanitizeChatOptions(chatOptions));
+    const sendbird = initializeSendbird(appId, chatOptions);
     unsubscribes.current = sendbird.unsubscribes;
     return sendbird.chatSDK;
   });
@@ -196,7 +178,7 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
 
   useLayoutEffect(() => {
     if (!isFirstMount) {
-      const sendbird = initializeSendbird(appId, sanitizeChatOptions(chatOptions));
+      const sendbird = initializeSendbird(appId, chatOptions);
       setSdkInstance(sendbird.chatSDK);
       unsubscribes.current = sendbird.unsubscribes;
     }
@@ -307,10 +289,10 @@ const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
   );
 };
 
-interface InitOptions extends ChatOmittedInitParams {
+type InitOptions = Partial<ChatOmittedInitParams> & {
   localCacheStorage: LocalCacheStorage;
   onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK;
-}
+};
 const initializeSendbird = (appId: string, options: InitOptions) => {
   let chatSDK: SendbirdChatSDK;
   const unsubscribes: Array<() => void> = [];
@@ -318,13 +300,13 @@ const initializeSendbird = (appId: string, options: InitOptions) => {
 
   const isMMKVStorage = 'getString' in localCacheStorage;
   chatSDK = SendbirdChat.init({
-    ...chatInitParams,
     appId,
     newInstance: true,
     modules: [new GroupChannelModule(), new OpenChannelModule()],
     localCacheEnabled: true,
     useMMKVStorageStore: isMMKVStorage ? (localCacheStorage as MMKV) : undefined,
     useAsyncStorageStore: !isMMKVStorage ? (localCacheStorage as AsyncStorageStatic) : undefined,
+    ...chatInitParams,
   });
 
   if (onInitialized) {

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.2';
 export default VERSION;