@sendbird/uikit-react-native 3.7.6 → 3.8.0

package/src/fragments/createGroupChannelOperatorsFragment.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
-import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { ifOperator, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { ifOperator, isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -22,8 +23,6 @@ const createGroupChannelOperatorsFragment = (
     renderUser,
     queryCreator = () => channel.createOperatorListQuery({ limit: 20 }),
   }) => {
-    const handlerId = useUniqHandlerId('GroupChannelOperatorsFragment');
-
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
@@ -31,7 +30,7 @@ const createGroupChannelOperatorsFragment = (
 
     const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, { queryCreator });
 
-    useChannelHandler(sdk, handlerId, {
+    useGroupChannelHandler(sdk, {
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);

package/src/fragments/createGroupChannelSettingsFragment.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { NOOP } from '@sendbird/uikit-utils';
+import { NOOP, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import createGroupChannelSettingsModule from '../domain/groupChannelSettings/module/createGroupChannelSettingsModule';
 import type { GroupChannelSettingsFragment, GroupChannelSettingsModule } from '../domain/groupChannelSettings/types';
@@ -24,7 +23,7 @@ const createGroupChannelSettingsFragment = (
     menuItemsCreator,
   }) => {
     const { colors } = useUIKitTheme();
-    const { left, right } = useSafeAreaInsets();
+    const safeArea = useSafeAreaPadding(['left', 'right']);
 
     return (
       <GroupChannelSettingsModule.Provider channel={channel}>
@@ -32,8 +31,8 @@ const createGroupChannelSettingsFragment = (
         <ScrollView
           style={{ backgroundColor: colors.background }}
           contentContainerStyle={{
-            paddingLeft: left + styles.viewContainer.paddingHorizontal,
-            paddingRight: right + styles.viewContainer.paddingHorizontal,
+            paddingStart: safeArea.paddingStart + styles.viewContainer.paddingHorizontal,
+            paddingEnd: safeArea.paddingEnd + styles.viewContainer.paddingHorizontal,
           }}
         >
           <GroupChannelSettingsModule.Info />

package/src/fragments/createOpenChannelModerationFragment.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { NOOP } from '@sendbird/uikit-utils';
+import { NOOP, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { createOpenChannelModerationModule } from '../domain/openChannelModeration';
 import type { OpenChannelModerationFragment, OpenChannelModerationModule } from '../domain/openChannelModeration/types';
@@ -21,7 +20,7 @@ const createOpenChannelModerationFragment = (
     menuItemsCreator,
     onPressMenuBannedUsers,
   }) => {
-    const { left, right } = useSafeAreaInsets();
+    const safeArea = useSafeAreaPadding(['left', 'right']);
     const { colors } = useUIKitTheme();
 
     return (
@@ -30,8 +29,8 @@ const createOpenChannelModerationFragment = (
         <ScrollView
           style={{ backgroundColor: colors.background }}
           contentContainerStyle={{
-            paddingLeft: left + styles.viewContainer.paddingHorizontal,
-            paddingRight: right + styles.viewContainer.paddingHorizontal,
+            paddingStart: safeArea.paddingStart + styles.viewContainer.paddingHorizontal,
+            paddingEnd: safeArea.paddingEnd + styles.viewContainer.paddingHorizontal,
           }}
         >
           <OpenChannelModerationModule.Menu

package/src/fragments/createOpenChannelSettingsFragment.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import { ScrollView } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { NOOP } from '@sendbird/uikit-utils';
+import { NOOP, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { createOpenChannelSettingsModule } from '../domain/openChannelSettings';
 import type { OpenChannelSettingsFragment, OpenChannelSettingsModule } from '../domain/openChannelSettings/types';
@@ -23,7 +22,7 @@ const createOpenChannelSettingsFragment = (
     menuItemsCreator,
   }) => {
     const { colors } = useUIKitTheme();
-    const { left, right } = useSafeAreaInsets();
+    const safeArea = useSafeAreaPadding(['left', 'right']);
 
     return (
       <OpenChannelSettingsModule.Provider channel={channel} onNavigateToOpenChannel={onNavigateToOpenChannel}>
@@ -31,8 +30,8 @@ const createOpenChannelSettingsFragment = (
         <ScrollView
           style={{ backgroundColor: colors.background }}
           contentContainerStyle={{
-            paddingLeft: left + styles.viewContainer.paddingHorizontal,
-            paddingRight: right + styles.viewContainer.paddingHorizontal,
+            paddingStart: safeArea.paddingStart + styles.viewContainer.paddingHorizontal,
+            paddingEnd: safeArea.paddingEnd + styles.viewContainer.paddingHorizontal,
           }}
         >
           <OpenChannelSettingsModule.Info />

package/src/hooks/useMentionSuggestion.ts

@@ -1,8 +1,8 @@
 import { useCallback, useRef, useState } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdChatSDK, SendbirdGroupChannel, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useAsyncEffect, useDebounceEffect, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { isDifferentChannel, useAsyncEffect, useDebounceEffect } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../hooks/useContext';
 import type { Range } from '../types';
@@ -22,9 +22,7 @@ const useMentionSuggestion = (params: {
     setFreshChannel(await channel.refresh());
   }, [channel.url]);
 
-  const id = useUniqHandlerId('useMentionSuggestion');
-
-  useChannelHandler(params.sdk, id, {
+  useGroupChannelHandler(params.sdk, {
     onUserJoined(eventChannel) {
       if (isDifferentChannel(eventChannel, channel)) return;
       setFreshChannel(eventChannel);

package/src/hooks/useMentionTextInput.ts

@@ -7,6 +7,7 @@ import { SendbirdFileMessage, SendbirdUserMessage, replace, useFreshCallback } f
 import type { MentionedUser } from '../types';
 import { useSendbirdChat } from './useContext';
 
+// Note: The selection change with the keyboard cursor might not work properly with RTL languages
 const useMentionTextInput = (params: { messageToEdit?: SendbirdUserMessage | SendbirdFileMessage }) => {
   const { mentionManager, sbOptions } = useSendbirdChat();
 

package/src/libs/MentionManager.tsx

@@ -2,11 +2,16 @@ import React from 'react';
 
 import { Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdFileMessage, SendbirdUser, SendbirdUserMessage } from '@sendbird/uikit-utils';
-import { createMentionTemplateRegex, replaceWithRegex } from '@sendbird/uikit-utils';
+import { createMentionTemplateRegex, isEndsWithRTL, replaceWithRegex } from '@sendbird/uikit-utils';
 
 import type { MentionedUser, Range } from '../types';
 import type { MentionConfigInterface } from './MentionConfig';
 
+const SPAN_DIRECTION = {
+  LRM: '\u200E',
+  RLM: '\u200F',
+};
+
 class MentionManager {
   private _invalidStartsKeywords: string[];
   private _templateRegex: RegExp;
@@ -16,6 +21,19 @@ class MentionManager {
     this._templateRegex = createMentionTemplateRegex(this.config.trigger);
   }
 
+  // Note: When the input starts in LTR and the mentioned user's name is in RTL, it appears as "Hello @{cibarA}."
+  // If typing continues in RTL, the mention is rendered as: "Hello @{txeTlanoitiddA}{cibarA}."
+  //
+  // Conversely, if the input starts in RTL and the mentioned user's name is in LTR, it appears as "{Eng}@ cibarA."
+  // If typing continues, it is rendered as: "{Eng}{AdditionalText}@ cibarA."
+  //
+  // While this follows the natural text direction, it can make mentions harder to distinguish.
+  // To address this, we use the RLM or LRM Unicode characters to reset subsequent spans based on the last text string of the user's name.
+  // By applying this trick, the result will be displayed as "Hello @{cibarA} {txeTlanoitiddA}" or "{AdditionalText} {Eng}@ cibarA," ensuring the mention block remains clearly distinguishable.
+  getDirectionOfNextSpan = (name: string) => {
+    return isEndsWithRTL(name) ? SPAN_DIRECTION.LRM : SPAN_DIRECTION.RLM;
+  };
+
   public rangeHelpers = {
     inRangeUnderOver(start: number, num: number, end: number) {
       return start < num && num < end;
@@ -107,14 +125,22 @@ class MentionManager {
    * @description User to @{user.id} template format
    * */
   public asMentionedMessageTemplate = (user: SendbirdUser, delimiter = false) => {
-    return `${this.config.trigger}{${user.userId}}` + (delimiter ? this.config.delimiter : '');
+    const prefix = ''; // Do not append anything to here in order to maintain backward compatibility.
+    const content = `${this.config.trigger}{${user.userId}}`;
+    const postfix = delimiter ? this.config.delimiter : '';
+
+    return prefix + content + postfix;
   };
 
   /**
    * @description User to @user.nickname text format
    * */
   public asMentionedMessageText = (user: SendbirdUser, delimiter = false) => {
-    return `${this.config.trigger}${user.nickname}` + (delimiter ? this.config.delimiter : '');
+    const prefix = '';
+    const content = `${this.config.trigger}${user.nickname}`;
+    const postfix = this.getDirectionOfNextSpan(user.nickname) + (delimiter ? this.config.delimiter : '');
+
+    return prefix + content + postfix;
   };
 
   /**

package/src/localization/StringSet.type.ts

@@ -8,6 +8,7 @@ import type {
   SendbirdMessage,
   SendbirdOpenChannel,
   SendbirdParticipant,
+  SendbirdReactedUserInfo,
   SendbirdUser,
   SendbirdUserMessage,
 } from '@sendbird/uikit-utils';
@@ -323,6 +324,9 @@ export interface StringSet {
     VOICE_MESSAGE: string;
     VOICE_MESSAGE_INPUT_CANCEL: string;
   };
+  REACTION: {
+    MORE_USERS: (userCountDifference: number) => string;
+  };
   FILE_VIEWER: {
     TITLE: (message: SendbirdFileMessage) => string;
     SUBTITLE: (message: SendbirdFileMessage) => string;
@@ -377,6 +381,6 @@ export interface StringSet {
   PROFILE_CARD: {
     BUTTON_MESSAGE: string;
     BODY_LABEL: string;
-    BODY: (user: SendbirdUser | SendbirdMember) => string;
+    BODY: (user: SendbirdUser | SendbirdMember | SendbirdReactedUserInfo) => string;
   };
 }

package/src/localization/createBaseStringSet.ts

@@ -345,6 +345,9 @@ export const createBaseStringSet = ({ dateLocale, overrides }: StringSetCreateOp
       VOICE_MESSAGE_INPUT_CANCEL: 'Cancel',
       ...overrides?.LABELS,
     },
+    REACTION: {
+      MORE_USERS: (userCountDifference) => `And ${userCountDifference} others`,
+    },
     FILE_VIEWER: {
       TITLE: (message) => message.sender?.nickname || USER_NO_NAME,
       SUBTITLE: (message) => getMessageTimeFormat(new Date(message.createdAt), dateLocale),

package/src/version.ts

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