@sendbird/uikit-react-native 3.7.5 → 3.8.0

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';
@@ -33,7 +33,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 +53,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,7 +75,7 @@ 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>
@@ -83,7 +83,7 @@ const GroupChannelSuggestedMentionList = ({
                   {member.userId}
                 </Text>
                 <Divider style={{ position: 'absolute', bottom: 0 }} />
-              </View>
+              </Box>
             </Pressable>
           );
         })}
@@ -113,7 +113,7 @@ const GroupChannelSuggestedMentionList = ({
             borderTopColor: colors.onBackground04,
           },
         ]}
-        contentContainerStyle={{ paddingLeft: left, paddingRight: right }}
+        contentContainerStyle={safeArea}
       >
         {conditionChaining([searchLimited, canRenderMembers], [renderLimitGuide(), renderMembers(), null])}
       </ScrollView>
@@ -128,23 +128,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 +154,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,

package/src/domain/groupChannel/module/moduleContext.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useCallback, useRef, useState } from 'react';
 import type { FlatList } from 'react-native';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import {
   ContextValue,
   Logger,
@@ -14,7 +14,6 @@ import {
   getGroupChannelChatAvailableState,
   isDifferentChannel,
   useFreshCallback,
-  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
@@ -62,7 +61,6 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
 }) => {
   if (!channel) throw new Error('GroupChannel is not provided to GroupChannelModule');
 
-  const handlerId = useUniqHandlerId('GroupChannelContextsProvider');
   const { STRINGS } = useLocalization();
   const { currentUser, sdk, sbOptions } = useSendbirdChat();
 
@@ -99,7 +97,7 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
     }
   };
 
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     onMessageDeleted(_, messageId) {
       if (messageToReply?.messageId === messageId) {
         setMessageToReply(undefined);

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersList.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import type { GroupChannelBannedUsersProps } from '../types';
 
@@ -15,13 +14,13 @@ const GroupChannelBannedUsersList = ({
   const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
     renderUser?.({ user: item }),
   );
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   return (
     <FlatList
       data={bannedUsers}
       renderItem={renderItem}
-      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      contentContainerStyle={{ ...safeArea, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
       onEndReached={onLoadNext}
       bounces={false}

package/src/domain/groupChannelList/component/GroupChannelListList.tsx

@@ -1,10 +1,16 @@
 import React from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { PushTriggerOption } from '@sendbird/chat';
 import { useActionMenu, useToast } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, PASS, SendbirdGroupChannel, getChannelUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+import {
+  NOOP,
+  PASS,
+  SendbirdGroupChannel,
+  getChannelUniqId,
+  useFreshCallback,
+  useSafeAreaPadding,
+} from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import type { GroupChannelListProps } from '../types';
@@ -64,7 +70,7 @@ const GroupChannelListList = ({
     }),
   );
 
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
   return (
     <FlatList
       bounces={false}
@@ -72,7 +78,7 @@ const GroupChannelListList = ({
       renderItem={renderItem}
       onEndReached={onLoadNext}
       {...flatListProps}
-      contentContainerStyle={[flatListProps?.contentContainerStyle, { paddingLeft: left, paddingRight: right }]}
+      contentContainerStyle={[flatListProps?.contentContainerStyle, safeArea]}
       keyExtractor={getChannelUniqId}
     />
   );

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersList.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import type { GroupChannelMutedMembersProps } from '../types';
 
@@ -15,13 +14,13 @@ const GroupChannelMutedMembersList = ({
   const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
     renderUser?.({ user: item }),
   );
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   return (
     <FlatList
       data={mutedMembers}
       renderItem={renderItem}
-      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      contentContainerStyle={{ ...safeArea, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
       bounces={false}
       keyExtractor={getUserUniqId}

package/src/domain/groupChannelNotifications/component/GroupChannelNotificationsView.tsx

@@ -1,8 +1,16 @@
 import React, { useContext } from 'react';
-import { Pressable, ScrollView, View } from 'react-native';
+import { Pressable, ScrollView } from 'react-native';
 
 import { PushTriggerOption } from '@sendbird/chat';
-import { Divider, Icon, Switch, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  Box,
+  Divider,
+  Icon,
+  Switch,
+  Text,
+  createStyleSheet,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
 import { useForceUpdate } from '@sendbird/uikit-utils';
 
 import { useLocalization } from '../../../hooks/useContext';
@@ -89,14 +97,22 @@ const Bar = ({ title, onPress, description, component, subtitle2, body3 }: BarPr
   const { colors } = useUIKitTheme();
   return (
     <Pressable onPress={onPress} style={styles.barContainer}>
-      <View style={styles.titleContainer}>
-        <Text body3={body3} subtitle2={subtitle2} numberOfLines={1} color={colors.onBackground01} style={styles.title}>
-          {title}
-        </Text>
-        <View>{component}</View>
-      </View>
+      <Box style={styles.titleContainer}>
+        <Box flex={1} alignItems={'flex-start'}>
+          <Text
+            body3={body3}
+            subtitle2={subtitle2}
+            numberOfLines={1}
+            color={colors.onBackground01}
+            style={styles.title}
+          >
+            {title}
+          </Text>
+        </Box>
+        <Box>{component}</Box>
+      </Box>
       {Boolean(description) && (
-        <Text body3 color={colors.onBackground02} style={styles.desc}>
+        <Text body3 color={colors.onBackground02} style={styles.desc} supportRTLAlign>
           {description}
         </Text>
       )}
@@ -116,8 +132,7 @@ const styles = createStyleSheet({
     alignItems: 'center',
   },
   title: {
-    flex: 1,
-    marginRight: 8,
+    marginEnd: 8,
   },
   desc: {
     marginTop: 8,