@sendbird/uikit-react-native 3.7.6 → 3.8.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,

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';
@@ -26,6 +25,7 @@ const GroupChannelThreadSuggestedMentionList = ({
   bottomInset,
   onPressToMention,
   mentionedUsers,
+  showUserId = true,
 }: GroupChannelThreadProps['SuggestedMentionList']) => {
   const { width: screenWidth, height: screenHeight } = useWindowDimensions();
   const { channel } = useContext(GroupChannelThreadContexts.Fragment);
@@ -33,7 +33,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 +53,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>
@@ -79,9 +79,11 @@ const GroupChannelThreadSuggestedMentionList = ({
                 <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>
             </Pressable>
@@ -113,7 +115,7 @@ const GroupChannelThreadSuggestedMentionList = ({
             borderTopColor: colors.onBackground04,
           },
         ]}
-        contentContainerStyle={{ paddingLeft: left, paddingRight: right }}
+        contentContainerStyle={safeArea}
       >
         {conditionChaining([searchLimited, canRenderMembers], [renderLimitGuide(), renderMembers(), null])}
       </ScrollView>
@@ -128,23 +130,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 +156,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}
     />
   );