@sendbird/uikit-react-native 3.5.4 → 3.7.0

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

@@ -105,6 +105,24 @@ export interface StringSet {
         /** GroupChannel > Suggested mention list */
         MENTION_LIMITED: (mentionLimit: number) => string;
     };
+    GROUP_CHANNEL_THREAD: {
+        /** GroupChannelThread > Header */
+        HEADER_TITLE: string;
+        HEADER_SUBTITLE: (currentUserId: string, channel: SendbirdGroupChannel) => string;
+        /** GroupChannelThread > List */
+        LIST_DATE_SEPARATOR: (date: Date, locale?: Locale) => string;
+        LIST_BUTTON_NEW_MSG: (newMessages: SendbirdMessage[]) => string;
+        /** GroupChannelThread > 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;
+        PARENT_MESSAGE_TIME: (message: SendbirdMessage, locale?: Locale) => string;
+        REPLY_COUNT: (replyCount: number, maxReplyCount?: number) => string;
+        /** GroupChannelThread > Suggested mention list */
+        MENTION_LIMITED: (mentionLimit: number) => string;
+    };
     GROUP_CHANNEL_SETTINGS: {
         /** GroupChannelSettings > Header */
         HEADER_TITLE: string;
@@ -236,6 +254,8 @@ export interface StringSet {
         CHANNEL_INPUT_PLACEHOLDER_DISABLED: string;
         CHANNEL_INPUT_PLACEHOLDER_MUTED: string;
         CHANNEL_INPUT_PLACEHOLDER_REPLY: string;
+        CHANNEL_INPUT_PLACEHOLDER_REPLY_IN_THREAD: string;
+        CHANNEL_INPUT_PLACEHOLDER_REPLY_TO_THREAD: string;
         CHANNEL_INPUT_EDIT_OK: string;
         CHANNEL_INPUT_EDIT_CANCEL: string;
         /** ChannelInput > Attachments **/
@@ -251,6 +271,7 @@ export interface StringSet {
         CHANNEL_MESSAGE_SAVE: string;
         CHANNEL_MESSAGE_DELETE: string;
         CHANNEL_MESSAGE_REPLY: string;
+        CHANNEL_MESSAGE_THREAD: string;
         /** Channel > Message > Delete confirm **/
         CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE: string;
         CHANNEL_MESSAGE_DELETE_CONFIRM_OK: string;
@@ -308,6 +329,8 @@ export interface StringSet {
         UNKNOWN_ERROR: string;
         GET_CHANNEL_ERROR: string;
         FIND_PARENT_MSG_ERROR: string;
+        THREAD_PARENT_MESSAGE_DELETED_ERROR: string;
+        FILE_UPLOAD_SIZE_LIMIT_EXCEEDED_ERROR: (uploadSizeLimit: string) => string;
     };
     PROFILE_CARD: {
         BUTTON_MESSAGE: string;

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

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import type { PartialDeep } from '@sendbird/uikit-utils';
+import { PartialDeep } from '@sendbird/uikit-utils';
 import type { StringSet } from './StringSet.type';
 type StringSetCreateOptions = {
     dateLocale: Locale;

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

@@ -1,8 +1,10 @@
 import type { ComponentType, ErrorInfo, ReactNode } from 'react';
+import type { MMKV } from 'react-native-mmkv';
 import type { SendbirdUser } from '@sendbird/uikit-utils';
+export type LocalCacheStorage = AsyncLocalCacheStorage | MMKVLocalCacheStorage;
 export type KeyValuePairGet = [string, string | null];
 export type KeyValuePairSet = [string, string];
-export interface LocalCacheStorage {
+export interface AsyncLocalCacheStorage {
     getAllKeys(): Promise<readonly string[] | string[]>;
     getItem(key: string): Promise<string | null>;
     setItem(key: string, value: string): Promise<void>;
@@ -11,6 +13,7 @@ export interface LocalCacheStorage {
     multiGet?(keys: string[]): Promise<readonly KeyValuePairGet[] | KeyValuePairGet[]>;
     multiRemove?(keys: string[]): Promise<void>;
 }
+export type MMKVLocalCacheStorage = Pick<MMKV, 'getString' | 'set' | 'delete' | 'getAllKeys'>;
 export type ErrorBoundaryProps = {
     error: Error;
     errorInfo: ErrorInfo;

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

@@ -1,2 +1,2 @@
-declare const VERSION = "3.5.4";
+declare const VERSION = "3.7.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.5.4",
+  "version": "3.7.0",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -60,22 +60,21 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.5.4",
-    "@sendbird/uikit-react-native-foundation": "3.5.4",
-    "@sendbird/uikit-tools": "0.0.1-alpha.76",
-    "@sendbird/uikit-utils": "3.5.4"
+    "@sendbird/uikit-chat-hooks": "3.7.0",
+    "@sendbird/uikit-react-native-foundation": "3.7.0",
+    "@sendbird/uikit-tools": "0.0.1-alpha.77",
+    "@sendbird/uikit-utils": "3.7.0"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
-    "@react-native-camera-roll/camera-roll": "^5.4.0",
-    "@react-native-clipboard/clipboard": "^1.8.5",
-    "@react-native-community/netinfo": "^9.3.0",
+    "@react-native-async-storage/async-storage": "^1.17.6",
+    "@react-native-camera-roll/camera-roll": "^7.8.1",
+    "@react-native-clipboard/clipboard": "^1.14.1",
+    "@react-native-community/netinfo": "^11.3.2",
     "@react-native-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
-    "@sendbird/react-native-scrollview-enhancer": "^0.2.1",
     "@types/react": "*",
     "@types/react-native": "*",
-    "@types/react-native-video": "^5.0.14",
     "date-fns": "^2.28.0",
     "expo-av": "^13.2.1",
     "expo-clipboard": "^4.1.2",
@@ -89,26 +88,28 @@
     "glob": "^7.2.0",
     "inquirer": "^8.2.0",
     "js-convert-case": "^4.2.0",
-    "react": "17.0.2",
-    "react-native": "0.67.5",
-    "react-native-audio-recorder-player": "^3.6.0",
+    "react": "18.2.0",
+    "react-native": "0.74.3",
+    "react-native-audio-recorder-player": "^3.6.10",
     "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.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",
+    "react-native-create-thumbnail": "^2.0.0",
+    "react-native-document-picker": "^9.3.0",
+    "react-native-file-access": "^3.1.0",
+    "react-native-image-picker": "^7.1.2",
+    "react-native-mmkv": "^2.12.2",
+    "react-native-permissions": "^3.10.1",
+    "react-native-safe-area-context": "^4.10.8",
+    "react-native-video": "^6.3.0",
     "typescript": "5.2.2"
   },
   "peerDependencies": {
     "@bam.tech/react-native-image-resizer": ">=3.0.0",
+    "@react-native-async-storage/async-storage": "^1.17.6",
     "@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.10.7",
+    "@sendbird/chat": "^4.12.9",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
@@ -126,6 +127,7 @@
     "react-native-document-picker": ">=8.0.0",
     "react-native-file-access": ">=2.4.3",
     "react-native-image-picker": ">=4.7.1",
+    "react-native-mmkv": "^2.0.0",
     "react-native-permissions": ">=3.6.0",
     "react-native-safe-area-context": ">=3.3.2",
     "react-native-video": ">=5.2.0"
@@ -134,6 +136,9 @@
     "@bam.tech/react-native-image-resizer": {
       "optional": true
     },
+    "@react-native-async-storage/async-storage": {
+      "optional": true
+    },
     "@react-native-camera-roll/camera-roll": {
       "optional": true
     },
@@ -203,5 +208,5 @@
       ]
     ]
   },
-  "gitHead": "98ab944367959657368a0f2f2abb3782b2fb88f2"
+  "gitHead": "51d39985ece857b026d311c621ec3c555cf896a1"
 }

package/src/components/ChannelInput/SendInput.tsx

@@ -53,6 +53,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     channel,
     messageToReply,
     setMessageToReply,
+    messageForThread,
   },
   ref,
 ) {
@@ -71,11 +72,22 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
 
   const messageReplyParams = useIIFE(() => {
     const { groupChannel } = sbOptions.uikit;
-    if (!channel.isGroupChannel() || groupChannel.channel.replyType === 'none' || !messageToReply) return {};
-    return {
-      parentMessageId: messageToReply.messageId,
-      isReplyToChannel: true,
-    };
+
+    if (channel.isGroupChannel()) {
+      if (groupChannel.channel.replyType === 'quote_reply' && messageToReply) {
+        return {
+          parentMessageId: messageToReply.messageId,
+          isReplyToChannel: true,
+        };
+      } else if (groupChannel.channel.replyType === 'thread' && messageForThread) {
+        return {
+          parentMessageId: messageForThread.messageId,
+          isReplyToChannel: true,
+        };
+      }
+    }
+
+    return {};
   });
 
   const messageMentionParams = useIIFE(() => {
@@ -152,6 +164,13 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
     if (inputFrozen) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
     if (inputDisabled) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED;
     if (messageToReply) return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY;
+    if (messageForThread) {
+      if (messageForThread.threadInfo && messageForThread.threadInfo.replyCount > 0) {
+        return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_TO_THREAD;
+      } else {
+        return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_REPLY_IN_THREAD;
+      }
+    }
 
     return STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE;
   };

package/src/components/ChannelInput/index.tsx

@@ -65,6 +65,7 @@ export type ChannelInputProps = {
   // reply - only available on group channel
   messageToReply?: undefined | SendbirdUserMessage | SendbirdFileMessage;
   setMessageToReply?: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
+  messageForThread?: undefined | SendbirdUserMessage | SendbirdFileMessage;
 
   // mention
   SuggestedMentionList?: CommonComponent<SuggestedMentionListProps>;

package/src/components/ChannelMessageList/index.tsx

@@ -57,9 +57,10 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
 
   onEditMessage: (message: HandleableMessage) => void;
   onReplyMessage?: (message: HandleableMessage) => void; // only available on group channel
+  onReplyInThreadMessage?: (message: HandleableMessage) => void; // only available on group channel
   onDeleteMessage: (message: HandleableMessage) => Promise<void>;
   onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<HandleableMessage | void>;
-  onPressParentMessage?: (parentMessage: SendbirdMessage) => void;
+  onPressParentMessage?: (parentMessage: SendbirdMessage, childMessage: HandleableMessage) => void;
   onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
 
   renderMessage: (props: {
@@ -70,12 +71,14 @@ export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpe
     onPress?: () => void;
     onLongPress?: () => void;
     onPressParentMessage?: ChannelMessageListProps<T>['onPressParentMessage'];
+    onReplyInThreadMessage?: ChannelMessageListProps<T>['onReplyInThreadMessage'];
     onShowUserProfile?: UserProfileContextType['show'];
     channel: T;
     currentUserId?: ChannelMessageListProps<T>['currentUserId'];
     enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
     bottomSheetItem?: BottomSheetItem;
     isFirstItem: boolean;
+    hideParentMessage?: boolean;
   }) => React.ReactElement | null;
   renderNewMessagesButton:
     | null
@@ -93,6 +96,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     channel,
     onEditMessage,
     onReplyMessage,
+    onReplyInThreadMessage,
     onDeleteMessage,
     onResendFailedMessage,
     onPressMediaMessage,
@@ -123,6 +127,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     currentUserId,
     onEditMessage,
     onReplyMessage,
+    onReplyInThreadMessage,
     onDeleteMessage,
     onResendFailedMessage,
     onPressMediaMessage,
@@ -139,6 +144,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
       onPress,
       onLongPress,
       onPressParentMessage,
+      onReplyInThreadMessage,
       onShowUserProfile: show,
       enableMessageGrouping,
       channel,
@@ -196,6 +202,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
   onResendFailedMessage,
   onEditMessage,
   onReplyMessage,
+  onReplyInThreadMessage,
   onDeleteMessage,
   onPressMediaMessage,
 }: Pick<
@@ -204,6 +211,7 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
   | 'currentUserId'
   | 'onEditMessage'
   | 'onReplyMessage'
+  | 'onReplyInThreadMessage'
   | 'onDeleteMessage'
   | 'onResendFailedMessage'
   | 'onPressMediaMessage'
@@ -322,6 +330,12 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
         title: STRINGS.LABELS.CHANNEL_MESSAGE_REPLY,
         onPress: () => onReplyMessage?.(message),
       }),
+      replyInThread: (message: HandleableMessage) => ({
+        disabled: Boolean(message.parentMessageId),
+        icon: 'thread' as const,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_THREAD,
+        onPress: () => onReplyInThreadMessage?.(message),
+      }),
       download: (message: HandleableMessage) => ({
         icon: 'download' as const,
         title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
@@ -336,8 +350,12 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
           sheetItems.push(menu.edit(message));
           sheetItems.push(menu.delete(message));
         }
-        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
-          sheetItems.push(menu.reply(message));
+        if (channel.isGroupChannel()) {
+          if (sbOptions.uikit.groupChannel.channel.replyType === 'thread' && onReplyInThreadMessage !== undefined) {
+            sheetItems.push(menu.replyInThread(message));
+          } else if (sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+            sheetItems.push(menu.reply(message));
+          }
         }
       }
     }
@@ -350,8 +368,12 @@ const useCreateMessagePressActions = <T extends SendbirdGroupChannel | SendbirdO
         if (isMyMessage(message, currentUserId) && message.sendingStatus === 'succeeded') {
           sheetItems.push(menu.delete(message));
         }
-        if (channel.isGroupChannel() && sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
-          sheetItems.push(menu.reply(message));
+        if (channel.isGroupChannel()) {
+          if (sbOptions.uikit.groupChannel.channel.replyType === 'thread' && onReplyInThreadMessage !== undefined) {
+            sheetItems.push(menu.replyInThread(message));
+          } else if (sbOptions.uikit.groupChannel.channel.replyType === 'quote_reply') {
+            sheetItems.push(menu.reply(message));
+          }
         }
       }
     }