@sendbird/uikit-react-native 2.3.0 → 2.4.1

package/src/{domain/groupChannel/component/GroupChannelInput → components/ChannelInput}/index.tsx

@@ -1,24 +1,83 @@
-import React, { MutableRefObject, useContext, useEffect, useRef, useState } from 'react';
+import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
 import { KeyboardAvoidingView, Platform, TextInput, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import {
+  SendbirdBaseChannel,
+  SendbirdBaseMessage,
   SendbirdFileMessage,
-  SendbirdGroupChannel,
+  SendbirdFileMessageCreateParams,
+  SendbirdFileMessageUpdateParams,
+  SendbirdMember,
   SendbirdUserMessage,
-  getGroupChannelChatAvailableState,
+  SendbirdUserMessageCreateParams,
+  SendbirdUserMessageUpdateParams,
   replace,
   useIIFE,
 } from '@sendbird/uikit-utils';
 
-import { useSendbirdChat } from '../../../../hooks/useContext';
-import useMentionTextInput from '../../../../hooks/useMentionTextInput';
-import { GroupChannelContexts } from '../../module/moduleContext';
-import type { GroupChannelProps } from '../../types';
+import { useSendbirdChat } from '../../hooks/useContext';
+import useMentionTextInput from '../../hooks/useMentionTextInput';
+import type { FileType } from '../../platform/types';
+import type { MentionedUser, Range } from '../../types';
 import EditInput from './EditInput';
 import SendInput from './SendInput';
 
+type UserMessageMentionParams = Required<{
+  messageTemplate: SendbirdUserMessageCreateParams['mentionedMessageTemplate'];
+  userIds: SendbirdUserMessageCreateParams['mentionedUserIds'];
+  type: SendbirdUserMessageCreateParams['mentionType'];
+}>;
+
+export type SuggestedMentionListProps = {
+  text: string;
+  selection: Range;
+  topInset: number;
+  bottomInset: number;
+  inputHeight: number;
+  onPressToMention: (user: SendbirdMember, searchStringRange: Range) => void;
+  mentionedUsers: MentionedUser[];
+};
+
+export type ChannelInputProps = {
+  // default
+  channel: SendbirdBaseChannel;
+  shouldRenderInput: boolean;
+  keyboardAvoidOffset: number;
+
+  // default actions
+  onPressSendUserMessage: (params: SendbirdUserMessageCreateParams) => Promise<void>;
+  onPressSendFileMessage: (params: SendbirdFileMessageCreateParams) => Promise<void>;
+  onPressUpdateUserMessage: (message: SendbirdUserMessage, params: SendbirdUserMessageUpdateParams) => Promise<void>;
+  onPressUpdateFileMessage: (message: SendbirdFileMessage, params: SendbirdFileMessageUpdateParams) => Promise<void>;
+
+  // input status
+  inputFrozen: boolean;
+  inputMuted: boolean;
+  inputDisabled: boolean;
+
+  // edit
+  messageToEdit: undefined | SendbirdUserMessage | SendbirdFileMessage;
+  setMessageToEdit: (message?: undefined | SendbirdUserMessage | SendbirdFileMessage) => void;
+
+  // mention
+  SuggestedMentionList?: (props: SuggestedMentionListProps) => JSX.Element | null;
+
+  /** @deprecated Please use `onPressSendUserMessage` **/
+  onSendFileMessage?: (file: FileType) => Promise<void>;
+  /** @deprecated Please use `onPressSendFileMessage` **/
+  onSendUserMessage?: (text: string, mention?: UserMessageMentionParams) => Promise<void>;
+  /** @deprecated Please use `onPressUpdateUserMessage` **/
+  onUpdateFileMessage?: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;
+  /** @deprecated Please use `onPressUpdateFileMessage` **/
+  onUpdateUserMessage?: (
+    editedText: string,
+    message: SendbirdUserMessage,
+    mention?: UserMessageMentionParams,
+  ) => Promise<void>;
+};
+
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
 
@@ -28,36 +87,32 @@ const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const,
 const GET_INPUT_KEY = (shouldReset: boolean) => (shouldReset ? 'uikit-input-clear' : 'uikit-input');
 
 // TODO: Refactor 'Edit' mode to clearly
-const GroupChannelInput = (props: GroupChannelProps['Input']) => {
+const ChannelInput = (props: ChannelInputProps) => {
+  const { channel, keyboardAvoidOffset, messageToEdit, setMessageToEdit } = props;
+
   const { top, left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
   const { features, mentionManager } = useSendbirdChat();
-  const {
-    channel,
-    messageToEdit,
-    setMessageToEdit,
-    keyboardAvoidOffset = 0,
-  } = useContext(GroupChannelContexts.Fragment);
 
-  const chatAvailableState = getGroupChannelChatAvailableState(channel);
-  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
+    messageToEdit,
+  });
   const inputMode = useIIFE(() => {
     if (!messageToEdit) return 'send';
     if (messageToEdit.isFileMessage()) return 'send';
     return 'edit';
   });
 
-  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
+  const mentionAvailable = features.userMentionEnabled && channel.isGroupChannel() && !channel.isBroadcast;
+  const inputKeyToRemount = GET_INPUT_KEY(mentionAvailable ? mentionedUsers.length === 0 : false);
 
-  const { selection, onSelectionChange, textInputRef, text, onChangeText, mentionedUsers } = useMentionTextInput({
-    messageToEdit: messageToEdit,
-  });
+  const [inputHeight, setInputHeight] = useState(styles.inputDefault.height);
 
   useTypingTrigger(text, channel);
-  useTextPersistenceOnDisabled(text, onChangeText, chatAvailableState.disabled);
+  useTextPersistenceOnDisabled(text, onChangeText, props.inputDisabled);
   useAutoFocusOnEditMode(textInputRef, messageToEdit);
 
-  const onPressToMention: GroupChannelProps['SuggestedMentionList']['onPressToMention'] = (user, searchStringRange) => {
+  const onPressToMention = (user: SendbirdMember, searchStringRange: Range) => {
     const mentionedMessageText = mentionManager.asMentionedMessageText(user, true);
     const range = { start: searchStringRange.start, end: searchStringRange.start + mentionedMessageText.length - 1 };
 
@@ -79,8 +134,7 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
             {inputMode === 'send' && (
               <SendInput
                 {...props}
-                {...chatAvailableState}
-                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                key={inputKeyToRemount}
                 ref={textInputRef as never}
                 text={text}
                 onChangeText={onChangeText}
@@ -91,23 +145,22 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
             {inputMode === 'edit' && messageToEdit && (
               <EditInput
                 {...props}
-                key={GET_INPUT_KEY(mentionedUsers.length === 0)}
+                key={inputKeyToRemount}
                 ref={textInputRef as never}
-                autoFocus={AUTO_FOCUS}
                 text={text}
                 onChangeText={onChangeText}
-                messageToEdit={messageToEdit}
-                setMessageToEdit={setMessageToEdit}
-                disabled={chatAvailableState.disabled}
+                autoFocus={AUTO_FOCUS}
                 onSelectionChange={onSelectionChange}
+                messageToEdit={messageToEdit}
                 mentionedUsers={mentionedUsers}
+                setMessageToEdit={setMessageToEdit}
               />
             )}
           </View>
           <SafeAreaBottom height={bottom} />
         </View>
       </KeyboardAvoidingView>
-      {mentionAvailable && (
+      {mentionAvailable && props.SuggestedMentionList && (
         <props.SuggestedMentionList
           text={text}
           selection={selection}
@@ -122,11 +175,13 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   );
 };
 
-const useTypingTrigger = (text: string, channel: SendbirdGroupChannel) => {
-  useEffect(() => {
-    if (text.length === 0) channel.endTyping();
-    else channel.startTyping();
-  }, [text]);
+const useTypingTrigger = (text: string, channel: SendbirdBaseChannel) => {
+  if (channel.isGroupChannel()) {
+    useEffect(() => {
+      if (text.length === 0) channel.endTyping();
+      else channel.startTyping();
+    }, [text]);
+  }
 };
 
 const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => void, chatDisabled: boolean) => {
@@ -144,7 +199,7 @@ const useTextPersistenceOnDisabled = (text: string, setText: (val: string) => vo
 
 const useAutoFocusOnEditMode = (
   textInputRef: MutableRefObject<TextInput | undefined>,
-  messageToEdit?: SendbirdUserMessage | SendbirdFileMessage,
+  messageToEdit?: SendbirdBaseMessage,
 ) => {
   useEffect(() => {
     if (messageToEdit?.isUserMessage()) {
@@ -167,4 +222,4 @@ const styles = createStyleSheet({
   },
 });
 
-export default React.memo(GroupChannelInput);
+export default React.memo(ChannelInput);

package/src/components/FileViewer.tsx

@@ -104,13 +104,13 @@ const FileViewer = ({
       onPressDelete(fileMessage);
     } else {
       alert({
-        title: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE,
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
         buttons: [
           {
-            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL,
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
           },
           {
-            text: STRINGS.GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK,
+            text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
             style: 'destructive',
             onPress: () => {
               deleteMessage()

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

@@ -14,7 +14,7 @@ type Props = FileMessageProps & {
 const BaseFileMessage = ({ message, variant, pressed, type, children }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return (
     <View style={[styles.bubbleContainer, { backgroundColor: color.background }]}>
       <View style={styles.container}>

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

@@ -47,7 +47,11 @@ const ImageFileMessage = ({ message, children, variant }: FileMessageProps) => {
     <View
       style={[
         styles.bubbleContainer,
-        { backgroundColor: imageNotFound ? colors.onBackground04 : colors.ui.message[variant].enabled.background },
+        {
+          backgroundColor: imageNotFound
+            ? colors.onBackground04
+            : colors.ui.groupChannelMessage[variant].enabled.background,
+        },
       ]}
     >
       <View style={style}>

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

@@ -51,7 +51,9 @@ const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
 
   if (loading) {
     return (
-      <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+      <View
+        style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
+      >
         <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
           <View style={style} />
           <PlayIcon />
@@ -62,7 +64,9 @@ const VideoFileMessage = ({ message, variant, children }: FileMessageProps) => {
   }
 
   return (
-    <View style={[styles.bubbleContainer, { backgroundColor: colors.ui.message[variant].enabled.background }]}>
+    <View
+      style={[styles.bubbleContainer, { backgroundColor: colors.ui.groupChannelMessage[variant].enabled.background }]}
+    >
       <View style={[styles.bubbleContainer, styles.bubbleInnerContainer]}>
         <Image source={{ uri: thumbnail || fileUrl }} style={style} resizeMode={'cover'} resizeMethod={'resize'} />
         <PlayIcon />

package/src/components/MessageRenderer/MessageDateSeparator.tsx

@@ -15,6 +15,7 @@ type Props = {
 const MessageDateSeparator = ({ message, prevMessage }: Props) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
+
   const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);
   if (sameDay) return null;
   return (

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} numberOfLines={1}>
+        <Text caption1 color={colors.ui.groupChannelMessage.incoming.enabled.textSenderName} numberOfLines={1}>
           {message.sender?.nickname || STRINGS.LABELS.USER_NO_NAME}
         </Text>
       )}

package/src/components/MessageRenderer/MessageTime.tsx

@@ -18,7 +18,7 @@ const MessageTime = ({ message, grouping, style }: Props) => {
 
   return (
     <View style={style}>
-      <Text caption4 color={colors.ui.message.incoming.enabled.textTime}>
+      <Text caption4 color={colors.ui.groupChannelMessage.incoming.enabled.textTime}>
         {STRINGS.GROUP_CHANNEL.MESSAGE_BUBBLE_TIME(message)}
       </Text>
     </View>

package/src/components/MessageRenderer/UnknownMessage/index.tsx

@@ -10,7 +10,7 @@ export type UnknownMessageProps = MessageRendererInterface;
 const UnknownMessage = ({ message, variant, pressed }: UnknownMessageProps) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
   return (
     <View style={[styles.container, { backgroundColor: color.background }]}>
       <Text body3 color={colors.onBackground01}>

package/src/components/MessageRenderer/UserMessage/BaseUserMessage.tsx

@@ -21,7 +21,7 @@ const BaseUserMessage = ({
   const { STRINGS } = useLocalization();
   const { colors, palette } = useUIKitTheme();
 
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
 
   return (
     <View style={[styles.container, { backgroundColor: color.background }]}>

package/src/components/MessageRenderer/UserMessage/OpenGraphUserMessage.tsx

@@ -28,7 +28,7 @@ const OpenGraphUserMessage = ({
   const { colors, select, palette } = useUIKitTheme();
 
   const [imageNotFound, setImageNotFound] = useState(false);
-  const color = colors.ui.message[variant][pressed ? 'pressed' : 'enabled'];
+  const color = colors.ui.groupChannelMessage[variant][pressed ? 'pressed' : 'enabled'];
 
   const containerBackground = select({ dark: palette.background400, light: palette.background100 });
 

package/src/components/OpenChannelMessageRenderer/OpenChannelMessageDateSeparator.tsx

@@ -0,0 +1,46 @@
+import isSameDay from 'date-fns/isSameDay';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMessage } from '@sendbird/uikit-utils';
+
+import { useLocalization } from '../../hooks/useContext';
+
+const OpenChannelMessageDateSeparator = ({
+  message,
+  prevMessage,
+}: {
+  message: SendbirdMessage;
+  prevMessage?: SendbirdMessage;
+}) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const sameDay = isSameDay(message.createdAt, prevMessage?.createdAt ?? 0);
+  if (sameDay) return null;
+
+  return (
+    <View style={styles.container}>
+      <View style={[styles.view, { backgroundColor: colors.ui.dateSeparator.default.none.background }]}>
+        <Text caption1 color={colors.ui.dateSeparator.default.none.text}>
+          {STRINGS.OPEN_CHANNEL.LIST_DATE_SEPARATOR(new Date(message.createdAt))}
+        </Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = createStyleSheet({
+  container: {
+    alignItems: 'center',
+    marginVertical: 16,
+  },
+  view: {
+    borderRadius: 10,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+  },
+});
+
+export default OpenChannelMessageDateSeparator;

package/src/components/OpenChannelMessageRenderer/index.tsx

@@ -0,0 +1,91 @@
+import React from 'react';
+
+import type { OpenChannelMessageProps } from '@sendbird/uikit-react-native-foundation';
+import { Box, OpenChannelMessage } from '@sendbird/uikit-react-native-foundation';
+import {
+  SendbirdAdminMessage,
+  SendbirdFileMessage,
+  SendbirdMessage,
+  SendbirdUserMessage,
+  calcMessageGrouping,
+  getMessageType,
+} from '@sendbird/uikit-utils';
+
+import type { OpenChannelProps } from '../../domain/openChannel/types';
+import { useLocalization, usePlatformService } from '../../hooks/useContext';
+import SBUUtils from '../../libs/SBUUtils';
+import OpenChannelMessageDateSeparator from './OpenChannelMessageDateSeparator';
+
+const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage'] = ({
+  channel,
+  message,
+  onPress,
+  onLongPress,
+  onPressAvatar,
+  enableMessageGrouping,
+  prevMessage,
+  nextMessage,
+}) => {
+  const { STRINGS } = useLocalization();
+  const { mediaService } = usePlatformService();
+  const { groupWithPrev } = calcMessageGrouping(Boolean(enableMessageGrouping), message, prevMessage, nextMessage);
+
+  const messageProps: Omit<OpenChannelMessageProps<SendbirdMessage>, 'message'> = {
+    channel,
+    onPress,
+    onLongPress,
+    onPressURL: () => message.ogMetaData?.url && SBUUtils.openURL(message.ogMetaData?.url),
+    onPressAvatar: () => 'sender' in message && onPressAvatar?.(message.sender, { hideMessageButton: true }),
+    grouped: groupWithPrev,
+    strings: {
+      edited: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_EDITED_POSTFIX,
+      senderName: ('sender' in message && message.sender.nickname) || STRINGS.LABELS.USER_NO_NAME,
+      sentDate: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_TIME(message),
+      fileName: message.isFileMessage() ? STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_FILE_TITLE(message) : '',
+      unknownTitle: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_TITLE(message),
+      unknownDescription: STRINGS.OPEN_CHANNEL.MESSAGE_BUBBLE_UNKNOWN_DESC(message),
+    },
+  };
+  const renderMessage = () => {
+    switch (getMessageType(message)) {
+      case 'admin': {
+        return <OpenChannelMessage.Admin message={message as SendbirdAdminMessage} {...messageProps} />;
+      }
+      case 'user': {
+        return <OpenChannelMessage.User message={message as SendbirdUserMessage} {...messageProps} />;
+      }
+      case 'user.opengraph': {
+        return <OpenChannelMessage.OpenGraphUser message={message as SendbirdUserMessage} {...messageProps} />;
+      }
+      case 'file':
+      case 'file.audio': {
+        return <OpenChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;
+      }
+      case 'file.image': {
+        return <OpenChannelMessage.ImageFile message={message as SendbirdFileMessage} {...messageProps} />;
+      }
+      case 'file.video': {
+        return (
+          <OpenChannelMessage.VideoFile
+            message={message as SendbirdFileMessage}
+            fetchThumbnailFromVideoSource={(uri) => mediaService.getVideoThumbnail({ url: uri, timeMills: 1000 })}
+            {...messageProps}
+          />
+        );
+      }
+      case 'unknown':
+      default: {
+        return <OpenChannelMessage.Unknown message={message} {...messageProps} />;
+      }
+    }
+  };
+
+  return (
+    <Box>
+      <OpenChannelMessageDateSeparator message={message} prevMessage={prevMessage} />
+      {renderMessage()}
+    </Box>
+  );
+};
+
+export default React.memo(OpenChannelMessageRenderer);

package/src/components/ReactionAddons/BottomSheetReactionAddon.tsx

@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { Icon, Image, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { SendbirdBaseChannel, SendbirdBaseMessage, useUniqId } from '@sendbird/uikit-utils';
+import { SendbirdBaseChannel, SendbirdBaseMessage, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import { UNKNOWN_USER_ID } from '../../constants';
 import { useReaction, useSendbirdChat } from '../../hooks/useContext';
@@ -14,15 +14,14 @@ type Props = {
   channel: SendbirdBaseChannel;
   message: SendbirdBaseMessage;
 };
-const COMPONENT_NAME = 'BottomSheetReactionAddon';
 const BottomSheetReactionAddon = ({ onClose, message, channel }: Props) => {
   const { emojiManager, currentUser, sdk } = useSendbirdChat();
   const { updateReactionFocusedItem, openReactionList } = useReaction();
   const { colors } = useUIKitTheme();
-  const id = useUniqId(COMPONENT_NAME);
+  const handlerId = useUniqHandlerId('BottomSheetReactionAddon');
   const { left, right } = useSafeAreaInsets();
 
-  useChannelHandler(sdk, COMPONENT_NAME + id, {
+  useChannelHandler(sdk, handlerId, {
     async onReactionUpdated(eventChannel, event) {
       if (channel?.url === eventChannel.url && event.messageId === message?.messageId) {
         updateReactionFocusedItem({

package/src/components/TypedPlaceholder.tsx

@@ -7,6 +7,7 @@ import { useLocalization } from '../hooks/useContext';
 type Props = {
   type:
     | 'no-muted-members'
+    | 'no-muted-participants'
     | 'no-banned-users'
     | 'no-channels'
     | 'no-messages'
@@ -27,6 +28,8 @@ const TypedPlaceholder = ({ type, onPressRetry }: Props) => {
       return <Placeholder icon={'message'} message={STRINGS.PLACEHOLDER.NO_MESSAGES} />;
     case 'no-muted-members':
       return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_MEMBERS} />;
+    case 'no-muted-participants':
+      return <Placeholder icon={'mute'} message={STRINGS.PLACEHOLDER.NO_MUTED_PARTICIPANTS} />;
     case 'no-results-found':
       return <Placeholder icon={'search'} message={STRINGS.PLACEHOLDER.NO_RESULTS_FOUND} />;
     case 'no-users':

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -17,7 +17,7 @@ import {
   isDifferentChannel,
   isMyMessage,
   useIIFE,
-  useUniqId,
+  useUniqHandlerId,
 } from '@sendbird/uikit-utils';
 
 import ChannelCover from '../components/ChannelCover';
@@ -39,8 +39,8 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
 
   if (features.channelListTypingIndicatorEnabled) {
-    const typingId = useUniqId('GroupChannelPreviewContainer');
-    useChannelHandler(sdk, `GroupChannelPreviewContainer_TypingIndicator_${typingId}`, {
+    const handlerId = useUniqHandlerId('GroupChannelPreviewContainer_TypingIndicator');
+    useChannelHandler(sdk, handlerId, {
       onTypingStatusUpdated(eventChannel) {
         if (isDifferentChannel(channel, eventChannel)) return;
         setTypingUsers(eventChannel.getTypingUsers());

package/src/containers/SendbirdUIKitContainer.tsx

@@ -15,13 +15,13 @@ import {
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
 import type {
-  SendbirdBaseChannel,
   SendbirdChatSDK,
+  SendbirdGroupChannel,
   SendbirdGroupChannelCreateParams,
   SendbirdMember,
   SendbirdUser,
 } from '@sendbird/uikit-utils';
-import { useIsFirstMount } from '@sendbird/uikit-utils';
+import { NOOP, useIsFirstMount } from '@sendbird/uikit-utils';
 
 import { LocalizationContext, LocalizationProvider } from '../contexts/LocalizationCtx';
 import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
@@ -86,6 +86,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
   errorBoundary?: {
+    disabled?: boolean;
     onError?: (props: ErrorBoundaryProps) => void;
     ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
   };
@@ -93,7 +94,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     dismissTimeout?: number;
   };
   userProfile?: {
-    onCreateChannel: (channel: SendbirdBaseChannel) => void;
+    onCreateChannel: (channel: SendbirdGroupChannel) => void;
     onBeforeCreateChannel?: (
       channelParams: SendbirdGroupChannelCreateParams,
       users: SendbirdUser[] | SendbirdMember[],
@@ -142,17 +143,20 @@ const SendbirdUIKitContainer = ({
       trigger: MentionConfig.DEFAULT.TRIGGER,
     });
     return new MentionManager(config, chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION);
-  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
+  }, [
+    chatOptions?.enableUserMention,
+    userMention?.mentionLimit,
+    userMention?.suggestionLimit,
+    userMention?.debounceMills,
+  ]);
 
-  const imageCompressionConfig = useMemo(
-    () =>
-      new ImageCompressionConfig({
-        compressionRate: imageCompression?.compressionRate || ImageCompressionConfig.DEFAULT.COMPRESSION_RATE,
-        width: imageCompression?.width,
-        height: imageCompression?.height,
-      }),
-    [imageCompression?.compressionRate, imageCompression?.width, imageCompression?.height],
-  );
+  const imageCompressionConfig = useMemo(() => {
+    return new ImageCompressionConfig({
+      compressionRate: imageCompression?.compressionRate || ImageCompressionConfig.DEFAULT.COMPRESSION_RATE,
+      width: imageCompression?.width,
+      height: imageCompression?.height,
+    });
+  }, [imageCompression?.compressionRate, imageCompression?.width, imageCompression?.height]);
 
   useLayoutEffect(() => {
     if (!isFirstMount) {
@@ -172,6 +176,14 @@ const SendbirdUIKitContainer = ({
     };
   }, [appId, internalStorage]);
 
+  const renderChildren = () => {
+    if (errorBoundary?.disabled) {
+      return children;
+    } else {
+      return <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>;
+    }
+  };
+
   return (
     <SafeAreaProvider>
       <SendbirdChatProvider
@@ -212,6 +224,7 @@ const SendbirdUIKitContainer = ({
                   <UserProfileProvider
                     onCreateChannel={userProfile?.onCreateChannel}
                     onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
+                    statusBarTranslucent={styles?.statusBarTranslucent ?? true}
                   >
                     <ReactionProvider>
                       <LocalizationContext.Consumer>
@@ -228,9 +241,7 @@ const SendbirdUIKitContainer = ({
                                 },
                               }}
                             >
-                              <InternalErrorBoundaryContainer {...errorBoundary}>
-                                {children}
-                              </InternalErrorBoundaryContainer>
+                              {renderChildren()}
                             </DialogProvider>
                           );
                         }}
@@ -276,9 +287,28 @@ const initializeSendbird = (
   }
 
   if (NetInfo?.addEventListener) {
+    try {
+      // NOTE: For removing buggy behavior of NetInfo.addEventListener
+      //  When you first add an event listener, it is assumed that the initialization of the internal event detector is done simultaneously.
+      //  In other words, when you call the first event listener two events are triggered immediately
+      //   - the one that is called when adding the event listener
+      //   - and the internal initialization event
+      NetInfo.addEventListener(NOOP)();
+    } catch {}
+
     const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
+      let callCount = 0;
       const unsubscribe = NetInfo.addEventListener((state) => {
         const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
+
+        // NOTE: When NetInfo.addEventListener is called
+        //  the event is immediately triggered regardless of whether the event actually occurred.
+        //  This is why it filters the first event.
+        if (callCount === 0) {
+          callCount++;
+          return;
+        }
+
         if (online && callbackType === 'online') callback();
         if (!online && callbackType === 'offline') callback();
       });