@sendbird/uikit-react-native 3.7.6 → 3.8.0

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsList.tsx

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

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

@@ -1,7 +1,7 @@
 import React, { createContext, useCallback } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu, useAlert, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import {
   NOOP,
   SendbirdBaseChannel,
@@ -9,7 +9,6 @@ import {
   SendbirdGroupChannelUpdateParams,
   isDifferentChannel,
   useForceUpdate,
-  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
@@ -28,7 +27,6 @@ export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
 };
 
 export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['Provider'] = ({ children, channel }) => {
-  const handlerId = useUniqHandlerId('GroupChannelSettingsContextsProvider');
   const forceUpdate = useForceUpdate();
   const { STRINGS } = useLocalization();
   const { sdk } = useSendbirdChat();
@@ -40,7 +38,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     forceUpdate();
   };
 
-  useChannelHandler(sdk, handlerId, {
+  useGroupChannelHandler(sdk, {
     onChannelChanged: onChannelChanged,
     onChannelFrozen: onChannelChanged,
     onChannelUnfrozen: onChannelChanged,

package/src/domain/groupChannelThread/component/GroupChannelThreadHeader.tsx

@@ -1,7 +1,13 @@
 import React, { useContext } from 'react';
-import { View } from 'react-native';
 
-import { Icon, Text, createStyleSheet, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  Box,
+  Icon,
+  Text,
+  createStyleSheet,
+  useHeaderStyle,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelThreadContexts } from '../module/moduleContext';
@@ -34,14 +40,14 @@ const GroupChannelThreadHeader = ({ onPressLeft, onPressSubtitle }: GroupChannel
     <HeaderComponent
       clearTitleMargin
       title={
-        <View style={styles.titleContainer}>
-          <View style={{ flexShrink: 1 }}>
+        <Box style={styles.titleContainer}>
+          <Box flexShrink={1} alignItems={'flex-start'}>
             <Text h2 color={colors.onBackground01} numberOfLines={1}>
               {headerTitle}
             </Text>
             {renderSubtitle()}
-          </View>
-        </View>
+          </Box>
+        </Box>
       }
       left={<Icon icon={'arrow-left'} size={24} />}
       onPressLeft={onPressLeft}

package/src/domain/groupChannelThread/component/GroupChannelThreadMessageList.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useLayoutEffect, useRef } from 'react';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
-import { isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import ChannelThreadMessageList from '../../../components/ChannelThreadMessageList';
 import { useSendbirdChat } from '../../../hooks/useContext';
@@ -14,7 +14,6 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
   const { subscribe } = useContext(GroupChannelThreadContexts.PubSub);
   const { flatListRef, lazyScrollToBottom, lazyScrollToIndex } = useContext(GroupChannelThreadContexts.MessageList);
 
-  const id = useUniqHandlerId('GroupChannelThreadMessageList');
   const ignorePropReached = useRef(false);
 
   const _onTopReached = () => {
@@ -56,7 +55,7 @@ const GroupChannelThreadMessageList = (props: GroupChannelThreadProps['MessageLi
     }
   }, [props.startingPoint]);
 
-  useChannelHandler(sdk, id, {
+  useGroupChannelHandler(sdk, {
     onReactionUpdated(channel, event) {
       if (isDifferentChannel(channel, props.channel)) return;
       const recentMessage = props.messages[0];

package/src/domain/groupChannelThread/component/GroupChannelThreadParentMessageInfo.tsx

@@ -4,6 +4,7 @@ import { TouchableOpacity, View } from 'react-native';
 import {
   Avatar,
   BottomSheetItem,
+  Box,
   Divider,
   Icon,
   Text,
@@ -60,32 +61,32 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
 
   const renderMessageInfoAndMenu = () => {
     return (
-      <View style={styles.infoAndMenuContainer}>
+      <Box style={styles.infoAndMenuContainer}>
         <Avatar size={34} uri={parentMessage.sender?.profileUrl} />
-        <View style={styles.userNickAndTimeContainer}>
+        <Box style={styles.userNickAndTimeContainer} alignItems={'flex-start'}>
           <Text h2 color={colors.onBackground01} numberOfLines={1} style={styles.userNickname}>
             {nickName}
           </Text>
           <Text caption2 color={colors.onBackground03} style={styles.messageTime}>
             {messageTimestamp}
           </Text>
-        </View>
+        </Box>
         <TouchableOpacity activeOpacity={0.7} onPress={bottomSheetItem ? onLongPress : undefined}>
           <Icon icon={'more'} color={colors.onBackground02} />
         </TouchableOpacity>
-      </View>
+      </Box>
     );
   };
 
   const renderReplyCount = (replyCountText: string) => {
     if (replyCountText) {
       return (
-        <View style={styles.replyContainer}>
-          <Text caption3 color={colors.onBackground03} style={styles.replyText}>
+        <Box style={styles.replyContainer} alignItems={'flex-start'}>
+          <Text caption3 color={colors.onBackground03} style={styles.replyText} numberOfLines={1}>
             {replyCountText}
           </Text>
           <Divider />
-        </View>
+        </Box>
       );
     } else {
       return null;
@@ -119,7 +120,7 @@ const GroupChannelThreadParentMessageInfo = (props: GroupChannelThreadProps['Par
     <View>
       <View style={styles.container}>{renderMessageInfoAndMenu()}</View>
       <View style={styles.messageContainer}>
-        <ThreadParentMessageRenderer {...messageProps}></ThreadParentMessageRenderer>
+        <ThreadParentMessageRenderer {...messageProps} />
       </View>
       {renderReactionAddons()}
       <Divider />
@@ -141,7 +142,7 @@ const styles = createStyleSheet({
   userNickAndTimeContainer: {
     flexDirection: 'column',
     flex: 1,
-    marginLeft: 8,
+    marginStart: 8,
   },
   userNickname: {
     marginBottom: 2,
@@ -159,7 +160,7 @@ const styles = createStyleSheet({
     paddingVertical: 8,
   },
   reactionButtonContainer: {
-    paddingLeft: 16,
+    paddingStart: 16,
     marginBottom: 16,
   },
   replyContainer: {

package/src/domain/groupChannelThread/component/GroupChannelThreadSuggestedMentionList.tsx

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { Pressable, ScrollView, View, useWindowDimensions } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
   Avatar,
@@ -11,7 +10,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 +32,7 @@ const GroupChannelThreadSuggestedMentionList = ({
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { topInset } = useHeaderStyle();
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   const keyboard = useKeyboardStatus();
 
@@ -53,7 +52,7 @@ const GroupChannelThreadSuggestedMentionList = ({
   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_THREAD.MENTION_LIMITED(mentionManager.config.mentionLimit)}
         </Text>
@@ -113,7 +112,7 @@ const GroupChannelThreadSuggestedMentionList = ({
             borderTopColor: colors.onBackground04,
           },
         ]}
-        contentContainerStyle={{ paddingLeft: left, paddingRight: right }}
+        contentContainerStyle={safeArea}
       >
         {conditionChaining([searchLimited, canRenderMembers], [renderLimitGuide(), renderMembers(), null])}
       </ScrollView>
@@ -128,23 +127,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 +153,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/messageSearch/component/MessageSearchHeader.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef } from 'react';
-import { Platform, TextInput } from 'react-native';
+import { Platform, type TextInput as RNTextInput } from 'react-native';
 
 import {
   Box,
   Icon,
   PressBox,
   Text,
+  TextInput,
   createStyleSheet,
   useHeaderStyle,
   useUIKitTheme,
@@ -24,7 +25,7 @@ const MessageSearchHeader = ({
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
 
-  const inputRef = useRef<TextInput>(null);
+  const inputRef = useRef<RNTextInput>(null);
   const inputColor = colors.ui.input.default.active;
   const searchEnabled = keyword.length > 0;
 
@@ -60,6 +61,8 @@ const MessageSearchHeader = ({
             style={[styles.input, { color: inputColor.text }]}
             value={keyword}
             onChangeText={onChangeKeyword}
+            supportRTLAlign
+            originalText={keyword}
           />
           {searchEnabled && (
             <PressBox onPress={() => onChangeKeyword('')}>
@@ -82,19 +85,19 @@ const MessageSearchHeader = ({
 
 const styles = createStyleSheet({
   searchIcon: {
-    marginRight: 8,
+    marginEnd: 8,
   },
   clearIcon: {
-    marginLeft: 8,
+    marginStart: 8,
   },
   input: {
     flex: 1,
     height: '100%',
     fontSize: 14,
-    paddingLeft: 0,
+    paddingStart: 0,
     paddingTop: 0,
     paddingBottom: 0,
-    paddingRight: 0,
+    paddingEnd: 0,
   },
 });
 

package/src/domain/openChannel/component/OpenChannelHeader.tsx

@@ -37,7 +37,7 @@ const styles = createStyleSheet({
     maxWidth: '100%',
   },
   avatarGroup: {
-    marginRight: 8,
+    marginEnd: 8,
   },
   subtitle: {
     marginTop: 2,

package/src/domain/openChannelBannedUsers/component/OpenChannelBannedUsersList.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 { OpenChannelBannedUsersProps } from '../types';
 
@@ -15,13 +14,13 @@ const OpenChannelBannedUsersList = ({
   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/openChannelCreate/component/OpenChannelCreateProfileInput.tsx

@@ -102,8 +102,8 @@ const OpenChannelCreateProfileInput = ({
     <Box
       flexDirection={'row'}
       paddingVertical={16}
-      paddingLeft={16 + safeArea.paddingLeft}
-      paddingRight={16 + safeArea.paddingRight}
+      paddingStart={16 + safeArea.paddingStart}
+      paddingEnd={16 + safeArea.paddingEnd}
     >
       <PressBox onPress={onPressPhotoButton} style={styles.coverButton} activeOpacity={0.8}>
         {ifThenOr(
@@ -132,7 +132,7 @@ const OpenChannelCreateProfileInput = ({
 
 const styles = createStyleSheet({
   coverButton: {
-    marginRight: 20,
+    marginEnd: 20,
   },
   inputContainer: {
     flex: 1,
@@ -142,15 +142,15 @@ const styles = createStyleSheet({
   },
   input: {
     flex: 1,
-    paddingLeft: 0,
-    paddingRight: 0,
+    paddingStart: 0,
+    paddingEnd: 0,
     paddingTop: 0,
     paddingBottom: 0,
   },
   removeButtonContainer: {
     alignItems: 'flex-end',
     justifyContent: 'center',
-    marginLeft: 8,
+    marginStart: 8,
   },
 });
 

package/src/domain/openChannelList/component/OpenChannelListList.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { SendbirdOpenChannel, getChannelUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+import { SendbirdOpenChannel, getChannelUniqId, useFreshCallback, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import type { OpenChannelListProps } from '../types';
 
@@ -19,7 +18,7 @@ const OpenChanelListList = ({
     renderOpenChannelPreview?.({ channel: item, onPress: () => onPressChannel(item) }),
   );
 
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   return (
     <FlatList
@@ -29,7 +28,7 @@ const OpenChanelListList = ({
       onEndReached={onLoadNext}
       onRefresh={onRefresh}
       {...flatListProps}
-      contentContainerStyle={[flatListProps?.contentContainerStyle, { paddingLeft: left, paddingRight: right }]}
+      contentContainerStyle={[flatListProps?.contentContainerStyle, safeArea]}
       keyExtractor={getChannelUniqId}
     />
   );

package/src/domain/openChannelMutedParticipants/component/OpenChannelMutedParticipantsList.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 { OpenChannelMutedParticipantsProps } from '../types';
 
@@ -15,13 +14,13 @@ const OpenChannelMutedParticipantsList = ({
   const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
     renderUser?.({ user: item }),
   );
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   return (
     <FlatList
       data={mutedParticipants}
       renderItem={renderItem}
-      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      contentContainerStyle={{ ...safeArea, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
       bounces={false}
       keyExtractor={getUserUniqId}

package/src/domain/openChannelOperators/component/OpenChannelOperatorsList.tsx

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

package/src/domain/userList/component/UserListList.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback, useContext } from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import type { UserStruct } from '@sendbird/uikit-utils';
-import { getUserUniqId } from '@sendbird/uikit-utils';
+import { UserStruct, getUserUniqId, useSafeAreaPadding } from '@sendbird/uikit-utils';
 
 import { UserListContexts } from '../module/moduleContext';
 import type { UserListContextsType, UserListProps } from '../types';
@@ -21,7 +19,7 @@ const UserListList = <T extends UserStruct>({
     ({ item }) => renderUser?.(item, context.selectedUsers, context.setSelectedUsers),
     [renderUser, context.selectedUsers, context.setSelectedUsers],
   );
-  const { left, right } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['left', 'right']);
 
   return (
     <FlatList
@@ -30,7 +28,7 @@ const UserListList = <T extends UserStruct>({
       onRefresh={onRefresh}
       renderItem={renderItem}
       onEndReached={onLoadNext}
-      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      contentContainerStyle={{ ...safeArea, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
       keyExtractor={getUserUniqId}
     />

package/src/fragments/createGroupChannelFragment.tsx

@@ -121,7 +121,6 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       await recorderService.reset().catch(() => {});
     };
     const _onPressHeaderLeft = useFreshCallback(async () => {
-      voiceMessageStatusManager.clear();
       await onBlurFragment();
       onPressHeaderLeft();
     });
@@ -144,6 +143,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
 
     useEffect(() => {
       return () => {
+        voiceMessageStatusManager.clear();
         onBlurFragment();
       };
     }, []);

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
 
-import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
 import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import { Icon, useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
 import type { SendbirdMember } from '@sendbird/uikit-utils';
-import { ifOperator, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { ifOperator, ifThenOr, isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -28,8 +29,6 @@ const createGroupChannelMembersFragment = (
     sortComparator,
     queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
   }) => {
-    const handlerId = useUniqHandlerId('GroupChannelMembersFragment');
-
     const refreshSchedule = useRef<NodeJS.Timeout>();
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
@@ -41,7 +40,7 @@ const createGroupChannelMembersFragment = (
       sortComparator,
     });
 
-    useChannelHandler(sdk, handlerId, {
+    useGroupChannelHandler(sdk, {
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);

package/src/fragments/createGroupChannelModerationFragment.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 { createGroupChannelModerationModule } from '../domain/groupChannelModeration';
 import type {
@@ -24,7 +23,7 @@ const createGroupChannelModerationFragment = (
     onPressMenuOperators,
     menuItemsCreator,
   }) => {
-    const { left, right } = useSafeAreaInsets();
+    const safeArea = useSafeAreaPadding(['left', 'right']);
     const { colors } = useUIKitTheme();
     return (
       <GroupChannelModerationModule.Provider channel={channel}>
@@ -32,8 +31,8 @@ const createGroupChannelModerationFragment = (
         <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,
           }}
         >
           <GroupChannelModerationModule.Menu

package/src/fragments/createGroupChannelMutedMembersFragment.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 { NOOP, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+import { useGroupChannelHandler } from '@sendbird/uikit-tools';
+import { NOOP, isDifferentChannel, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -24,15 +25,13 @@ const createGroupChannelMutedMembersFragment = (
     renderUser,
     queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
   }) => {
-    const handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
-
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
     const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
 
-    useChannelHandler(sdk, handlerId, {
+    useGroupChannelHandler(sdk, {
       onUserMuted(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         upsertUser(user);