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

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

@@ -26,6 +26,7 @@ export { default as createGroupChannelRegisterOperatorFragment } from './fragmen
 export { default as createGroupChannelMutedMembersFragment } from './fragments/createGroupChannelMutedMembersFragment';
 export { default as createGroupChannelBannedUsersFragment } from './fragments/createGroupChannelBannedUsersFragment';
 export { default as createGroupChannelNotificationsFragment } from './fragments/createGroupChannelNotificationsFragment';
+export { default as createMessageSearchFragment } from './fragments/createMessageSearchFragment';
 /** Fragments - open channels **/
 export { default as createOpenChannelFragment } from './fragments/createOpenChannelFragment';
 export { default as createOpenChannelParticipantsFragment } from './fragments/createOpenChannelParticipantsFragment';
@@ -73,6 +74,7 @@ export * from './domain/groupChannelList/types';
 export * from './domain/groupChannelNotifications';
 export * from './domain/groupChannelNotifications/types';
 export * from './domain/groupChannelUserList/types';
+export * from './domain/messageSearch/types';
 /** Feature - open channels **/
 export * from './domain/openChannel';
 export * from './domain/openChannel/types';

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

@@ -12,5 +12,6 @@ declare class EmojiManager {
     private _allEmoji;
     get allEmoji(): import("@sendbird/chat").Emoji[];
     init: (emojiContainer?: SendbirdEmojiContainer) => Promise<void>;
+    get emojiHash(): string | undefined;
 }
 export default EmojiManager;

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

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import type { SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
+import type { SendbirdBaseMessage, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
 /**
  * StringSet interface
  * Do not configure over 3 depths (for overrides easy)
@@ -10,7 +10,6 @@ export interface StringSet {
         HEADER_TITLE: (channel: SendbirdOpenChannel) => string;
         HEADER_SUBTITLE: (channel: SendbirdOpenChannel) => string;
         /** OpenChannel > List */
-        LIST_BANNER_FROZEN: string;
         LIST_DATE_SEPARATOR: (date: Date, locale?: Locale) => string;
         /** OpenChannel > Message bubble */
         MESSAGE_BUBBLE_TIME: (message: SendbirdMessage, locale?: Locale) => string;
@@ -18,6 +17,8 @@ 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 */
@@ -95,7 +96,6 @@ export interface StringSet {
         /** GroupChannel > Header */
         HEADER_TITLE: (currentUserId: string, channel: SendbirdGroupChannel) => string;
         /** GroupChannel > List */
-        LIST_BANNER_FROZEN: string;
         LIST_DATE_SEPARATOR: (date: Date, locale?: Locale) => string;
         LIST_BUTTON_NEW_MSG: (newMessages: SendbirdMessage[]) => string;
         /** GroupChannel > Message bubble */
@@ -106,6 +106,8 @@ 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 **/
@@ -148,6 +150,7 @@ export interface StringSet {
         /** GroupChannelSettings > Menu */
         MENU_MODERATION: string;
         MENU_MEMBERS: string;
+        MENU_SEARCH: string;
         MENU_LEAVE_CHANNEL: string;
         MENU_NOTIFICATION: string;
         MENU_NOTIFICATION_LABEL_ON: string;
@@ -241,6 +244,15 @@ export interface StringSet {
             selectedUsers: Array<T>;
         }) => string;
     };
+    MESSAGE_SEARCH: {
+        /** MessageSearch > Header */
+        HEADER_INPUT_PLACEHOLDER: string;
+        HEADER_RIGHT: string;
+        /** MessageSearch > Search result item */
+        SEARCH_RESULT_ITEM_TITLE: (message: SendbirdBaseMessage) => string;
+        SEARCH_RESULT_ITEM_TITLE_CAPTION: (message: SendbirdBaseMessage, locale?: Locale) => string;
+        SEARCH_RESULT_ITEM_BODY: (message: SendbirdBaseMessage) => string;
+    };
     LABELS: {
         PERMISSION_APP_NAME: string;
         PERMISSION_CAMERA: string;
@@ -256,6 +268,8 @@ export interface StringSet {
         UNMUTE: string;
         BAN: string;
         UNBAN: string;
+        /** ChannelMessageList **/
+        CHANNEL_MESSAGE_LIST_FROZEN: string;
         /** ChannelInput **/
         CHANNEL_INPUT_PLACEHOLDER_ACTIVE: string;
         CHANNEL_INPUT_PLACEHOLDER_DISABLED: string;

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

@@ -2,10 +2,14 @@ import type SBUError from '../libs/SBUError';
 export type Unsubscribe = () => void | undefined;
 export type DownloadedPath = string;
 export type FilePickerResponse = FileType | null;
+/**
+ * We are following the file format of react-native FormData
+ * @see https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Network/FormData.js#L37-L41
+ * */
 export type FileType = {
+    name: string;
     uri: string;
     size: number;
-    name: string;
     type: string;
 };
 export interface NotificationServiceInterface {

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

@@ -0,0 +1,6 @@
+export type PubSub<T> = {
+    publish: (data: T) => void;
+    subscribe: (subscriber: (data: T) => void) => () => void;
+};
+declare const pubsub: <T>() => PubSub<T>;
+export default pubsub;

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

@@ -1,2 +1,2 @@
-declare const VERSION = "2.4.1";
+declare const VERSION = "2.5.0-rc.0";
 export default VERSION;

package/package.json

@@ -1,7 +1,25 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "2.4.1",
-  "description": "react-native-uikit",
+  "version": "2.5.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",
+    "uikit",
+    "react native",
+    "chat",
+    "messaging",
+    "real-time",
+    "UI components",
+    "user authentication",
+    "channel management",
+    "SDK integration",
+    "customizable",
+    "feature-rich",
+    "social app",
+    "customer support",
+    "gaming",
+    "API"
+  ],
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/src/index.d.ts",
@@ -22,10 +40,6 @@
     "generate-version": "node scripts/generate-version.js ./src/version.ts",
     "create-domain": "node scripts/create-core-domain"
   },
-  "keywords": [
-    "react-native",
-    "sendbird"
-  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/sendbird/sendbird-uikit-react-native.git",
@@ -42,17 +56,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "2.4.1",
-    "@sendbird/uikit-react-native-foundation": "2.4.1",
-    "@sendbird/uikit-utils": "2.4.1"
+    "@sendbird/uikit-chat-hooks": "2.5.0-rc.0",
+    "@sendbird/uikit-react-native-foundation": "2.5.0-rc.0",
+    "@sendbird/uikit-utils": "2.5.0-rc.0"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
-    "@react-native-camera-roll/camera-roll": "^5.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-firebase/app": "^14.4.0",
     "@react-native-firebase/messaging": "^14.4.0",
+    "@sendbird/react-native-scrollview-enhancer": "^0.1.0-beta.3",
     "@types/react": "*",
     "@types/react-native": "*",
     "@types/react-native-video": "^5.0.14",
@@ -88,6 +103,7 @@
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
     "@sendbird/chat": "^4.3.0",
+    "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
     "expo-clipboard": ">=2.1.1",
@@ -181,6 +197,5 @@
     "entryPoint": "./src/index.ts",
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
-  },
-  "gitHead": "9ba7a005c941a3edd5b0f78d88d8cd1df6c280fc"
+  }
 }

package/src/components/ChannelMessageList/index.tsx

@@ -0,0 +1,392 @@
+import React, { Ref } from 'react';
+import { FlatList, FlatListProps, ListRenderItem, View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import {
+  BottomSheetItem,
+  ChannelFrozenBanner,
+  createStyleSheet,
+  useAlert,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import {
+  Logger,
+  SendbirdFileMessage,
+  SendbirdGroupChannel,
+  SendbirdMessage,
+  SendbirdOpenChannel,
+  SendbirdUserMessage,
+  getAvailableUriFromFileMessage,
+  getFileExtension,
+  getFileType,
+  isMyMessage,
+  messageKeyExtractor,
+  shouldRenderReaction,
+  toMegabyte,
+  useFreshCallback,
+} from '@sendbird/uikit-utils';
+
+import { DEPRECATION_WARNING } from '../../constants';
+import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
+import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+import type { CommonComponent } from '../../types';
+import ChatFlatList from '../ChatFlatList';
+import { ReactionAddons } from '../ReactionAddons';
+
+type PressActions = { onPress?: () => void; onLongPress?: () => void };
+type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+export type ChannelMessageListProps<T extends SendbirdGroupChannel | SendbirdOpenChannel> = {
+  enableMessageGrouping: boolean;
+  currentUserId?: string;
+  channel: T;
+  messages: SendbirdMessage[];
+  newMessages: SendbirdMessage[];
+  searchItem?: { startingPoint: number };
+
+  scrolledAwayFromBottom: boolean;
+  onScrolledAwayFromBottom: (value: boolean) => void;
+  onTopReached: () => void;
+  onBottomReached: () => void;
+  hasNext: () => boolean;
+
+  onPressNewMessagesButton: (animated?: boolean) => void;
+  onPressScrollToBottomButton: (animated?: boolean) => void;
+
+  onEditMessage: (message: HandleableMessage) => void;
+  onDeleteMessage: (message: HandleableMessage) => Promise<void>;
+  onResendFailedMessage: (failedMessage: HandleableMessage) => Promise<void>;
+  onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
+
+  renderMessage: (props: {
+    focused: boolean;
+    message: SendbirdMessage;
+    prevMessage?: SendbirdMessage;
+    nextMessage?: SendbirdMessage;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    onPressAvatar?: UserProfileContextType['show'];
+    channel: T;
+    currentUserId?: ChannelMessageListProps<T>['currentUserId'];
+    enableMessageGrouping: ChannelMessageListProps<T>['enableMessageGrouping'];
+  }) => React.ReactElement | null;
+  renderNewMessagesButton: null | CommonComponent<{
+    visible: boolean;
+    onPress: () => void;
+    newMessages: SendbirdMessage[];
+  }>;
+  renderScrollToBottomButton: null | CommonComponent<{
+    visible: boolean;
+    onPress: () => void;
+  }>;
+  flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+
+  /** @deprecated Please use `onPressMediaMessage` instead **/
+  onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
+} & {
+  ref?: Ref<FlatList<SendbirdMessage>> | undefined;
+};
+
+const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel>(
+  {
+    searchItem,
+    hasNext,
+    channel,
+    onEditMessage,
+    onDeleteMessage,
+    onResendFailedMessage,
+    onPressMediaMessage,
+    currentUserId,
+    renderNewMessagesButton,
+    renderScrollToBottomButton,
+    renderMessage,
+    messages,
+    newMessages,
+    enableMessageGrouping,
+    onScrolledAwayFromBottom,
+    scrolledAwayFromBottom,
+    onBottomReached,
+    onTopReached,
+    flatListProps,
+    onPressNewMessagesButton,
+    onPressScrollToBottomButton,
+    onPressImageMessage,
+  }: ChannelMessageListProps<T>,
+  ref: React.ForwardedRef<FlatList<SendbirdMessage>>,
+) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+  const { left, right } = useSafeAreaInsets();
+  const getMessagePressActions = useGetMessagePressActions({
+    channel,
+    currentUserId,
+    onEditMessage,
+    onDeleteMessage,
+    onResendFailedMessage,
+    onPressImageMessage,
+    onPressMediaMessage,
+  });
+
+  const safeAreaLayout = { paddingLeft: left, paddingRight: right };
+
+  const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
+    const { onPress, onLongPress } = getMessagePressActions(item);
+    return renderMessage({
+      message: item,
+      prevMessage: messages[index + 1],
+      nextMessage: messages[index - 1],
+      onPress,
+      onLongPress,
+      enableMessageGrouping,
+      channel,
+      currentUserId,
+      focused: (searchItem?.startingPoint ?? -1) === item.createdAt,
+    });
+  });
+
+  return (
+    <View style={[{ flex: 1, backgroundColor: colors.background }, safeAreaLayout]}>
+      {channel.isFrozen && (
+        <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.LABELS.CHANNEL_MESSAGE_LIST_FROZEN} />
+      )}
+      <ChatFlatList
+        {...flatListProps}
+        onTopReached={onTopReached}
+        onBottomReached={onBottomReached}
+        onScrolledAwayFromBottom={onScrolledAwayFromBottom}
+        ref={ref}
+        data={messages}
+        renderItem={renderItem}
+        keyExtractor={messageKeyExtractor}
+        contentContainerStyle={[
+          // { minHeight: '100%', justifyContent: 'flex-end' },
+          channel.isFrozen && styles.frozenListPadding,
+          flatListProps?.contentContainerStyle,
+        ]}
+      />
+      {renderNewMessagesButton && (
+        <View style={[styles.newMsgButton, safeAreaLayout]}>
+          {renderNewMessagesButton({
+            visible: newMessages.length > 0 && (hasNext() || scrolledAwayFromBottom),
+            onPress: () => onPressNewMessagesButton(),
+            newMessages,
+          })}
+        </View>
+      )}
+      {renderScrollToBottomButton && (
+        <View style={[styles.scrollButton, safeAreaLayout]}>
+          {renderScrollToBottomButton({
+            visible: hasNext() || scrolledAwayFromBottom,
+            onPress: () => onPressScrollToBottomButton(),
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const useGetMessagePressActions = <T extends SendbirdGroupChannel | SendbirdOpenChannel>({
+  channel,
+  currentUserId,
+  onResendFailedMessage,
+  onEditMessage,
+  onDeleteMessage,
+  onPressImageMessage,
+  onPressMediaMessage,
+}: Pick<
+  ChannelMessageListProps<T>,
+  | 'channel'
+  | 'currentUserId'
+  | 'onEditMessage'
+  | 'onDeleteMessage'
+  | 'onResendFailedMessage'
+  | 'onPressImageMessage'
+  | 'onPressMediaMessage'
+>) => {
+  const { colors } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
+  const { clipboardService, fileService } = usePlatformService();
+  const { features } = useSendbirdChat();
+
+  const handleFailedMessage = (message: HandleableMessage) => {
+    openSheet({
+      sheetItems: [
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
+          onPress: () => {
+            onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+          },
+        },
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
+          titleColor: colors.ui.dialog.default.none.destructive,
+          onPress: () => confirmDelete(message),
+        },
+      ],
+    });
+  };
+  const confirmDelete = (message: HandleableMessage) => {
+    alert({
+      title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
+      buttons: [
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
+        },
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
+          style: 'destructive',
+          onPress: () => {
+            onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error'));
+          },
+        },
+      ],
+    });
+  };
+
+  return (msg: SendbirdMessage) => {
+    if (!msg.isUserMessage() && !msg.isFileMessage()) {
+      return { onPress: undefined, onLongPress: undefined };
+    }
+
+    const sheetItems: BottomSheetItem['sheetItems'] = [];
+    const response: PressActions = {
+      onPress: undefined,
+      onLongPress: undefined,
+    };
+
+    if (msg.isUserMessage()) {
+      sheetItems.push({
+        icon: 'copy',
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
+        onPress: () => {
+          clipboardService.setString(msg.message || '');
+          toast.show(STRINGS.TOAST.COPY_OK, 'success');
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push(
+          {
+            icon: 'edit',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+            onPress: () => onEditMessage(msg),
+          },
+          {
+            icon: 'delete',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+            onPress: () => confirmDelete(msg),
+          },
+        );
+      }
+    }
+
+    if (msg.isFileMessage()) {
+      sheetItems.push({
+        icon: 'download',
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
+        onPress: async () => {
+          if (toMegabyte(msg.size) > 4) {
+            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+          }
+
+          fileService
+            .save({ fileUrl: msg.url, fileName: msg.name, fileType: msg.type })
+            .then((response) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+              Logger.log('File saved to', response);
+            })
+            .catch((err) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+              Logger.log('File save failure', err);
+            });
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push({
+          icon: 'delete',
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+          onPress: () => confirmDelete(msg),
+        });
+      }
+
+      const fileType = getFileType(msg.type || getFileExtension(msg.name));
+      switch (fileType) {
+        case 'image':
+        case 'video':
+        case 'audio': {
+          response.onPress = () => {
+            if (onPressImageMessage && fileType === 'image') {
+              Logger.warn(DEPRECATION_WARNING.CHANNEL.ON_PRESS_IMAGE_MESSAGE);
+              onPressImageMessage(msg, getAvailableUriFromFileMessage(msg));
+            }
+            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
+          };
+          break;
+        }
+        default: {
+          response.onPress = () => SBUUtils.openURL(msg.url);
+          break;
+        }
+      }
+    }
+
+    if (sheetItems.length > 0) {
+      response.onLongPress = () => {
+        openSheet({
+          sheetItems,
+          HeaderComponent: shouldRenderReaction(channel, features.reactionEnabled)
+            ? ({ onClose }) => <ReactionAddons.BottomSheet message={msg} channel={channel} onClose={onClose} />
+            : undefined,
+        });
+      };
+    }
+
+    if (msg.sendingStatus === 'failed') {
+      response.onLongPress = () => handleFailedMessage(msg);
+      response.onPress = () => {
+        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+      };
+    }
+
+    if (msg.sendingStatus === 'pending') {
+      response.onLongPress = undefined;
+      response.onPress = undefined;
+    }
+
+    return response;
+  };
+};
+
+const styles = createStyleSheet({
+  frozenBanner: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 8,
+    left: 8,
+    right: 8,
+  },
+  frozenListPadding: {
+    paddingBottom: 32,
+  },
+  newMsgButton: {
+    position: 'absolute',
+    zIndex: 999,
+    bottom: 10,
+    alignSelf: 'center',
+  },
+  scrollButton: {
+    position: 'absolute',
+    zIndex: 998,
+    bottom: 10,
+    right: 16,
+  },
+});
+
+// NOTE: Due to Generic inference is not working on forwardRef, we need to cast it as typeof ChannelMessageList and implicit `ref` prop
+export default React.forwardRef(ChannelMessageList) as typeof ChannelMessageList;