@sendbird/uikit-react-native 3.7.6 → 3.8.1

package/src/components/FileViewer/FileViewerFooter.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
   Box,
@@ -9,6 +8,7 @@ import {
   useHeaderStyle,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
+import { useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 type Props = {
   bottomInset: number;
@@ -20,15 +20,15 @@ type Props = {
 const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDownload }: Props) => {
   const { palette } = useUIKitTheme();
   const { defaultHeight } = useHeaderStyle();
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   return (
     <Box
       style={[
         styles.container,
         {
-          paddingLeft: styles.container.paddingHorizontal + left,
-          paddingRight: styles.container.paddingHorizontal + right,
+          paddingStart: styles.container.paddingHorizontal + safeArea.paddingStart,
+          paddingEnd: styles.container.paddingHorizontal + safeArea.paddingEnd,
           paddingBottom: bottomInset,
           height: defaultHeight + bottomInset,
           backgroundColor: palette.overlay01,
@@ -50,8 +50,8 @@ const styles = createStyleSheet({
   container: {
     zIndex: 1,
     position: 'absolute',
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/FileViewer/FileViewerHeader.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
   Box,
@@ -10,7 +9,7 @@ import {
   useHeaderStyle,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { truncate } from '@sendbird/uikit-utils';
+import { truncate, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 type Props = {
   headerShown?: boolean;
@@ -23,7 +22,7 @@ type Props = {
 const FileViewerHeader = ({ headerShown = true, topInset, onClose, subtitle, title }: Props) => {
   const { palette } = useUIKitTheme();
   const { defaultHeight } = useHeaderStyle();
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   if (!headerShown) return null;
 
@@ -32,8 +31,8 @@ const FileViewerHeader = ({ headerShown = true, topInset, onClose, subtitle, tit
       style={[
         styles.container,
         {
-          paddingLeft: styles.container.paddingHorizontal + left,
-          paddingRight: styles.container.paddingHorizontal + right,
+          paddingStart: styles.container.paddingHorizontal + safeArea.paddingStart,
+          paddingEnd: styles.container.paddingHorizontal + safeArea.paddingEnd,
           paddingTop: topInset,
           height: defaultHeight + topInset,
           backgroundColor: palette.overlay01,
@@ -60,8 +59,8 @@ const styles = createStyleSheet({
   container: {
     zIndex: 1,
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     position: 'absolute',
     flexDirection: 'row',
     alignItems: 'center',

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageParentMessage.tsx

@@ -132,11 +132,11 @@ const GroupChannelMessageParentMessage = ({ variant, channel, message, childMess
     <Box>
       <Box
         alignItems={variant === 'outgoing' ? 'flex-end' : 'flex-start'}
-        paddingLeft={variant === 'outgoing' ? 0 : 12}
-        paddingRight={variant === 'outgoing' ? 12 : 0}
+        paddingStart={variant === 'outgoing' ? 0 : 12}
+        paddingEnd={variant === 'outgoing' ? 12 : 0}
       >
         <PressBox onPress={() => onPress?.(parentMessage, childMessage)} style={styles.senderLabel}>
-          <Icon icon={'reply-filled'} size={13} color={colors.onBackground03} containerStyle={{ marginRight: 4 }} />
+          <Icon icon={'reply-filled'} size={13} color={colors.onBackground03} containerStyle={{ marginEnd: 4 }} />
           <Text caption1 color={colors.onBackground03}>
             {STRINGS.LABELS.REPLY_FROM_SENDER_TO_RECEIVER(childMessage, parentMessage, currentUser?.userId)}
           </Text>
@@ -179,7 +179,7 @@ const styles = createStyleSheet({
     width: 16,
     height: 16,
     borderRadius: 10,
-    marginRight: 4,
+    marginEnd: 4,
     marginTop: 2,
   },
   senderLabel: {

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageReplyInfo.tsx

@@ -74,21 +74,21 @@ const styles = createStyleSheet({
     alignItems: 'center',
   },
   avatarContainer: {
-    marginRight: 4,
+    marginEnd: 4,
   },
   avatarOverlay: {
     position: 'absolute',
     top: 0,
-    left: 0,
-    right: 0,
+    start: 0,
+    end: 0,
     bottom: 0,
     borderRadius: 10,
   },
   plusIcon: {
     position: 'absolute',
     top: 3,
-    left: 3,
-    right: 0,
+    start: 3,
+    end: 0,
     bottom: 0,
   },
 });

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -122,7 +122,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           let seekFinished = !shouldSeekToTime;
 
           const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
-            voiceMessageStatusManager.setCurrentTime(message.channelUrl, message.messageId, currentTime);
+            voiceMessageStatusManager.setCurrentTime(message.channelUrl, message.messageId, stopped ? 0 : currentTime);
             if (seekFinished) {
               setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
             }
@@ -189,7 +189,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
       if (
         mentionManager.shouldUseMentionedMessageTemplate(message, sbOptions.uikit.groupChannel.channel.enableMention)
       ) {
-        return message.mentionedMessageTemplate;
+        return message.mentionedMessageTemplate ?? '';
       } else {
         return message.message;
       }
@@ -212,6 +212,7 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
                 color={mentionColor}
                 onPress={() => messageProps.onPressMentionedUser?.(user)}
                 onLongPress={messageProps.onLongPress}
+                suppressHighlighting
                 style={[
                   parentProps?.style,
                   { fontWeight: '700' },

package/src/components/MessageSearchResultItem.tsx

@@ -30,9 +30,9 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
       <Box style={styles.container}>
         <Avatar size={styles.avatarSize.width} uri={getSenderProfile(message)} containerStyle={styles.avatar} />
 
-        <Box flex={1} paddingRight={16}>
+        <Box flex={1} paddingEnd={16}>
           <Box style={styles.titleLine}>
-            <Box flex={1} marginRight={4} justifyContent={'center'}>
+            <Box flex={1} marginEnd={4} justifyContent={'center'} alignItems={'flex-start'}>
               <Text subtitle2 color={colors.onBackground01} numberOfLines={1}>
                 {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_TITLE(message)}
               </Text>
@@ -58,15 +58,18 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
                 />
               )}
 
-              <Text
-                body3
-                numberOfLines={fileIcon ? 1 : 2}
-                ellipsizeMode={fileIcon ? 'middle' : 'tail'}
-                style={styles.bodyText}
-                color={colors.onBackground03}
-              >
-                {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
-              </Text>
+              <Box flex={1} alignItems={'flex-start'}>
+                <Text
+                  body3
+                  numberOfLines={fileIcon ? 1 : 2}
+                  ellipsizeMode={fileIcon ? 'middle' : 'tail'}
+                  style={styles.bodyText}
+                  color={colors.onBackground03}
+                  supportRTLAlign
+                >
+                  {STRINGS.MESSAGE_SEARCH.SEARCH_RESULT_ITEM_BODY(message)}
+                </Text>
+              </Box>
             </Box>
           </Box>
 
@@ -108,16 +111,15 @@ const styles = createStyleSheet({
     borderRadius: 8,
     width: 26,
     height: 26,
-    marginRight: 4,
+    marginEnd: 4,
   },
   bodyText: {
-    flex: 1,
     lineHeight: 16,
   },
   separator: {
     position: 'absolute',
-    left: 0,
-    right: -16,
+    start: 0,
+    end: -16,
     bottom: 0,
     height: 1,
   },

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { Pressable, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BaseMessage } from '@sendbird/chat/message';
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { Logger, SendbirdBaseChannel, SendbirdBaseMessage, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
@@ -19,10 +18,9 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   const { emojiManager, currentUser, sdk } = useSendbirdChat();
   const { updateReactionFocusedItem, openReactionList } = useReaction();
   const { colors } = useUIKitTheme();
-  const handlerId = useUniqHandlerId('BottomSheetReactionAddon');
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     async onReactionUpdated(eventChannel, event) {
       if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {
         const msg = (await sdk.message.getMessage({
@@ -40,7 +38,7 @@ const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   const color = colors.ui.reaction.default;
 
   return (
-    <View style={[styles.container, { marginRight: right, marginLeft: left }]}>
+    <View style={[styles.container, { marginStart: safeArea.paddingStart, marginEnd: safeArea.paddingEnd }]}>
       {emojiAll.map(({ key, url }) => {
         const reactionUserIds = message?.reactions?.find((it) => it.key === key)?.userIds ?? [];
         const currentUserIdx = reactionUserIds.indexOf(currentUser?.userId ?? UNKNOWN_USER_ID);

package/src/components/ReactionAddons/MessageReactionAddon.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Pressable } from 'react-native';
+import { ImageProps, Pressable } from 'react-native';
 
-import type { Emoji } from '@sendbird/chat';
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate, useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdBaseChannel, SendbirdBaseMessage, SendbirdReaction } from '@sendbird/uikit-utils';
 import { getReactionCount } from '@sendbird/uikit-utils';
 
-import { DEFAULT_LONG_PRESS_DELAY, UNKNOWN_USER_ID } from '../../constants';
+import { DEFAULT_LONG_PRESS_DELAY } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
 import ReactionRoundedButton from './ReactionRoundedButton';
 
@@ -15,10 +14,6 @@ const NUM_COL = 4;
 const REACTION_MORE_KEY = 'reaction-more-button';
 export type ReactionAddonType = 'default' | 'thread_parent_message';
 
-const getUserReacted = (reaction: SendbirdReaction, userId = UNKNOWN_USER_ID) => {
-  return reaction.userIds.indexOf(userId) > -1;
-};
-
 const createOnPressReaction = (
   reaction: SendbirdReaction,
   channel: SendbirdBaseChannel,
@@ -37,11 +32,10 @@ const createOnPressReaction = (
 const createReactionButtons = (
   channel: SendbirdBaseChannel,
   message: SendbirdBaseMessage,
-  getEmoji: (key: string) => Emoji,
+  getIconSource: (reactionKey: string) => ImageProps['source'],
   emojiLimit: number,
   onOpenReactionList: () => void,
   onOpenReactionUserList: (focusIndex: number) => void,
-  currentUserId?: string,
   reactionAddonType?: ReactionAddonType,
 ) => {
   const reactions = message.reactions ?? [];
@@ -51,19 +45,19 @@ const createReactionButtons = (
     return (
       <Pressable
         key={reaction.key}
-        onPress={createOnPressReaction(reaction, channel, message, getUserReacted(reaction, currentUserId))}
+        onPress={createOnPressReaction(reaction, channel, message, reaction.hasCurrentUserReacted)}
         onLongPress={() => onOpenReactionUserList(index)}
         delayLongPress={DEFAULT_LONG_PRESS_DELAY}
       >
         {({ pressed }) => (
           <ReactionRoundedButton
-            url={getEmoji(reaction.key).url}
+            source={getIconSource(reaction.key)}
             count={getReactionCount(reaction)}
-            reacted={pressed || getUserReacted(reaction, currentUserId)}
+            reacted={pressed || reaction.hasCurrentUserReacted}
             style={
               reactionAddonType === 'default'
-                ? [isNotLastOfRow && styles.marginRight, isNotLastOfCol && styles.marginBottom]
-                : [styles.marginRight, styles.marginBottom]
+                ? [isNotLastOfRow && styles.marginEnd, isNotLastOfCol && styles.marginBottom]
+                : [styles.marginEnd, styles.marginBottom]
             }
           />
         )}
@@ -91,7 +85,7 @@ const MessageReactionAddon = ({
   reactionAddonType?: ReactionAddonType;
 }) => {
   const { colors } = useUIKitTheme();
-  const { sdk, emojiManager, currentUser } = useSendbirdChat();
+  const { sdk, emojiManager } = useSendbirdChat();
   const { openReactionList, openReactionUserList } = useReaction();
   const forceUpdate = useForceUpdate();
 
@@ -109,11 +103,13 @@ const MessageReactionAddon = ({
   const reactionButtons = createReactionButtons(
     channel,
     message,
-    (key) => emojiManager.allEmojiMap[key],
+    (reactionKey) => {
+      const emoji = emojiManager.allEmojiMap[reactionKey];
+      return emojiManager.getEmojiIconSource(emoji);
+    },
     emojiManager.allEmoji.length,
     () => openReactionList({ channel, message }),
     (focusIndex) => openReactionUserList({ channel, message, focusIndex }),
-    currentUser?.userId,
     reactionAddonType,
   );
 
@@ -145,8 +141,8 @@ const styles = createStyleSheet({
     flexDirection: 'row',
     flexWrap: 'wrap',
   },
-  marginRight: {
-    marginRight: 4.5,
+  marginEnd: {
+    marginEnd: 4.5,
   },
   marginBottom: {
     marginBottom: 4,

package/src/components/ReactionAddons/ReactionRoundedButton.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
-import { StyleProp, View, ViewStyle } from 'react-native';
+import { ImageProps, StyleProp, View, ViewStyle } from 'react-native';
 
 import { Icon, Image, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { truncatedCount } from '@sendbird/uikit-utils';
 
 type Props = {
-  url: string;
+  source: ImageProps['source'];
   count: number;
   reacted: boolean;
   style: StyleProp<ViewStyle>;
+  /**
+   * @deprecated Please use `source` instead
+   * */
+  url?: string;
 };
 
-const ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {
+const ReactionRoundedButton = ({ source, count, reacted, style, url }: Props) => {
   const { colors } = useUIKitTheme();
   const color = colors.ui.reaction.rounded;
 
@@ -23,7 +27,7 @@ const ReactionRoundedButton = ({ url, count, reacted, style }: Props) => {
         style,
       ]}
     >
-      <Image source={{ uri: url }} style={styles.emoji} />
+      <Image source={source ? source : { uri: url }} style={styles.emoji} />
       <Text caption4 color={colors.onBackground01} numberOfLines={1} style={styles.count}>
         {truncatedCount(count, 99, '')}
       </Text>
@@ -60,7 +64,7 @@ const styles = createStyleSheet({
   emoji: {
     width: 20,
     height: 20,
-    marginRight: 4,
+    marginEnd: 4,
   },
   count: {
     width: 13,

package/src/components/ReactionBottomSheets/ReactionListBottomSheet.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import { FlatList, Pressable, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import type { BaseMessage } from '@sendbird/chat/message';
 import { Image, Modal, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { Logger } from '@sendbird/uikit-utils';
+import { Logger, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import type { ReactionBottomSheetProps } from './index';
@@ -12,7 +11,7 @@ import type { ReactionBottomSheetProps } from './index';
 const NUM_COLUMN = 6;
 const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, chatCtx }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
-  const { bottom, left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['bottom', 'left', 'right']);
   const { colors } = useUIKitTheme();
 
   const { currentUser, emojiManager } = chatCtx;
@@ -32,10 +31,10 @@ const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, cha
           styles.container,
           {
             width,
-            paddingBottom: bottom,
+            paddingBottom: safeArea.paddingBottom,
             backgroundColor: colors.ui.dialog.default.none.background,
-            paddingLeft: left + styles.container.paddingHorizontal,
-            paddingRight: right + styles.container.paddingHorizontal,
+            paddingStart: safeArea.paddingStart + styles.container.paddingHorizontal,
+            paddingEnd: safeArea.paddingEnd + styles.container.paddingHorizontal,
           },
         ]}
       >
@@ -86,8 +85,8 @@ const ReactionListBottomSheet = ({ visible, onClose, onDismiss, reactionCtx, cha
 const styles = createStyleSheet({
   container: {
     overflow: 'hidden',
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
     paddingTop: 16,
     paddingHorizontal: 18,
     flexDirection: 'row',

package/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Animated, Easing, I18nManager, Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
 
 import {
   Avatar,
@@ -11,7 +10,13 @@ import {
   createStyleSheet,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdReaction, getReactionCount, truncatedCount } from '@sendbird/uikit-utils';
+import {
+  SendbirdEmoji,
+  SendbirdReaction,
+  getReactionCount,
+  truncatedCount,
+  useSafeAreaPadding,
+} from '@sendbird/uikit-utils';
 
 import type { ReactionBottomSheetProps } from './index';
 
@@ -25,7 +30,7 @@ const ReactionUserListBottomSheet = ({
   onPressUserProfile,
 }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
-  const { bottom, left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right', 'bottom']);
   const { colors } = useUIKitTheme();
 
   const [tabIndex, setTabIndex] = useState(0);
@@ -42,8 +47,8 @@ const ReactionUserListBottomSheet = ({
   const reactions = message?.reactions ?? [];
   const focusedReaction = reactions[tabIndex] as SendbirdReaction | undefined;
   const containerSafeArea = {
-    paddingLeft: left + styles.layout.paddingHorizontal,
-    paddingRight: right + styles.layout.paddingHorizontal,
+    paddingStart: safeArea.paddingStart + styles.layout.paddingHorizontal,
+    paddingEnd: safeArea.paddingEnd + styles.layout.paddingHorizontal,
   };
 
   const focusTab = (index: number, animated = true) => {
@@ -64,7 +69,7 @@ const ReactionUserListBottomSheet = ({
   };
 
   const layoutCalculated = () => {
-    return tabIndicatorValue.current.length === reactions.length && tabIndicatorValue.current.every(Boolean);
+    return tabIndicatorValue.current.filter(Boolean).length === reactions.length;
   };
 
   useEffect(() => {
@@ -82,17 +87,19 @@ const ReactionUserListBottomSheet = ({
         {reactions.map((reaction, index) => {
           const isFocused = focusedReaction?.key === reaction.key;
           const isLastItem = reactions.length - 1 === index;
-          const emoji = emojiManager.allEmojiMap[reaction.key];
+          const emoji = emojiManager.allEmojiMap[reaction.key] as SendbirdEmoji | undefined;
 
           return (
             <Pressable
               key={reaction.key}
-              style={[styles.tabItem, isLastItem && { marginRight: styles.layout.marginRight }]}
+              style={[styles.tabItem, isLastItem && { marginEnd: styles.layout.marginEnd }]}
               onPress={() => focusTab(index)}
               onLayout={(e) => {
-                tabIndicatorValue.current[index] = e.nativeEvent.layout;
+                const indexForLayout = I18nManager.isRTL ? reactions.length - 1 - index : index;
+                tabIndicatorValue.current[indexForLayout] = e.nativeEvent.layout;
                 if (layoutCalculated()) {
                   if (focusedWithLayoutCalculated.current) {
+                    // re-calculating layout when screen rotation
                     focusTab(tabIndex, false);
                   } else {
                     focusedWithLayoutCalculated.current = true;
@@ -101,7 +108,7 @@ const ReactionUserListBottomSheet = ({
                 }
               }}
             >
-              <Image source={{ uri: emoji.url }} style={styles.tabEmoji} />
+              <Image source={emojiManager.getEmojiIconSource(emoji)} style={styles.tabEmoji} />
               <Text button color={isFocused ? color.selected.highlight : color.enabled.highlight}>
                 {truncatedCount(getReactionCount(reaction))}
               </Text>
@@ -112,7 +119,7 @@ const ReactionUserListBottomSheet = ({
           style={[
             styles.tabIndicator,
             {
-              left: tabIndicatorAnimated.x,
+              start: tabIndicatorAnimated.x,
               width: tabIndicatorAnimated.width,
               backgroundColor: color.selected.highlight,
             },
@@ -123,31 +130,37 @@ const ReactionUserListBottomSheet = ({
   };
 
   const renderPage = () => {
+    const userCountDifference = (focusedReaction?.count || 0) - (focusedReaction?.sampledUserInfoList.length || 0);
+
     return (
       <>
-        {focusedReaction?.userIds.map((userId) => {
+        {focusedReaction?.sampledUserInfoList.map((reactedUserInfo) => {
           if (channel?.isGroupChannel()) {
-            const user = channel.members.find((x) => x.userId === userId);
             return (
               <Pressable
-                key={userId}
+                key={reactedUserInfo.userId}
                 onPress={async () => {
-                  if (user) {
-                    await onClose();
-                    onPressUserProfile(user);
-                  }
+                  await onClose();
+                  onPressUserProfile(reactedUserInfo);
                 }}
                 style={styles.pageItem}
               >
-                <Avatar size={36} uri={user?.profileUrl} containerStyle={styles.avatar} />
+                <Avatar size={36} uri={reactedUserInfo?.profileUrl} containerStyle={styles.avatar} />
                 <Text subtitle2 style={{ flex: 1 }}>
-                  {user?.nickname || STRINGS.LABELS.USER_NO_NAME}
+                  {reactedUserInfo?.nickname || STRINGS.LABELS.USER_NO_NAME}
                 </Text>
               </Pressable>
             );
           }
           return null;
         })}
+        {userCountDifference > 0 && (
+          <View style={styles.pageItem}>
+            <Text body3 color={colors.onBackground02}>
+              {STRINGS.REACTION.MORE_USERS(userCountDifference)}
+            </Text>
+          </View>
+        )}
       </>
     );
   };
@@ -163,7 +176,7 @@ const ReactionUserListBottomSheet = ({
       <View
         style={[
           styles.container,
-          { width, paddingBottom: bottom, backgroundColor: colors.ui.dialog.default.none.background },
+          { width, paddingBottom: safeArea.paddingBottom, backgroundColor: colors.ui.dialog.default.none.background },
         ]}
       >
         <ScrollView
@@ -192,12 +205,12 @@ const ReactionUserListBottomSheet = ({
 const styles = createStyleSheet({
   layout: {
     paddingHorizontal: 16,
-    marginRight: 0,
+    marginEnd: 0,
   },
   container: {
     overflow: 'hidden',
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
     paddingTop: 16,
     alignItems: 'center',
   },
@@ -216,7 +229,7 @@ const styles = createStyleSheet({
     height: 44,
   },
   tabItem: {
-    marginRight: 16,
+    marginEnd: 16,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -224,7 +237,7 @@ const styles = createStyleSheet({
   tabEmoji: {
     width: 28,
     height: 28,
-    marginRight: 4,
+    marginEnd: 4,
   },
   tabIndicator: {
     position: 'absolute',
@@ -242,7 +255,7 @@ const styles = createStyleSheet({
     alignItems: 'center',
   },
   avatar: {
-    marginRight: 16,
+    marginEnd: 16,
   },
 });
 

package/src/components/ReactionBottomSheets/index.tsx

@@ -1,6 +1,6 @@
 import type React from 'react';
 
-import type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+import { SendbirdReactedUserInfo } from '@sendbird/uikit-utils';
 
 import type { LocalizationContext } from '../../contexts/LocalizationCtx';
 import type { ReactionContext } from '../../contexts/ReactionCtx';
@@ -13,7 +13,7 @@ export type ReactionBottomSheetProps = {
   visible: boolean;
   onDismiss: () => void;
   onClose: () => Promise<void>;
-  onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;
+  onPressUserProfile: (user: SendbirdReactedUserInfo) => void;
   chatCtx: GetFromContext<typeof SendbirdChatContext>;
   reactionCtx: GetFromContext<typeof ReactionContext>;
   localizationCtx: GetFromContext<typeof LocalizationContext>;

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

@@ -54,7 +54,7 @@ const styles = createStyleSheet({
   },
   name: {
     flexShrink: 1,
-    marginLeft: 8,
+    marginStart: 8,
   },
 });