@sendbird/uikit-react-native 3.7.5 → 3.8.0

package/lib/typescript/src/components/OpenChannelMessageRenderer/index.d.ts

@@ -9,7 +9,7 @@ declare const _default: React.MemoExoticComponent<(props: {
     onLongPress?: (() => void) | undefined;
     onPressParentMessage?: ((parentMessage: SendbirdMessage, childMessage: import("@sendbird/chat/message").FileMessage | import("@sendbird/chat/message").UserMessage) => void) | undefined;
     onReplyInThreadMessage?: ((message: import("@sendbird/chat/message").FileMessage | import("@sendbird/chat/message").UserMessage) => void) | undefined;
-    onShowUserProfile?: ((user: import("@sendbird/chat/groupChannel").Member | import("@sendbird/chat").User, options?: {
+    onShowUserProfile?: ((user: import("@sendbird/chat/groupChannel").Member | import("@sendbird/chat").User | import("@sendbird/chat/message").ReactedUserInfo, options?: {
         hideMessageButton?: boolean | undefined;
     } | undefined) => void) | undefined;
     channel: import("@sendbird/chat/openChannel").OpenChannel;

package/lib/typescript/src/components/ReactionBottomSheets/index.d.ts

@@ -1,5 +1,5 @@
 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';
 import type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';
@@ -8,7 +8,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/lib/typescript/src/components/ThreadParentMessageRenderer/ThreadParentMessage.file.voice.d.ts

@@ -8,6 +8,7 @@ export type VoiceFileMessageState = {
 type Props = ThreadParentMessageRendererProps<{
     durationMetaArrayKey?: string;
     onUnmount: () => void;
+    initialCurrentTime?: number;
 }>;
 declare const ThreadParentMessageFileVoice: (props: Props) => React.JSX.Element | null;
 export default ThreadParentMessageFileVoice;

package/lib/typescript/src/containers/SendbirdUIKitContainer.d.ts

@@ -4,7 +4,7 @@ import { GroupChannelModule } from '@sendbird/chat/groupChannel';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import type { HeaderStyleContextType, UIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { SBUConfig } from '@sendbird/uikit-tools';
-import { PartialDeep, SendbirdChatSDK, SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+import { PartialDeep, SendbirdChatSDK, SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember, SendbirdReactedUserInfo, SendbirdUser } from '@sendbird/uikit-utils';
 import { type SBUHandlers } from '../contexts/SBUHandlersCtx';
 import type { ChatRelatedFeaturesInUIKit } from '../contexts/SendbirdChatCtx';
 import type { ImageCompressionConfigInterface } from '../libs/ImageCompressionConfig';
@@ -14,7 +14,7 @@ import type { StringSet } from '../localization/StringSet.type';
 import type { ClipboardServiceInterface, FileServiceInterface, MediaServiceInterface, NotificationServiceInterface, PlayerServiceInterface, RecorderServiceInterface } from '../platform/types';
 import { ErrorBoundaryProps, LocalCacheStorage } from '../types';
 export declare const SendbirdUIKit: Readonly<{
-    VERSION: "3.7.5";
+    VERSION: "3.8.0";
     PLATFORM: string;
     DEFAULT: {
         AUTO_PUSH_TOKEN_REGISTRATION: boolean;
@@ -71,10 +71,10 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     };
     userProfile?: {
         onCreateChannel: (channel: SendbirdGroupChannel) => void;
-        onBeforeCreateChannel?: (channelParams: SendbirdGroupChannelCreateParams, users: SendbirdUser[] | SendbirdMember[]) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+        onBeforeCreateChannel?: (channelParams: SendbirdGroupChannelCreateParams, 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/lib/typescript/src/contexts/UserProfileCtx.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
-import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+import { SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember, SendbirdReactedUserInfo, SendbirdUser } from '@sendbird/uikit-utils';
 type OnCreateChannel = (channel: SendbirdGroupChannel) => void;
-type OnBeforeCreateChannel = (channelParams: SendbirdGroupChannelCreateParams, users: SendbirdUser[] | SendbirdMember[]) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+type OnBeforeCreateChannel = (channelParams: SendbirdGroupChannelCreateParams, users: SendbirdUser[] | SendbirdMember[] | SendbirdReactedUserInfo[]) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
 type ShowOptions = {
     hideMessageButton?: boolean;
 };
 export type UserProfileContextType = {
-    show(user: SendbirdUser | SendbirdMember, options?: ShowOptions): void;
+    show(user: SendbirdUser | SendbirdMember | SendbirdReactedUserInfo, options?: ShowOptions): void;
     hide(): void;
 };
 type Props = React.PropsWithChildren<{

package/lib/typescript/src/domain/userList/component/UserListList.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { UserStruct } from '@sendbird/uikit-utils';
+import { UserStruct } from '@sendbird/uikit-utils';
 import type { UserListProps } from '../types';
 declare const UserListList: <T extends UserStruct>({ users, onRefresh, refreshing, renderUser, onLoadNext, ListEmptyComponent, }: {
     users: T[];

package/lib/typescript/src/libs/MentionManager.d.ts

@@ -7,6 +7,7 @@ declare class MentionManager {
     private _invalidStartsKeywords;
     private _templateRegex;
     constructor(config: MentionConfigInterface);
+    getDirectionOfNextSpan: (name: string) => string;
     rangeHelpers: {
         inRangeUnderOver(start: number, num: number, end: number): boolean;
         inRangeUnderMore(start: number, num: number, end: number): boolean;

package/lib/typescript/src/localization/StringSet.type.d.ts

@@ -1,5 +1,5 @@
 import type { Locale } from 'date-fns';
-import type { SendbirdBaseMessage, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdOpenChannel, SendbirdParticipant, SendbirdUser, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import type { SendbirdBaseMessage, SendbirdFileMessage, SendbirdGroupChannel, SendbirdMember, SendbirdMessage, SendbirdOpenChannel, SendbirdParticipant, SendbirdReactedUserInfo, SendbirdUser, SendbirdUserMessage } from '@sendbird/uikit-utils';
 /**
  * StringSet interface
  * Do not configure over 3 depths (for overrides easy)
@@ -283,6 +283,9 @@ export interface StringSet {
         VOICE_MESSAGE: string;
         VOICE_MESSAGE_INPUT_CANCEL: string;
     };
+    REACTION: {
+        MORE_USERS: (userCountDifference: number) => string;
+    };
     FILE_VIEWER: {
         TITLE: (message: SendbirdFileMessage) => string;
         SUBTITLE: (message: SendbirdFileMessage) => string;
@@ -335,6 +338,6 @@ export interface StringSet {
     PROFILE_CARD: {
         BUTTON_MESSAGE: string;
         BODY_LABEL: string;
-        BODY: (user: SendbirdUser | SendbirdMember) => string;
+        BODY: (user: SendbirdUser | SendbirdMember | SendbirdReactedUserInfo) => string;
     };
 }

package/lib/typescript/src/version.d.ts

@@ -1,2 +1,2 @@
-declare const VERSION = "3.7.5";
+declare const VERSION = "3.8.0";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "3.7.5",
+  "version": "3.8.0",
   "description": "Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.",
   "keywords": [
     "sendbird",
@@ -60,10 +60,10 @@
   },
   "dependencies": {
     "@openspacelabs/react-native-zoomable-view": "^2.1.5",
-    "@sendbird/uikit-chat-hooks": "3.7.5",
-    "@sendbird/uikit-react-native-foundation": "3.7.5",
+    "@sendbird/uikit-chat-hooks": "3.8.0",
+    "@sendbird/uikit-react-native-foundation": "3.8.0",
     "@sendbird/uikit-tools": "0.0.1-alpha.77",
-    "@sendbird/uikit-utils": "3.7.5"
+    "@sendbird/uikit-utils": "3.8.0"
   },
   "devDependencies": {
     "@bam.tech/react-native-image-resizer": "^3.0.4",
@@ -109,7 +109,7 @@
     "@react-native-clipboard/clipboard": ">=1.8.5",
     "@react-native-community/netinfo": ">=9.3.0",
     "@react-native-firebase/messaging": ">=14.4.0",
-    "@sendbird/chat": "^4.13.3",
+    "@sendbird/chat": "^4.16.0",
     "@sendbird/react-native-scrollview-enhancer": "*",
     "date-fns": ">=2.28.0",
     "expo-av": ">=12.0.4",
@@ -208,5 +208,5 @@
       ]
     ]
   },
-  "gitHead": "5ab71ecbed6948f2e26797d3b566369580386b53"
+  "gitHead": "bec311112e7b16076db18c6597c73f6ffb3489ad"
 }

package/src/components/ChannelInput/AttachmentsButton.tsx

@@ -24,7 +24,7 @@ const AttachmentsButton = ({ onPress, disabled }: AttachmentsButtonProps) => {
 
 const styles = createStyleSheet({
   container: {
-    marginRight: 8,
+    marginEnd: 8,
     padding: 4,
   },
 });

package/src/components/ChannelInput/EditInput.tsx

@@ -79,6 +79,8 @@ const EditInput = forwardRef<RNTextInput, EditInputProps>(function EditInput(
           style={style}
           placeholder={STRINGS.LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE}
           onSelectionChange={onSelectionChange}
+          originalText={text}
+          supportRTLAlign
         >
           {mentionManager.textToMentionedComponents(
             text,

package/src/components/ChannelInput/MessageToReplyPreview.tsx

@@ -32,13 +32,13 @@ export const MessageToReplyPreview = ({ messageToReply, setMessageToReply }: Mes
   const { STRINGS } = useLocalization();
 
   const getFileIconAsImage = (url: string) => {
-    return <ImageWithPlaceholder source={{ uri: url }} style={styles.previewImage} />;
+    return <ImageWithPlaceholder source={{ uri: url }} style={styles.filePreview} />;
   };
 
   const getFileIconAsVideoThumbnail = (url: string) => {
     return (
       <VideoThumbnail
-        style={styles.previewImage}
+        style={styles.filePreview}
         iconSize={0}
         source={url}
         fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
@@ -53,10 +53,8 @@ export const MessageToReplyPreview = ({ messageToReply, setMessageToReply }: Mes
         size={20}
         color={colors.onBackground02}
         containerStyle={[
-          styles.fileIcon,
-          {
-            backgroundColor: select({ light: palette.background100, dark: palette.background500 }),
-          },
+          styles.filePreview,
+          { backgroundColor: select({ light: palette.background100, dark: palette.background500 }) },
         ]}
       />
     );
@@ -83,51 +81,49 @@ export const MessageToReplyPreview = ({ messageToReply, setMessageToReply }: Mes
 
   return (
     <View style={[styles.messageToReplyContainer, { borderColor: colors.onBackground04 }]}>
-      <View style={{ flex: 1, flexDirection: 'row' }}>
+      <View style={styles.infoContainer}>
         {getFileIcon(messageToReply)}
-        <View style={{ flex: 1, flexDirection: 'column' }}>
-          <Text numberOfLines={1} style={{ fontSize: 13, fontWeight: '900', marginBottom: 4 }}>
+        <View style={styles.infoText}>
+          <Text caption1 numberOfLines={1}>
             {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)}
           </Text>
-          <Text numberOfLines={1} style={{ fontSize: 13, color: colors.onBackground03 }}>
+          <Text caption2 numberOfLines={1} color={colors.onBackground03}>
             {STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)}
           </Text>
         </View>
       </View>
-      <TouchableOpacity onPress={() => setMessageToReply?.(undefined)}>
-        <Icon icon={'close'} size={24} color={colors.onBackground01} containerStyle={styles.closeIcon} />
+      <TouchableOpacity onPress={() => setMessageToReply?.(undefined)} style={{ marginStart: 16 }}>
+        <Icon icon={'close'} size={24} color={colors.onBackground01} />
       </TouchableOpacity>
     </View>
   );
 };
 
 const styles = createStyleSheet({
-  previewImage: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    marginTop: 2,
-    marginRight: 10,
-    overflow: 'hidden',
-  },
   messageToReplyContainer: {
     flexDirection: 'row',
-    paddingLeft: 18,
-    paddingRight: 16,
-    paddingTop: 10,
-    paddingBottom: 8,
+    paddingStart: 18,
+    paddingEnd: 16,
+    paddingVertical: 12,
     alignItems: 'center',
     borderTopWidth: 1,
   },
-  fileIcon: {
-    width: 36,
-    height: 36,
-    borderRadius: 10,
-    marginRight: 10,
-    marginTop: 2,
+  infoContainer: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  infoText: {
+    flex: 1,
+    height: 32,
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
   },
-  closeIcon: {
-    marginLeft: 4,
-    padding: 4,
+  filePreview: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    marginEnd: 10,
+    overflow: 'hidden',
   },
 });

package/src/components/ChannelInput/SendInput.tsx

@@ -194,6 +194,8 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
           onChangeText={onChangeText}
           style={style}
           placeholder={getPlaceholder()}
+          originalText={text}
+          supportRTLAlign
         >
           {mentionManager.textToMentionedComponents(
             text,
@@ -305,7 +307,7 @@ const styles = createStyleSheet({
     flexDirection: 'row',
   },
   sendIcon: {
-    marginLeft: 4,
+    marginStart: 4,
     padding: 4,
   },
 });

package/src/components/ChannelInput/VoiceMessageInput.tsx

@@ -108,9 +108,9 @@ const VoiceMessageInput = ({ onClose, onSend }: VoiceMessageInputProps) => {
         total={(isRecorderState ? state.recordingTime.maxDuration : state.playingTime.duration) || 1}
         trackColor={uiColors.progressTrack}
         overlay={
-          <Box flex={1} flexDirection={'row'} alignItems={'center'} justifyContent={'flex-end'} paddingRight={16}>
+          <Box flex={1} flexDirection={'row'} alignItems={'center'} justifyContent={'flex-end'} paddingEnd={16}>
             <RecordingLight visible={state.status === 'recording'} />
-            <Text caption1 style={{ lineHeight: undefined, marginLeft: 6 }} color={uiColors.textTime}>
+            <Text caption1 style={{ lineHeight: undefined, marginStart: 6 }} color={uiColors.textTime}>
               {millsToMMSS(isRecorderState ? state.recordingTime.currentTime : remainingTime)}
             </Text>
           </Box>
@@ -209,8 +209,8 @@ const SendButton = (props: { onPress: () => void; disabled: boolean }) => {
 
 const styles = createStyleSheet({
   container: {
-    borderTopLeftRadius: 8,
-    borderTopRightRadius: 8,
+    borderTopStartRadius: 8,
+    borderTopEndRadius: 8,
   },
   progressBar: {
     height: 36,

package/src/components/ChannelInput/index.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { KeyboardAvoidingView, Platform, StyleProp, StyleSheet, TextInput, TextStyle, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import {
@@ -16,6 +15,7 @@ import {
   SendbirdUserMessageUpdateParams,
   replace,
   useIIFE,
+  useSafeAreaPadding,
 } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../../hooks/useContext';
@@ -83,13 +83,15 @@ const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const,
 // FIXME(iOS): Dynamic style does not work properly when typing the CJK. (https://github.com/facebook/react-native/issues/26107)
 //  To workaround temporarily, change the key for re-mount the component.
 //  -> This will affect to keyboard blur when add/remove first mentioned user.
-const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
+// const GET_INPUT_KEY = (shouldReset: boolean) => {
+//   return Platform.OS === 'ios' && shouldReset ? 'uikit-input-clear' : 'uikit-input';
+// };
 
 // TODO: Refactor 'Edit' mode to clearly
 const ChannelInput = (props: ChannelInputProps) => {
   const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
 
-  const { top, left, right, bottom } = useSafeAreaInsets();
+  const safeArea = useSafeAreaPadding(['top', 'left', 'right', 'bottom']);
   const { colors, typography } = useUIKitTheme();
   const { sbOptions, mentionManager } = useSendbirdChat();
 
@@ -103,7 +105,7 @@ const ChannelInput = (props: ChannelInputProps) => {
 
   const mentionAvailable =
     sbOptions.uikit.groupChannel.channel.enableMention && channel.isGroupChannel() && !channel.isBroadcast;
-  const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
+  const inputKeyToRemount = 'input'; //GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
   const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
@@ -127,16 +129,22 @@ const ChannelInput = (props: ChannelInputProps) => {
   };
 
   if (!props.shouldRenderInput) {
-    return <SafeAreaBottom height={bottom} />;
+    return <SafeAreaBottom height={safeArea.paddingBottom} />;
   }
 
   return (
     <>
       <KeyboardAvoidingView
-        keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
+        keyboardVerticalOffset={-safeArea.paddingBottom + keyboardAvoidOffset}
         behavior={KEYBOARD_AVOID_VIEW_BEHAVIOR}
       >
-        <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
+        <View
+          style={{
+            paddingStart: safeArea.paddingStart,
+            paddingEnd: safeArea.paddingEnd,
+            backgroundColor: colors.background,
+          }}
+        >
           <View onLayout={(e) => setInputHeight(e.nativeEvent.layout.height)} style={styles.inputContainer}>
             {inputMode === 'send' && (
               <SendInput
@@ -169,7 +177,7 @@ const ChannelInput = (props: ChannelInputProps) => {
               />
             )}
           </View>
-          <SafeAreaBottom height={bottom} />
+          <SafeAreaBottom height={safeArea.paddingBottom} />
         </View>
       </KeyboardAvoidingView>
       {mentionAvailable && props.SuggestedMentionList && (
@@ -177,8 +185,8 @@ const ChannelInput = (props: ChannelInputProps) => {
           text={text}
           selection={selection}
           inputHeight={inputHeight}
-          topInset={top}
-          bottomInset={bottom}
+          topInset={safeArea.paddingTop}
+          bottomInset={safeArea.paddingBottom}
           onPressToMention={onPressToMention}
           mentionedUsers={mentionedUsers}
         />
@@ -236,7 +244,7 @@ const styles = createStyleSheet({
   },
   input: {
     flex: 1,
-    marginRight: 4,
+    marginEnd: 4,
     borderRadius: 20,
     paddingTop: 8,
     paddingBottom: 8,

package/src/components/ChannelMessageList/index.tsx

@@ -1,6 +1,5 @@
 import React, { Ref } from 'react';
 import { FlatList, FlatListProps, ListRenderItem, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
   BottomSheetItem,
@@ -27,6 +26,7 @@ import {
   shouldRenderReaction,
   toMegabyte,
   useFreshCallback,
+  useSafeAreaPadding,
 } from '@sendbird/uikit-utils';
 
 import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
@@ -127,7 +127,7 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { show } = useUserProfile();
-  const { left, right } = useSafeAreaInsets();
+  const safeAreaLayout = useSafeAreaPadding(['left', 'right']);
   const createMessagePressActions = useCreateMessagePressActions({
     channel,
     currentUserId,
@@ -139,8 +139,6 @@ const ChannelMessageList = <T extends SendbirdGroupChannel | SendbirdOpenChannel
     onPressMediaMessage,
   });
 
-  const safeAreaLayout = { paddingLeft: left, paddingRight: right };
-
   const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
     const { onPress, onLongPress, bottomSheetItem } = createMessagePressActions({ message: item });
     return renderMessage({
@@ -439,8 +437,8 @@ const styles = createStyleSheet({
     position: 'absolute',
     zIndex: 999,
     top: 8,
-    left: 8,
-    right: 8,
+    start: 8,
+    end: 8,
   },
   frozenListPadding: {
     paddingBottom: 32,
@@ -455,7 +453,7 @@ const styles = createStyleSheet({
     position: 'absolute',
     zIndex: 998,
     bottom: 10,
-    right: 16,
+    end: 16,
   },
 });
 

package/src/components/ChannelThreadMessageList/index.tsx

@@ -1,6 +1,5 @@
 import React, { Ref } from 'react';
 import { FlatList, FlatListProps, ListRenderItem, View } from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
   BottomSheetItem,
@@ -27,6 +26,7 @@ import {
   shouldRenderReaction,
   toMegabyte,
   useFreshCallback,
+  useSafeAreaPadding,
 } from '@sendbird/uikit-utils';
 
 import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
@@ -118,7 +118,7 @@ const ChannelThreadMessageList = <T extends SendbirdGroupChannel | SendbirdOpenC
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   const { show } = useUserProfile();
-  const { left, right } = useSafeAreaInsets();
+  const safeAreaLayout = useSafeAreaPadding(['left', 'right']);
   const createMessagePressActions = useCreateMessagePressActions({
     channel,
     currentUserId,
@@ -128,8 +128,6 @@ const ChannelThreadMessageList = <T extends SendbirdGroupChannel | SendbirdOpenC
     onPressMediaMessage,
   });
 
-  const safeAreaLayout = { paddingLeft: left, paddingRight: right };
-
   const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
     const { onPress, onLongPress, bottomSheetItem } = createMessagePressActions({ message: item });
     return renderMessage({
@@ -391,8 +389,8 @@ const styles = createStyleSheet({
     position: 'absolute',
     zIndex: 999,
     top: 8,
-    left: 8,
-    right: 8,
+    start: 8,
+    end: 8,
   },
   frozenListPadding: {
     paddingBottom: 32,
@@ -407,7 +405,7 @@ const styles = createStyleSheet({
     position: 'absolute',
     zIndex: 998,
     bottom: 10,
-    right: 16,
+    end: 16,
   },
 });
 

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: {