@sendbird/uikit-react-native 3.7.6 → 3.8.1

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.file.voice.tsx

@@ -16,6 +16,7 @@ export type VoiceFileMessageState = {
 type Props = ThreadParentMessageRendererProps<{
   durationMetaArrayKey?: string;
   onUnmount: () => void;
+  initialCurrentTime?: number;
 }>;
 
 const ThreadParentMessageFileVoice = (props: Props) => {
@@ -25,6 +26,7 @@ const ThreadParentMessageFileVoice = (props: Props) => {
     parentMessage,
     durationMetaArrayKey = 'KEY_VOICE_MESSAGE_DURATION',
     onUnmount,
+    initialCurrentTime,
   } = props;
 
   const fileMessage: SendbirdFileMessage = parentMessage as SendbirdFileMessage;
@@ -38,7 +40,7 @@ const ThreadParentMessageFileVoice = (props: Props) => {
     const initialDuration = value ? parseInt(value, 10) : 0;
     return {
       status: 'paused',
-      currentTime: 0,
+      currentTime: initialCurrentTime || 0,
       duration: initialDuration,
     };
   });
@@ -83,7 +85,7 @@ const ThreadParentMessageFileVoice = (props: Props) => {
               )}
               <Text
                 body3
-                style={{ lineHeight: undefined, marginLeft: 6, opacity: 0.88 }}
+                style={{ lineHeight: undefined, marginStart: 6, opacity: 0.88 }}
                 color={uiColors.enabled.textVoicePlaytime}
               >
                 {millsToMSS(state.currentTime === 0 ? state.duration : remainingTime)}

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.og.tsx

@@ -33,11 +33,20 @@ const ThreadParentMessageUserOg = (props: Props) => {
     });
 
   return (
-    <Box>
+    <Box flex={1} alignItems={'flex-start'}>
       <PressBox activeOpacity={0.85} onPress={onPressMessage(userMessage)}>
-        <Text body3 color={colors.onBackground01} suppressHighlighting>
+        <Text
+          body3
+          suppressHighlighting
+          supportRTLAlign
+          originalText={userMessage.message}
+          color={colors.onBackground01}
+        >
           <RegexText
             body3
+            suppressHighlighting
+            supportRTLAlign
+            originalText={userMessage.message}
             color={colors.onBackground01}
             patterns={[
               ...(props.regexTextPatterns ?? []),
@@ -106,14 +115,14 @@ const styles = createStyleSheet({
     paddingTop: 8,
     paddingBottom: 12,
     maxWidth: 240,
-    borderBottomLeftRadius: 16,
-    borderBottomRightRadius: 16,
+    borderBottomStartRadius: 16,
+    borderBottomEndRadius: 16,
   },
   ogImage: {
     width: 240,
     height: 136,
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
+    borderTopStartRadius: 16,
+    borderTopEndRadius: 16,
   },
   ogUrl: {
     marginBottom: 4,

package/src/components/ThreadParentMessageRenderer/ThreadParentMessage.user.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Box, type RegexTextPattern, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { RegexText, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import { SendbirdUserMessage, urlRegexStrict } from '@sendbird/uikit-utils';
 
@@ -18,37 +18,43 @@ const ThreadParentMessageUser = (props: Props) => {
   const { colors } = useUIKitTheme();
 
   return (
-    <Text body3 color={colors.onBackground01} suppressHighlighting>
-      <RegexText
-        body3
-        color={colors.onBackground01}
-        patterns={[
-          ...(props.regexTextPatterns ?? []),
-          {
-            regex: urlRegexStrict,
-            replacer({ match, parentProps, keyPrefix, index }) {
-              return (
-                <Text
-                  {...parentProps}
-                  key={`${keyPrefix}-${index}`}
-                  onPress={() => props.onPressURL?.(match)}
-                  style={[parentProps?.style, styles.urlText]}
-                >
-                  {match}
-                </Text>
-              );
+    <Box flex={1} alignItems={'flex-start'}>
+      <Text body3 color={colors.onBackground01} suppressHighlighting supportRTLAlign originalText={userMessage.message}>
+        <RegexText
+          body3
+          suppressHighlighting
+          supportRTLAlign
+          originalText={userMessage.message}
+          color={colors.onBackground01}
+          patterns={[
+            ...(props.regexTextPatterns ?? []),
+            {
+              regex: urlRegexStrict,
+              replacer({ match, parentProps, keyPrefix, index }) {
+                return (
+                  <Text
+                    {...parentProps}
+                    key={`${keyPrefix}-${index}`}
+                    onPress={() => props.onPressURL?.(match)}
+                    style={[parentProps?.style, styles.urlText]}
+                  >
+                    {match}
+                  </Text>
+                );
+              },
             },
-          },
-        ]}
-      >
-        {props.renderRegexTextChildren?.(userMessage)}
-      </RegexText>
-      {Boolean(userMessage.updatedAt) && (
-        <Text body3 color={colors.onBackground02}>
-          {' (edited)'}
-        </Text>
-      )}
-    </Text>
+          ]}
+        >
+          {props.renderRegexTextChildren?.(userMessage)}
+        </RegexText>
+        {Boolean(userMessage.updatedAt) && (
+          <Text body3 color={colors.onBackground02}>
+            {/*FIXME: edited to string set*/}
+            {' (edited)'}
+          </Text>
+        )}
+      </Text>
+    </Box>
   );
 };
 

package/src/components/ThreadParentMessageRenderer/index.tsx

@@ -34,7 +34,7 @@ export type ThreadParentMessageRendererProps<AdditionalProps = unknown> = {
 const ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) => {
   const handlers = useSBUHandlers();
   const playerUnsubscribes = useRef<(() => void)[]>([]);
-  const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
+  const { sbOptions, currentUser, mentionManager, voiceMessageStatusManager } = useSendbirdChat();
   const { palette } = useUIKitTheme();
   const { mediaService, playerService } = usePlatformService();
   const parentMessage = props.parentMessage;
@@ -68,6 +68,11 @@ const ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) =>
           let seekFinished = !shouldSeekToTime;
 
           const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
+            voiceMessageStatusManager.setCurrentTime(
+              parentMessage.channelUrl,
+              parentMessage.messageId,
+              stopped ? 0 : currentTime,
+            );
             if (seekFinished) {
               setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
             }
@@ -111,7 +116,7 @@ const ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) =>
       if (
         mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
       ) {
-        return message.mentionedMessageTemplate;
+        return message.mentionedMessageTemplate ?? '';
       } else {
         return message.message;
       }
@@ -134,6 +139,7 @@ const ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) =>
                 color={mentionColor}
                 onPress={() => messageProps.onPressMentionedUser?.(user)}
                 onLongPress={messageProps.onLongPress}
+                suppressHighlighting
                 style={[
                   parentProps?.style,
                   { fontWeight: '700' },
@@ -176,6 +182,10 @@ const ThreadParentMessageRenderer = (props: ThreadParentMessageRendererProps) =>
       return (
         <ThreadParentMessageFileVoice
           durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}
+          initialCurrentTime={voiceMessageStatusManager.getCurrentTime(
+            parentMessage.channelUrl,
+            parentMessage.messageId,
+          )}
           onUnmount={() => {
             if (isVoiceMessage(parentMessage) && playerService.uri === parentMessage.url) {
               resetPlayer().catch((_) => {});

package/src/components/UserActionBar.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Pressable, TouchableOpacity, View } from 'react-native';
 import type { GestureResponderEvent } from 'react-native';
 
-import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Avatar, Box, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 type Props = {
@@ -27,9 +27,11 @@ const UserActionBar = ({ muted, uri, name, disabled, label, onPressActionMenu, o
         <Avatar muted={muted} size={36} uri={uri} />
       </Pressable>
       <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>
-        <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
-          {name}
-        </Text>
+        <Box flex={1} alignItems={'flex-start'}>
+          <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
+            {name}
+          </Text>
+        </Box>
         {Boolean(label) && (
           <Text body2 color={colors.onBackground02} style={styles.label}>
             {label}
@@ -53,26 +55,25 @@ const styles = createStyleSheet({
     height: 56,
   },
   avatar: {
-    marginLeft: 16,
-    marginRight: 16,
+    marginStart: 16,
+    marginEnd: 16,
   },
   label: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   infoContainer: {
     height: '100%',
     flex: 1,
     alignItems: 'center',
     flexDirection: 'row',
-    paddingRight: 12,
+    paddingEnd: 12,
     borderBottomWidth: 1,
   },
   iconContainer: {
     padding: 4,
   },
   name: {
-    flex: 1,
-    marginRight: 8,
+    marginEnd: 8,
   },
 });
 

package/src/components/UserSelectableBar.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Avatar, Box, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
 
 type Props = {
@@ -22,9 +22,11 @@ const UserSelectableBar = ({ uri, name, selected, disabled }: Props) => {
     <View style={styles.container}>
       <Avatar size={36} uri={uri} containerStyle={styles.avatar} />
       <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>
-        <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
-          {name}
-        </Text>
+        <Box flex={1} alignItems={'flex-start'}>
+          <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
+            {name}
+          </Text>
+        </Box>
         <Icon color={iconColor} size={24} icon={selected ? 'checkbox-on' : 'checkbox-off'} />
       </View>
     </View>
@@ -40,7 +42,7 @@ const styles = createStyleSheet({
     paddingHorizontal: 16,
   },
   avatar: {
-    marginRight: 16,
+    marginEnd: 16,
   },
   infoContainer: {
     height: '100%',
@@ -50,8 +52,7 @@ const styles = createStyleSheet({
     borderBottomWidth: 1,
   },
   name: {
-    flex: 1,
-    marginRight: 8,
+    marginEnd: 8,
   },
 });
 

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { Pressable } from 'react-native';
 
-import { useChannelHandler, useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
+import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import {
   GroupChannelPreview,
   Icon,
@@ -9,6 +9,7 @@ import {
   createStyleSheet,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import {
   SendbirdGroupChannel,
   SendbirdUser,
@@ -19,7 +20,6 @@ import {
   isMyMessage,
   isVoiceMessage,
   useIIFE,
-  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ChannelCover from '../components/ChannelCover';
@@ -38,8 +38,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
 
-  const handlerId = useUniqHandlerId('GroupChannelPreviewContainer_TypingIndicator');
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     onTypingStatusUpdated(eventChannel) {
       if (isDifferentChannel(channel, eventChannel)) return;
       if (!sbOptions.uikit.groupChannel.channelList.enableTypingIndicator) return;
@@ -115,7 +114,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
 
 const styles = createStyleSheet({
   titleCaptionIcon: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   broadcastCover: {
     padding: 12,

package/src/containers/SendbirdUIKitContainer.tsx

@@ -25,6 +25,7 @@ import {
   SendbirdGroupChannel,
   SendbirdGroupChannelCreateParams,
   SendbirdMember,
+  SendbirdReactedUserInfo,
   SendbirdUser,
   useIsFirstMount,
 } from '@sendbird/uikit-utils';
@@ -141,11 +142,11 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     onCreateChannel: (channel: SendbirdGroupChannel) => void;
     onBeforeCreateChannel?: (
       channelParams: SendbirdGroupChannelCreateParams,
-      users: SendbirdUser[] | SendbirdMember[],
+      users: SendbirdUser[] | SendbirdMember[] | SendbirdReactedUserInfo[],
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
   reaction?: {
-    onPressUserProfile?: (user: SendbirdUser | SendbirdMember) => void;
+    onPressUserProfile?: (user: SendbirdReactedUserInfo) => void;
   };
   userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
   imageCompression?: Partial<ImageCompressionConfigInterface>;

package/src/contexts/ReactionCtx.tsx

@@ -46,9 +46,6 @@ export const ReactionProvider = ({ children, onPressUserProfile }: Props) => {
 
   const openReactionUserList: ReactionContextType['openReactionUserList'] = useCallback(
     ({ channel, message, focusIndex = 0 }) => {
-      // NOTE: We don't support reaction user list for supergroup channel
-      if (channel.isGroupChannel() && channel.isSuper) return;
-
       setState({ channel, message });
       setReactionUserListFocusIndex(focusIndex);
       setReactionUserListVisible(true);

package/src/contexts/UserProfileCtx.tsx

@@ -1,14 +1,18 @@
 import React, { useCallback, useContext, useState } from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Modal, OutlinedButton, ProfileCard, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
-import type {
+import {
+  Logger,
+  PASS,
   SendbirdGroupChannel,
   SendbirdGroupChannelCreateParams,
   SendbirdMember,
+  SendbirdReactedUserInfo,
   SendbirdUser,
+  getDefaultGroupChannelCreateParams,
+  useIIFE,
+  useSafeAreaPadding,
 } from '@sendbird/uikit-utils';
-import { Logger, PASS, getDefaultGroupChannelCreateParams, useIIFE } from '@sendbird/uikit-utils';
 
 import { LocalizationContext } from '../contexts/LocalizationCtx';
 import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
@@ -16,7 +20,7 @@ import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
 type OnCreateChannel = (channel: SendbirdGroupChannel) => void;
 type OnBeforeCreateChannel = (
   channelParams: SendbirdGroupChannelCreateParams,
-  users: SendbirdUser[] | SendbirdMember[],
+  users: SendbirdUser[] | SendbirdMember[] | SendbirdReactedUserInfo[],
 ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
 
 type ShowOptions = {
@@ -24,7 +28,7 @@ type ShowOptions = {
 };
 
 export type UserProfileContextType = {
-  show(user: SendbirdUser | SendbirdMember, options?: ShowOptions): void;
+  show(user: SendbirdUser | SendbirdMember | SendbirdReactedUserInfo, options?: ShowOptions): void;
   hide(): void;
 };
 
@@ -56,9 +60,9 @@ export const UserProfileProvider = ({
     WARN_onCreateChannel = true;
   }
 
-  const { bottom, left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);
 
-  const [user, setUser] = useState<SendbirdUser | SendbirdMember>();
+  const [user, setUser] = useState<SendbirdUser | SendbirdMember | SendbirdReactedUserInfo>();
   const [visible, setVisible] = useState(false);
   const [hideMessageButton, setHideMessageButton] = useState(false);
 
@@ -128,10 +132,7 @@ export const UserProfileProvider = ({
       >
         {user && (
           <ProfileCard
-            containerStyle={[
-              styles.profileCardContainer,
-              { paddingLeft: left, paddingRight: right, paddingBottom: bottom },
-            ]}
+            containerStyle={[styles.profileCardContainer, safeArea]}
             uri={user.profileUrl}
             username={user.nickname || localizationContext.STRINGS.LABELS.USER_NO_NAME}
             bodyLabel={localizationContext.STRINGS.PROFILE_CARD.BODY_LABEL}
@@ -149,7 +150,7 @@ const styles = createStyleSheet({
     justifyContent: 'flex-end',
   },
   profileCardContainer: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
   },
 });

package/src/domain/groupChannel/component/GroupChannelHeader.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from 'react';
-import { View } from 'react-native';
 
-import { Header, Icon, createStyleSheet, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+import { Box, Header, Icon, createStyleSheet, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
 
 import ChannelCover from '../../../components/ChannelCover';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
@@ -36,13 +35,13 @@ const GroupChannelHeader = ({
     <HeaderComponent
       clearTitleMargin
       title={
-        <View style={styles.titleContainer}>
+        <Box style={styles.titleContainer}>
           <ChannelCover channel={channel} size={34} containerStyle={styles.avatarGroup} />
-          <View style={{ flexShrink: 1 }}>
+          <Box flexShrink={1} alignItems={'flex-start'}>
             <Header.Title h2>{headerTitle}</Header.Title>
             {renderSubtitle()}
-          </View>
-        </View>
+          </Box>
+        </Box>
       }
       left={<Icon icon={'arrow-left'} />}
       onPressLeft={onPressHeaderLeft}
@@ -59,7 +58,7 @@ const styles = createStyleSheet({
     alignItems: 'center',
   },
   avatarGroup: {
-    marginRight: 8,
+    marginEnd: 8,
   },
   subtitle: {
     marginTop: 2,

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -1,9 +1,14 @@
 import React, { useContext, useEffect } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useToast } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdMessage, SendbirdSendableMessage, useIsFirstMount } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import {
+  SendbirdMessage,
+  SendbirdSendableMessage,
+  isDifferentChannel,
+  useFreshCallback,
+  useIsFirstMount,
+} from '@sendbird/uikit-utils';
 
 import ChannelMessageList from '../../../components/ChannelMessageList';
 import { MESSAGE_FOCUS_ANIMATION_DELAY, MESSAGE_SEARCH_SAFE_SCROLL_DELAY } from '../../../constants';
@@ -22,7 +27,6 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     GroupChannelContexts.MessageList,
   );
 
-  const id = useUniqHandlerId('GroupChannelMessageList');
   const isFirstMount = useIsFirstMount();
 
   const scrollToMessageWithCreatedAt = useFreshCallback(
@@ -62,7 +66,7 @@ const GroupChannelMessageList = (props: GroupChannelProps['MessageList']) => {
     }
   });
 
-  useChannelHandler(sdk, id, {
+  useGroupChannelHandler(sdk, {
     onReactionUpdated(channel, event) {
       if (isDifferentChannel(channel, props.channel)) return;
       const recentMessage = props.messages[0];

package/src/domain/groupChannel/component/GroupChannelSuggestedMentionList.tsx

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
   Avatar,
+  Box,
   Divider,
   Icon,
   Text,
@@ -11,7 +11,7 @@ import {
   useHeaderStyle,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { conditionChaining } from '@sendbird/uikit-utils';
+import { conditionChaining, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import useKeyboardStatus from '../../../hooks/useKeyboardStatus';
@@ -26,6 +26,7 @@ const GroupChannelSuggestedMentionList = ({
   bottomInset,
   onPressToMention,
   mentionedUsers,
+  showUserId = true,
 }: GroupChannelProps['SuggestedMentionList']) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { channel } = useContext(GroupChannelContexts.Fragment);
@@ -33,7 +34,7 @@ const GroupChannelSuggestedMentionList = ({
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { topInset } = useHeaderStyle();
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   const keyboard = useKeyboardStatus();
 
@@ -53,7 +54,7 @@ const GroupChannelSuggestedMentionList = ({
   const renderLimitGuide = () => {
     return (
       <View style={[styles.searchLimited, { borderTopColor: colors.onBackground04 }]}>
-        <Icon icon={'info'} size={20} containerStyle={{ marginRight: 4 }} color={colors.onBackground02} />
+        <Icon icon={'info'} size={20} containerStyle={{ marginEnd: 4 }} color={colors.onBackground02} />
         <Text body3 color={colors.onBackground02}>
           {STRINGS.GROUP_CHANNEL.MENTION_LIMITED(mentionManager.config.mentionLimit)}
         </Text>
@@ -75,15 +76,17 @@ const GroupChannelSuggestedMentionList = ({
               style={styles.userContainer}
             >
               <Avatar size={28} uri={member.profileUrl} containerStyle={styles.userAvatar} />
-              <View style={styles.userInfo}>
+              <Box style={styles.userInfo}>
                 <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>
+              </Box>
             </Pressable>
           );
         })}
@@ -113,7 +116,7 @@ const GroupChannelSuggestedMentionList = ({
             borderTopColor: colors.onBackground04,
           },
         ]}
-        contentContainerStyle={{ paddingLeft: left, paddingRight: right }}
+        contentContainerStyle={safeArea}
       >
         {conditionChaining([searchLimited, canRenderMembers], [renderLimitGuide(), renderMembers(), null])}
       </ScrollView>
@@ -128,23 +131,23 @@ const styles = createStyleSheet({
   container: {
     position: 'absolute',
     top: 0,
-    right: 0,
-    left: 0,
+    start: 0,
+    end: 0,
   },
   scrollView: {
     position: 'absolute',
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
   },
   userContainer: {
-    paddingLeft: 16,
+    paddingStart: 16,
     flexDirection: 'row',
     height: 44,
     alignItems: 'center',
     justifyContent: 'center',
   },
   userAvatar: {
-    marginRight: 16,
+    marginEnd: 16,
   },
   userInfo: {
     flexDirection: 'row',
@@ -154,14 +157,14 @@ const styles = createStyleSheet({
     flexShrink: 1,
     lineHeight: 44,
     textAlignVertical: 'center',
-    marginRight: 6,
+    marginEnd: 6,
   },
   userId: {
     lineHeight: 44,
     textAlignVertical: 'center',
     minWidth: 32,
     flexShrink: 1,
-    marginRight: 16,
+    marginEnd: 16,
   },
   searchLimited: {
     borderTopWidth: 1,