@sendbird/uikit-react-native 1.1.0 → 1.1.2

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

@@ -1,2 +1,2 @@
-declare const VERSION = "1.1.0";
+declare const VERSION = "1.1.2";
 export default VERSION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sendbird/uikit-react-native",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "react-native-uikit",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -41,9 +41,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sendbird/uikit-chat-hooks": "1.1.0",
-    "@sendbird/uikit-react-native-foundation": "1.1.0",
-    "@sendbird/uikit-utils": "1.1.0"
+    "@sendbird/uikit-chat-hooks": "1.1.2",
+    "@sendbird/uikit-react-native-foundation": "1.1.2",
+    "@sendbird/uikit-utils": "1.1.2"
   },
   "devDependencies": {
     "@react-native-clipboard/clipboard": "^1.8.5",
@@ -159,5 +159,5 @@
     "readmeFile": "./README.md",
     "displayName": "@sendbird/uikit-react-native"
   },
-  "gitHead": "787ef6d52fec5d01e9b831d7a6f17e33614e2d09"
+  "gitHead": "3bfe51786e73bedc419116e447b79d6b57f9178c"
 }

package/src/components/FileViewer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { StatusBar, StyleSheet, View } from 'react-native';
+import { StatusBar, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import {
@@ -14,10 +14,17 @@ import {
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdFileMessage } from '@sendbird/uikit-utils';
-import { Logger, getFileExtension, getFileType, isMyMessage, toMegabyte, useIIFE } from '@sendbird/uikit-utils';
+import {
+  Logger,
+  getFileExtension,
+  getFileType,
+  isMyMessage,
+  toMegabyte,
+  truncate,
+  useIIFE,
+} from '@sendbird/uikit-utils';
 
 import { useLocalization, usePlatformService, useSendbirdChat } from '../hooks/useContext';
-import SBUPressable from './SBUPressable';
 
 type Props = {
   fileMessage: SendbirdFileMessage;
@@ -191,14 +198,14 @@ const FileViewerHeader = ({ topInset, onClose, subtitle, title }: HeaderProps) =
         { paddingTop: topInset, height: defaultHeight + topInset, backgroundColor: palette.overlay01 },
       ]}
     >
-      <SBUPressable as={'TouchableOpacity'} onPress={onClose} style={styles.barButton}>
+      <TouchableOpacity onPress={onClose} style={styles.barButton}>
         <Icon icon={'close'} size={24} color={palette.onBackgroundDark01} />
-      </SBUPressable>
+      </TouchableOpacity>
       <View style={styles.barTitleContainer}>
-        <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle}>
-          {title}
+        <Text h2 color={palette.onBackgroundDark01} style={styles.headerTitle} numberOfLines={1}>
+          {truncate(title, { mode: 'mid', maxLen: 18 })}
         </Text>
-        <Text caption2 color={palette.onBackgroundDark01}>
+        <Text caption2 color={palette.onBackgroundDark01} numberOfLines={1}>
           {subtitle}
         </Text>
       </View>
@@ -233,13 +240,13 @@ const FileViewerFooter = ({ bottomInset, deleteShown, onPressDelete, onPressDown
         },
       ]}
     >
-      <SBUPressable as={'TouchableOpacity'} onPress={onPressDownload} style={styles.barButton}>
+      <TouchableOpacity onPress={onPressDownload} style={styles.barButton}>
         <Icon icon={'download'} size={24} color={palette.onBackgroundDark01} />
-      </SBUPressable>
+      </TouchableOpacity>
       <View style={styles.barTitleContainer} />
-      <SBUPressable as={'TouchableOpacity'} onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
+      <TouchableOpacity onPress={onPressDelete} style={styles.barButton} disabled={!deleteShown}>
         {deleteShown && <Icon icon={'delete'} size={24} color={palette.onBackgroundDark01} />}
-      </SBUPressable>
+      </TouchableOpacity>
     </View>
   );
 };

package/src/components/MessageRenderer/FileMessage/ImageFileMessage.tsx

@@ -1,10 +1,39 @@
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
+import { getAvailableUriFromFileMessage, useForceUpdate } from '@sendbird/uikit-utils';
 
 import type { FileMessageProps } from './index';
 
+const useRetry = (hasError: boolean, retryCount = 5) => {
+  if (Platform.OS === 'android') return '';
+
+  const forceUpdate = useForceUpdate();
+  const retryCountRef = useRef(1);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    if (hasError) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            forceUpdate();
+          }, retryCountRef.current * 5000);
+        }
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [hasError]);
+
+  return retryCountRef.current;
+};
+
 const ImageFileMessage = ({ message }: FileMessageProps) => {
   const { colors } = useUIKitTheme();
   const [imageNotFound, setImageNotFound] = useState(false);
@@ -12,18 +41,28 @@ const ImageFileMessage = ({ message }: FileMessageProps) => {
   const fileUrl = getAvailableUriFromFileMessage(message);
   const style = [styles.image, { backgroundColor: colors.onBackground04 }];
 
-  if (imageNotFound) {
-    return <Icon containerStyle={style} icon={'thumbnail-none'} size={48} color={colors.onBackground02} />;
-  }
+  const key = useRetry(imageNotFound);
 
   return (
-    <Image
-      source={{ uri: fileUrl }}
-      style={style}
-      resizeMode={'cover'}
-      resizeMethod={'resize'}
-      onError={() => setImageNotFound(true)}
-    />
+    <View style={style}>
+      <Image
+        key={key}
+        source={{ uri: fileUrl }}
+        style={[StyleSheet.absoluteFill, imageNotFound && styles.hide]}
+        resizeMode={'cover'}
+        resizeMethod={'resize'}
+        onError={() => setImageNotFound(true)}
+        onLoad={() => setImageNotFound(false)}
+      />
+      {imageNotFound && (
+        <Icon
+          containerStyle={StyleSheet.absoluteFill}
+          icon={'thumbnail-none'}
+          size={48}
+          color={colors.onBackground02}
+        />
+      )}
+    </View>
   );
 };
 
@@ -33,6 +72,10 @@ const styles = createStyleSheet({
     maxWidth: 240,
     height: 160,
     borderRadius: 16,
+    overflow: 'hidden',
+  },
+  hide: {
+    display: 'none',
   },
 });
 

package/src/components/MessageRenderer/FileMessage/VideoFileMessage.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { View } from 'react-native';
 
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -7,35 +7,49 @@ import { getAvailableUriFromFileMessage } from '@sendbird/uikit-utils';
 import { usePlatformService } from '../../../hooks/useContext';
 import type { FileMessageProps } from './index';
 
-const VideoFileMessage = ({ message }: FileMessageProps) => {
-  const { colors } = useUIKitTheme();
+const useRetry = (videoFileUrl: string, retryCount = 5) => {
+  const [state, setState] = useState({ thumbnail: null as null | string, loading: true });
+  const retryCountRef = useRef(0);
+  const retryTimeoutRef = useRef<NodeJS.Timeout>();
 
   const { mediaService } = usePlatformService();
-  const fileUrl = getAvailableUriFromFileMessage(message);
-  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
 
-  const [state, setState] = useState({
-    thumbnail: null as null | string,
-    loading: true,
-    imageNotFound: false,
-  });
+  const fetchThumbnail = () => {
+    return mediaService?.getVideoThumbnail({ url: videoFileUrl, timeMills: 1000 }).then((result) => {
+      setState({ loading: false, thumbnail: result?.path ?? null });
+    });
+  };
 
   useEffect(() => {
-    mediaService
-      ?.getVideoThumbnail({ url: fileUrl, timeMills: 1000 })
-      .then((result) => {
-        if (result?.path) {
-          setState((prev) => ({ ...prev, loading: false, thumbnail: result.path }));
-        } else {
-          throw new Error('Cannot generate thumbnail');
+    if (!state.thumbnail) {
+      const reloadReservation = () => {
+        if (retryCountRef.current < retryCount) {
+          retryTimeoutRef.current = setTimeout(() => {
+            retryCountRef.current++;
+            reloadReservation();
+            fetchThumbnail();
+          }, retryCountRef.current * 5000);
         }
-      })
-      .catch(() => {
-        setState((prev) => ({ ...prev, loading: false, imageNotFound: true }));
-      });
-  }, []);
+      };
+
+      return reloadReservation();
+    } else {
+      return clearTimeout(retryTimeoutRef.current);
+    }
+  }, [state.thumbnail]);
+
+  return state;
+};
+
+const VideoFileMessage = ({ message }: FileMessageProps) => {
+  const { colors } = useUIKitTheme();
+
+  const fileUrl = getAvailableUriFromFileMessage(message);
+  const style = [styles.image, { backgroundColor: colors.onBackground04 }];
+
+  const { loading, thumbnail } = useRetry(fileUrl);
 
-  if (state.loading || state.imageNotFound) {
+  if (loading) {
     return (
       <View style={[style, styles.container]}>
         <PlayIcon />
@@ -45,13 +59,7 @@ const VideoFileMessage = ({ message }: FileMessageProps) => {
 
   return (
     <View style={styles.container}>
-      <Image
-        source={{ uri: state.thumbnail || fileUrl }}
-        style={style}
-        resizeMode={'cover'}
-        resizeMethod={'resize'}
-        onError={() => setState((prev) => ({ ...prev, imageNotFound: true }))}
-      />
+      <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
       <PlayIcon />
     </View>
   );

package/src/components/MessageRenderer/MessageIncomingSenderName.tsx

@@ -18,7 +18,7 @@ const MessageIncomingSenderName = ({ message, grouping }: Props) => {
   return (
     <View style={styles.sender}>
       {(message.isFileMessage() || message.isUserMessage()) && (
-        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName}>
+        <Text caption1 color={colors.ui.message.incoming.enabled.textSenderName} numberOfLines={1}>
           {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
         </Text>
       )}

package/src/components/MessageRenderer/MessageOutgoingStatus.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
+import { useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import { Icon, LoadingSpinner, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel, SendbirdMessage } from '@sendbird/uikit-utils';
-import { isDifferentChannel, useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
 
 import { useSendbirdChat } from '../../hooks/useContext';
 
@@ -12,64 +12,31 @@ type Props = { channel: SendbirdGroupChannel; message: SendbirdMessage };
 const MessageOutgoingStatus = ({ channel, message }: Props) => {
   if (!message.isUserMessage() && !message.isFileMessage()) return null;
 
-  const { sdk, features } = useSendbirdChat();
+  const { sdk } = useSendbirdChat();
   const { colors } = useUIKitTheme();
+  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, message);
 
-  const uniqId = useUniqId('MessageOutgoingStatus');
-  const forceUpdate = useForceUpdate();
-
-  useEffect(() => {
-    const handlerId = `MessageOutgoingStatus_${uniqId}`;
-
-    if (
-      message.sendingStatus === 'succeeded' &&
-      channel.getUnreadMemberCount(message) === 0 &&
-      channel.getUndeliveredMemberCount(message) === 0
-    ) {
-      sdk.removeChannelHandler(handlerId);
-    } else {
-      const handler = new sdk.ChannelHandler();
-
-      handler.onReadReceiptUpdated = (eventChannel) => {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        forceUpdate();
-      };
-
-      if (features.deliveryReceiptEnabled) {
-        handler.onDeliveryReceiptUpdated = (eventChannel) => {
-          if (isDifferentChannel(channel, eventChannel)) return;
-          forceUpdate();
-        };
-      }
-
-      sdk.addChannelHandler(handlerId, handler);
-    }
-
-    return () => {
-      sdk.removeChannelHandler(handlerId);
-    };
-  }, [message.sendingStatus]);
-
-  if (message.sendingStatus === 'pending') {
+  if (outgoingStatus === 'PENDING') {
     return <LoadingSpinner size={SIZE} style={styles.container} />;
   }
 
-  if (message.sendingStatus === 'failed') {
+  if (outgoingStatus === 'FAILED') {
     return <Icon icon={'error'} size={SIZE} color={colors.error} style={styles.container} />;
   }
 
-  if (channel.getUnreadMemberCount(message) === 0) {
+  if (outgoingStatus === 'READ') {
     return <Icon icon={'done-all'} size={SIZE} color={colors.secondary} style={styles.container} />;
   }
 
-  if (features.deliveryReceiptEnabled) {
-    if (channel.getUndeliveredMemberCount(message) === 0) {
-      return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
-    }
+  if (outgoingStatus === 'UNREAD' || outgoingStatus === 'DELIVERED') {
+    return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+  }
+
+  if (outgoingStatus === 'UNDELIVERED') {
     return <Icon icon={'done'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
   }
 
-  return <Icon icon={'done-all'} size={SIZE} color={colors.onBackground03} style={styles.container} />;
+  return null;
 };
 
 const styles = createStyleSheet({

package/src/components/MessageRenderer/index.tsx

@@ -107,9 +107,9 @@ const MessageRenderer: GroupChannelProps['Fragment']['renderMessage'] = ({
             </View>
           )}
           {isIncoming && <MessageIncomingAvatar message={message} grouping={groupWithNext} />}
-          <View>
+          <View style={styles.bubbleContainer}>
             {isIncoming && <MessageIncomingSenderName message={message} grouping={groupWithPrev} />}
-            <View style={styles.bubbleContainer}>
+            <View style={styles.bubbleWrapper}>
               {messageComponent}
               {isIncoming && <MessageTime message={message} grouping={groupWithNext} style={styles.timeIncoming} />}
             </View>
@@ -150,6 +150,9 @@ const styles = createStyleSheet({
     maxWidth: 240,
   },
   bubbleContainer: {
+    flexShrink: 1,
+  },
+  bubbleWrapper: {
     flexDirection: 'row',
     alignItems: 'flex-end',
   },

package/src/{components → containers}/GroupChannelPreviewContainer.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
+import { Pressable } from 'react-native';
 
-import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useChannelHandler, useMessageOutgoingStatus } from '@sendbird/uikit-chat-hooks';
 import {
   GroupChannelPreview,
+  Icon,
   LoadingSpinner,
   createStyleSheet,
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
-import Icon from '@sendbird/uikit-react-native-foundation/src/ui/Icon';
 import {
   SendbirdGroupChannel,
   SendbirdUser,
@@ -15,14 +16,13 @@ import {
   getFileType,
   isDifferentChannel,
   isMyMessage,
-  useForceUpdate,
   useIIFE,
   useUniqId,
 } from '@sendbird/uikit-utils';
 
+import ChannelCover from '../components/ChannelCover';
+import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
-import ChannelCover from './ChannelCover';
-import SBUPressable from './SBUPressable';
 
 const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
 
@@ -37,7 +37,6 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
   const { colors } = useUIKitTheme();
 
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
-  const forceUpdate = useForceUpdate();
 
   if (features.channelListTypingIndicatorEnabled) {
     const typingId = useUniqId('GroupChannelPreviewContainer');
@@ -49,25 +48,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
     });
   }
 
-  if (features.channelListMessageReceiptStatusEnabled) {
-    const receiptId = useUniqId('GroupChannelPreviewContainer');
-    useChannelHandler(sdk, `GroupChannelPreviewContainer_ReceiptStatus_${receiptId}`, {
-      onDeliveryReceiptUpdated(eventChannel) {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
-        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;
-
-        forceUpdate();
-      },
-      onReadReceiptUpdated(eventChannel) {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        if (!eventChannel.isGroupChannel() || !eventChannel.lastMessage) return;
-        if (!isMyMessage(eventChannel.lastMessage, currentUser?.userId)) return;
-
-        forceUpdate();
-      },
-    });
-  }
+  const outgoingStatus = useMessageOutgoingStatus(sdk, channel, channel.lastMessage);
 
   const bodyText = useIIFE(() => {
     if (typingUsers.length > 0) return STRINGS.LABELS.TYPING_INDICATOR_TYPINGS(typingUsers) || '';
@@ -76,6 +57,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
 
   const bodyIcon = useIIFE(() => {
     if (!channel.lastMessage?.isFileMessage()) return undefined;
+    if (typingUsers.length > 0) return undefined;
     return iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))];
   });
 
@@ -84,30 +66,31 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
     if (!features.channelListMessageReceiptStatusEnabled) return undefined;
     if (!isMyMessage(channel.lastMessage, currentUser?.userId)) return undefined;
 
-    if (channel.lastMessage.sendingStatus === 'pending') {
+    if (outgoingStatus === 'PENDING') {
       return <LoadingSpinner size={16} style={styles.titleCaptionIcon} />;
     }
 
-    if (channel.lastMessage.sendingStatus === 'failed') {
+    if (outgoingStatus === 'FAILED') {
       return <Icon icon={'error'} size={16} color={colors.error} style={styles.titleCaptionIcon} />;
     }
 
-    if (channel.getUnreadMemberCount(channel.lastMessage) === 0) {
-      return <Icon icon={'done-all'} size={16} color={colors.secondary} style={styles.titleCaptionIcon} />;
+    if (outgoingStatus === 'UNDELIVERED') {
+      return <Icon icon={'done'} size={16} color={colors.onBackground03} containerStyle={styles.titleCaptionIcon} />;
     }
 
-    if (features.deliveryReceiptEnabled) {
-      if (channel.getUndeliveredMemberCount(channel.lastMessage) === 0) {
-        return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;
-      }
-      return <Icon icon={'done'} size={16} color={colors.onBackground03} containerStyle={styles.titleCaptionIcon} />;
+    if (outgoingStatus === 'DELIVERED' || outgoingStatus === 'UNREAD') {
+      return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;
+    }
+
+    if (outgoingStatus === 'READ') {
+      return <Icon icon={'done-all'} size={16} color={colors.secondary} style={styles.titleCaptionIcon} />;
     }
 
-    return <Icon icon={'done-all'} size={16} color={colors.onBackground03} style={styles.titleCaptionIcon} />;
+    return undefined;
   });
 
   return (
-    <SBUPressable onPress={onPress} onLongPress={onLongPress}>
+    <Pressable delayLongPress={DEFAULT_LONG_PRESS_DELAY} onPress={onPress} onLongPress={onLongPress}>
       <GroupChannelPreview
         customCover={<ChannelCover channel={channel} size={56} />}
         coverUrl={channel.coverUrl}
@@ -121,7 +104,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         frozen={channel.isFrozen}
         notificationOff={channel.myPushTriggerOption === 'off'}
       />
-    </SBUPressable>
+    </Pressable>
   );
 };
 

package/src/{InternalErrorBoundary.tsx → containers/InternalErrorBoundaryContainer.tsx}

@@ -1,8 +1,8 @@
 import React, { ErrorInfo } from 'react';
 import { View } from 'react-native';
 
-import TypedPlaceholder from './components/TypedPlaceholder';
-import type { ErrorBoundaryProps } from './types';
+import TypedPlaceholder from '../components/TypedPlaceholder';
+import type { ErrorBoundaryProps } from '../types';
 
 const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
   return (
@@ -12,7 +12,7 @@ const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
   );
 };
 
-class InternalErrorBoundary extends React.PureComponent<{
+class InternalErrorBoundaryContainer extends React.PureComponent<{
   onError?: (props: ErrorBoundaryProps) => void;
   ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
   children?: React.ReactNode;
@@ -50,4 +50,4 @@ class InternalErrorBoundary extends React.PureComponent<{
   };
 }
 
-export default InternalErrorBoundary;
+export default InternalErrorBoundaryContainer;

package/src/{SendbirdUIKitContainer.tsx → containers/SendbirdUIKitContainer.tsx}

@@ -14,23 +14,23 @@ import {
 } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
 
-import InternalErrorBoundary from './InternalErrorBoundary';
-import InternalLocalCacheStorage from './InternalLocalCacheStorage';
-import { LocalizationProvider } from './contexts/Localization';
-import { PlatformServiceProvider } from './contexts/PlatformService';
-import { SendbirdChatProvider } from './contexts/SendbirdChat';
-import { useLocalization } from './hooks/useContext';
-import StringSetEn from './localization/StringSet.en';
-import type { StringSet } from './localization/StringSet.type';
-import SBUDynamicModule from './platform/dynamicModule';
+import { LocalizationProvider } from '../contexts/Localization';
+import { PlatformServiceProvider } from '../contexts/PlatformService';
+import { SendbirdChatProvider } from '../contexts/SendbirdChat';
+import { useLocalization } from '../hooks/useContext';
+import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
+import StringSetEn from '../localization/StringSet.en';
+import type { StringSet } from '../localization/StringSet.type';
+import SBUDynamicModule from '../platform/dynamicModule';
 import type {
   ClipboardServiceInterface,
   FileServiceInterface,
   MediaServiceInterface,
   NotificationServiceInterface,
-} from './platform/types';
-import type { ErrorBoundaryProps, LocalCacheStorage } from './types';
-import VERSION from './version';
+} from '../platform/types';
+import type { ErrorBoundaryProps, LocalCacheStorage } from '../types';
+import VERSION from '../version';
+import InternalErrorBoundaryContainer from './InternalErrorBoundaryContainer';
 
 const NetInfo = SBUDynamicModule.get('@react-native-community/netinfo', 'warn');
 
@@ -159,7 +159,7 @@ const SendbirdUIKitContainer = ({
               >
                 <LocalizedDialogProvider>
                   <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <InternalErrorBoundary {...errorBoundary}>{children}</InternalErrorBoundary>
+                    <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
                   </ToastProvider>
                 </LocalizedDialogProvider>
               </HeaderStyleProvider>