@sendbird/uikit-react-native 2.5.0 → 3.0.0-rc.0

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

@@ -33,8 +33,8 @@ export type OpenChannelProps = {
         onPressHeaderLeft: () => void;
         onPressHeaderRight: () => void;
     };
-    MessageList: Pick<ChannelMessageListProps<SendbirdOpenChannel>, 'enableMessageGrouping' | 'currentUserId' | 'channel' | 'messages' | 'newMessages' | 'scrolledAwayFromBottom' | 'onScrolledAwayFromBottom' | 'onTopReached' | 'onBottomReached' | 'onResendFailedMessage' | 'onDeleteMessage' | 'onPressMediaMessage' | 'renderMessage' | 'renderNewMessagesButton' | 'renderScrollToBottomButton' | 'flatListProps' | 'onPressImageMessage' | 'hasNext'>;
-    Input: Pick<ChannelInputProps, 'shouldRenderInput' | 'onPressSendUserMessage' | 'onPressSendFileMessage' | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage'>;
+    MessageList: Pick<ChannelMessageListProps<SendbirdOpenChannel>, 'enableMessageGrouping' | 'currentUserId' | 'channel' | 'messages' | 'newMessages' | 'scrolledAwayFromBottom' | 'onScrolledAwayFromBottom' | 'onTopReached' | 'onBottomReached' | 'onResendFailedMessage' | 'onDeleteMessage' | 'onPressMediaMessage' | 'renderMessage' | 'renderNewMessagesButton' | 'renderScrollToBottomButton' | 'flatListProps' | 'hasNext'>;
+    Input: Pick<ChannelInputProps, 'shouldRenderInput' | 'onPressSendUserMessage' | 'onPressSendFileMessage' | 'onPressUpdateUserMessage' | 'onPressUpdateFileMessage' | 'AttachmentsButton'>;
     Provider: {
         channel: SendbirdOpenChannel;
         keyboardAvoidOffset?: number;

package/lib/typescript/src/domain/openChannelList/component/OpenChannelListList.d.ts

@@ -1,3 +1,3 @@
 import type { OpenChannelListProps } from '../types';
-declare const OpenChanelListList: ({ openChannels, onLoadNext, flatListProps, renderOpenChannelPreview, refreshing, onRefresh, }: OpenChannelListProps['List']) => JSX.Element;
+declare const OpenChanelListList: ({ onPressChannel, openChannels, onLoadNext, flatListProps, renderOpenChannelPreview, refreshing, onRefresh, }: OpenChannelListProps['List']) => JSX.Element;
 export default OpenChanelListList;

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

@@ -5,34 +5,25 @@ import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
 import type { CommonComponent } from '../../types';
 export type OpenChannelListProps = {
     Fragment: {
-        /** Handler for navigating to OpenChannelFragment **/
-        onPressChannel: (channel: SendbirdOpenChannel) => void;
-        /** Handler for navigating to OpenChannelCreateFragment **/
+        onPressChannel: OpenChannelListProps['List']['onPressChannel'];
         onPressCreateChannel: () => void;
-        /** Method for rendering open channel preview **/
         renderOpenChannelPreview?: OpenChannelListProps['List']['renderOpenChannelPreview'];
-        /** Method for creating a custom query of open channel list **/
         queryCreator?: UseOpenChannelListOptions['queryCreator'];
-        /** Props for FlatList component, it passed to OpenChannelList.List **/
         flatListProps?: OpenChannelListProps['List']['flatListProps'];
     };
     Header: {
         onPressHeaderRight: () => void;
     };
     List: {
-        /** OpenChannels from SendbirdChat SDK **/
+        onPressChannel: (channel: SendbirdOpenChannel) => void;
         openChannels: SendbirdOpenChannel[];
-        /** Method for rendering a preview of each open channel **/
         renderOpenChannelPreview: (props: {
             channel: SendbirdOpenChannel;
+            onPress: () => void;
         }) => React.ReactElement | null;
-        /** Handler for loading the next batch of open channels **/
         onLoadNext: () => Promise<void>;
-        /** Props for the FlatList component, passed to the OpenChannelList.List **/
         flatListProps?: Omit<FlatListProps<SendbirdOpenChannel>, 'data' | 'renderItem'>;
-        /** Props for the indicates if the FlatList is currently being refreshed  **/
         refreshing: boolean;
-        /** Handler for refreshing the list of open channels **/
         onRefresh: () => void;
     };
     StatusError: {

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

@@ -1,11 +1,14 @@
+/** Components **/
 export { default as ChannelInput } from './components/ChannelInput';
-export { default as MessageRenderer } from './components/MessageRenderer';
+export { default as ChannelMessageList } from './components/ChannelMessageList';
+export { default as GroupChannelMessageRenderer } from './components/GroupChannelMessageRenderer';
 export { default as OpenChannelMessageRenderer } from './components/OpenChannelMessageRenderer';
 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';
+export { default as MessageSearchResultItem } from './components/MessageSearchResultItem';
 export { default as NewMessagesButton } from './components/NewMessagesButton';
 export { default as ProviderLayout } from './components/ProviderLayout';
 export { default as ScrollToBottomButton } from './components/ScrollToBottomButton';

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

@@ -3,10 +3,9 @@ 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);
+    constructor(config: MentionConfigInterface);
     rangeHelpers: {
         inRangeUnderOver(start: number, num: number, end: number): boolean;
         inRangeUnderMore(start: number, num: number, end: number): boolean;
@@ -44,8 +43,8 @@ declare class MentionManager {
     /**
      * @description Bold @user.nickname
      * */
-    textToMentionedComponents: (text: string, mentionedUsers: MentionedUser[]) => string | (string | JSX.Element)[];
-    textToMentionedMessageTemplate: (text: string, mentionedUsers: MentionedUser[]) => string;
+    textToMentionedComponents: (text: string, mentionedUsers: MentionedUser[], mentionEnabled: boolean) => string | (string | JSX.Element)[];
+    textToMentionedMessageTemplate: (text: string, mentionedUsers: MentionedUser[], mentionEnabled: boolean) => string;
     /**
      * @description Convert @{user.id} template to @user.nickname text and MentionedUser[] array.
      * */
@@ -53,7 +52,7 @@ declare class MentionManager {
         mentionedText: string;
         mentionedUsers: MentionedUser[];
     };
-    shouldUseMentionedMessageTemplate: (message?: SendbirdUserMessage | SendbirdFileMessage) => message is RequiredSpecific<import("@sendbird/chat/message").FileMessage | import("@sendbird/chat/message").UserMessage, "mentionedMessageTemplate" | "mentionedUsers" | "mentionedUserIds" | "mentionType">;
+    shouldUseMentionedMessageTemplate: (message?: SendbirdUserMessage | SendbirdFileMessage, mentionEnabled?: boolean) => message is RequiredSpecific<import("@sendbird/chat/message").FileMessage | import("@sendbird/chat/message").UserMessage, "mentionedMessageTemplate" | "mentionedUsers" | "mentionedUserIds" | "mentionType">;
 }
 type RequiredSpecific<T, K extends keyof T> = T & {
     [P in K]-?: T[P];

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

@@ -1,6 +1,6 @@
 export default class SBUUtils {
     static openSettings(): void;
-    static openURL(url: string): void;
+    static openURL(url: string): Promise<void>;
     static getImageSize(uri: string): Promise<{
         width: number;
         height: number;

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

@@ -17,8 +17,6 @@ export interface StringSet {
         MESSAGE_BUBBLE_EDITED_POSTFIX: string;
         MESSAGE_BUBBLE_UNKNOWN_TITLE: (message: SendbirdMessage) => string;
         MESSAGE_BUBBLE_UNKNOWN_DESC: (message: SendbirdMessage) => string;
-        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_LIST_FROZEN **/
-        LIST_BANNER_FROZEN: string;
     };
     OPEN_CHANNEL_PARTICIPANTS: {
         /** OpenChannelParticipants > Header */
@@ -106,42 +104,6 @@ export interface StringSet {
         MESSAGE_BUBBLE_UNKNOWN_DESC: (message: SendbirdMessage) => string;
         /** GroupChannel > Suggested mention list */
         MENTION_LIMITED: (mentionLimit: number) => string;
-        /** @deprecated Please use LABELS.CHANNEL_MESSAGE_LIST_FROZEN **/
-        LIST_BANNER_FROZEN: string;
-        /** @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;
-        /** @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;
-        /** @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;
-        /** @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 */
@@ -225,10 +187,6 @@ export interface StringSet {
     GROUP_CHANNEL_MEMBERS: {
         /** GroupChannelMembers > Header */
         HEADER_TITLE: string;
-        /** @deprecated Please use LABELS.USER_BAR_ME_POSTFIX **/
-        USER_BAR_ME_POSTFIX: string;
-        /** @deprecated Please use LABELS.USER_BAR_OPERATOR **/
-        USER_BAR_OPERATOR: string;
     };
     GROUP_CHANNEL_INVITE: {
         /** GroupChannelInvite > Header */
@@ -277,7 +235,8 @@ export interface StringSet {
         CHANNEL_INPUT_EDIT_OK: string;
         CHANNEL_INPUT_EDIT_CANCEL: string;
         /** ChannelInput > Attachments **/
-        CHANNEL_INPUT_ATTACHMENT_CAMERA: string;
+        CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO: string;
+        CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO: string;
         CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY: string;
         CHANNEL_INPUT_ATTACHMENT_FILES: string;
         /** Channel > Message **/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.5.0",
+  "version": "3.0.0-rc.0",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -57,9 +57,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "2.5.0",
-    "@sendbird/uikit-react-native-foundation": "2.5.0",
-    "@sendbird/uikit-utils": "2.5.0"
+    "@sendbird/uikit-chat-hooks": "3.0.0-rc.0",
+    "@sendbird/uikit-react-native-foundation": "3.0.0-rc.0",
+    "@sendbird/uikit-tools": "^0.0.1-alpha.38",
+    "@sendbird/uikit-utils": "3.0.0-rc.0"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -68,7 +69,7 @@
     "@react-native-community/netinfo": "^9.3.0",
     "@react-native-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
-    "@sendbird/react-native-scrollview-enhancer": "^0.1.0-beta.3",
+    "@sendbird/react-native-scrollview-enhancer": "^0.2.1",
     "@types/react": "*",
     "@types/react-native": "*",
     "@types/react-native-video": "^5.0.14",
@@ -103,7 +104,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.3.0",
+    "@sendbird/chat": "^4.9.2",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
@@ -114,8 +115,8 @@
     "expo-image-picker": ">=12.0.2",
     "expo-notifications": ">=0.14.1",
     "expo-video-thumbnails": ">=6.4.0",
-    "react": ">=16.13.1",
-    "react-native": ">=0.63.3",
+    "react": ">=17.0.2",
+    "react-native": ">=0.65.0",
     "react-native-create-thumbnail": ">=1.5.1",
     "react-native-document-picker": ">=8.0.0",
     "react-native-file-access": ">=2.4.3",
@@ -137,6 +138,9 @@
     "@react-native-firebase/messaging": {
       "optional": true
     },
+    "@sendbird/react-native-scrollview-enhancer": {
+      "optional": true
+    },
     "expo-av": {
       "optional": true
     },
@@ -198,6 +202,5 @@
     "entryPoint": "./src/index.ts",
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
-  },
-  "gitHead": "4e2d6a30075a8fb6cf2615c5c20d50a0d0ddfcda"
+  }
 }

package/src/components/ChannelInput/AttachmentsButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { Icon, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+export type AttachmentsButtonProps = {
+  onPress: () => void;
+  disabled: boolean;
+};
+
+const AttachmentsButton = ({ onPress, disabled }: AttachmentsButtonProps) => {
+  const { colors } = useUIKitTheme();
+  return (
+    <TouchableOpacity onPress={onPress} disabled={disabled}>
+      <Icon
+        color={disabled ? colors.ui.input.default.disabled.highlight : colors.ui.input.default.active.highlight}
+        icon={'add'}
+        size={24}
+        containerStyle={styles.container}
+      />
+    </TouchableOpacity>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    marginRight: 8,
+    padding: 4,
+  },
+});
+
+export default AttachmentsButton;

package/src/components/ChannelInput/EditInput.tsx

@@ -32,7 +32,6 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     messageToEdit,
     setMessageToEdit,
     onPressUpdateUserMessage,
-    onUpdateUserMessage,
     onSelectionChange,
     autoFocus,
     mentionedUsers,
@@ -40,7 +39,7 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
   },
   ref,
 ) {
-  const { mentionManager } = useSendbirdChat();
+  const { mentionManager, sbOptions } = useSendbirdChat();
   const { STRINGS } = useLocalization();
   const toast = useToast();
 
@@ -53,22 +52,18 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
     if (messageToEdit.isUserMessage()) {
       const mentionType = MentionType.USERS;
       const mentionedUserIds = mentionedUsers.map((it) => it.user.userId);
-      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(text, mentionedUsers);
+      const mentionedMessageTemplate = mentionManager.textToMentionedMessageTemplate(
+        text,
+        mentionedUsers,
+        sbOptions.uikit.groupChannel.channel.enableMention,
+      );
 
-      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);
-      }
+      onPressUpdateUserMessage(messageToEdit, {
+        message: text,
+        mentionType,
+        mentionedUserIds,
+        mentionedMessageTemplate,
+      }).catch(onFailureToUpdate);
     }
     setMessageToEdit();
     onChangeText('');
@@ -90,7 +85,11 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
         >
-          {mentionManager.textToMentionedComponents(text, mentionedUsers)}
+          {mentionManager.textToMentionedComponents(
+            text,
+            mentionedUsers,
+            sbOptions.uikit.groupChannel.channel.enableMention,
+          )}
         </TextInput>
       </View>
       <View style={{ marginTop: 8, flexDirection: 'row' }}>