@sendbird/uikit-react-native 3.1.2 → 3.3.0

package/src/components/GroupChannelMessageRenderer/GroupChannelMessageParentMessage.tsx

@@ -12,6 +12,7 @@ import {
 } from '@sendbird/uikit-react-native-foundation';
 import {
   SendbirdFileMessage,
+  SendbirdGroupChannel,
   SendbirdMessage,
   SendbirdUserMessage,
   getFileIconFromMessageType,
@@ -26,12 +27,13 @@ import { useLocalization, usePlatformService, useSendbirdChat } from '../../hook
 
 type Props = {
   variant: 'outgoing' | 'incoming';
+  channel: SendbirdGroupChannel;
   message: SendbirdUserMessage | SendbirdFileMessage;
   childMessage: SendbirdUserMessage | SendbirdFileMessage;
   onPress?: (message: SendbirdMessage) => void;
 };
 
-const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPress }: Props) => {
+const GroupChannelMessageParentMessage = ({ variant, channel, message, childMessage, onPress }: Props) => {
   const { currentUser } = useSendbirdChat();
   const groupChannelPubSub = useContext(GroupChannelContexts.PubSub);
   const { select, colors, palette } = useUIKitTheme();
@@ -52,6 +54,19 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
     });
   }, []);
 
+  const renderMessageWithText = (message: string) => {
+    return (
+      <Box
+        style={styles.bubbleContainer}
+        backgroundColor={select({ light: palette.background100, dark: palette.background400 })}
+      >
+        <Text body3 color={colors.onBackground03} suppressHighlighting numberOfLines={2} ellipsizeMode={'tail'}>
+          {message}
+        </Text>
+      </Box>
+    );
+  };
+
   const renderFileMessageAsVideoThumbnail = (url: string) => {
     return (
       <VideoThumbnail
@@ -85,19 +100,14 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
   };
 
   const parentMessageComponent = useIIFE(() => {
+    if (channel.messageOffsetTimestamp > parentMessage.createdAt) {
+      return renderMessageWithText(STRINGS.LABELS.MESSAGE_UNAVAILABLE);
+    }
+
     switch (type) {
       case 'user':
       case 'user.opengraph': {
-        return (
-          <Box
-            style={styles.bubbleContainer}
-            backgroundColor={select({ light: palette.background100, dark: palette.background400 })}
-          >
-            <Text body3 color={colors.onBackground03} suppressHighlighting numberOfLines={2} ellipsizeMode={'tail'}>
-              {(parentMessage as SendbirdUserMessage).message}
-            </Text>
-          </Box>
-        );
+        return renderMessageWithText((parentMessage as SendbirdUserMessage).message);
       }
       case 'file':
       case 'file.audio': {
@@ -109,6 +119,9 @@ const GroupChannelMessageParentMessage = ({ variant, message, childMessage, onPr
       case 'file.image': {
         return renderFileMessageAsPreview(getThumbnailUriFromFileMessage(parentMessage as SendbirdFileMessage));
       }
+      case 'file.voice': {
+        return renderMessageWithText(STRINGS.LABELS.VOICE_MESSAGE);
+      }
       default: {
         return null;
       }

package/src/components/GroupChannelMessageRenderer/index.tsx

@@ -1,7 +1,13 @@
-import React from 'react';
+import React, { useContext, useEffect, useRef } from 'react';
 
 import type { GroupChannelMessageProps, RegexTextPattern } from '@sendbird/uikit-react-native-foundation';
-import { Box, GroupChannelMessage, Text, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import {
+  Box,
+  GroupChannelMessage,
+  Text,
+  TypingIndicatorBubble,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
 import {
   SendbirdAdminMessage,
   SendbirdFileMessage,
@@ -10,14 +16,18 @@ import {
   calcMessageGrouping,
   getMessageType,
   isMyMessage,
+  isVoiceMessage,
   shouldRenderParentMessage,
   shouldRenderReaction,
   useIIFE,
 } from '@sendbird/uikit-utils';
 
+import { VOICE_MESSAGE_META_ARRAY_DURATION_KEY } from '../../constants';
+import { GroupChannelContexts } from '../../domain/groupChannel/module/moduleContext';
 import type { GroupChannelProps } from '../../domain/groupChannel/types';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../hooks/useContext';
 import SBUUtils from '../../libs/SBUUtils';
+import { TypingIndicatorType } from '../../types';
 import { ReactionAddons } from '../ReactionAddons';
 import GroupChannelMessageDateSeparator from './GroupChannelMessageDateSeparator';
 import GroupChannelMessageFocusAnimation from './GroupChannelMessageFocusAnimation';
@@ -36,10 +46,11 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
   prevMessage,
   nextMessage,
 }) => {
+  const playerUnsubscribes = useRef<(() => void)[]>([]);
   const { palette } = useUIKitTheme();
   const { sbOptions, currentUser, mentionManager } = useSendbirdChat();
   const { STRINGS } = useLocalization();
-  const { mediaService } = usePlatformService();
+  const { mediaService, playerService } = usePlatformService();
   const { groupWithPrev, groupWithNext } = calcMessageGrouping(
     Boolean(enableMessageGrouping),
     message,
@@ -58,6 +69,16 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     return null;
   });
 
+  const resetPlayer = async () => {
+    playerUnsubscribes.current.forEach((unsubscribe) => {
+      try {
+        unsubscribe();
+      } catch {}
+    });
+    playerUnsubscribes.current.length = 0;
+    await playerService.reset();
+  };
+
   const variant = isMyMessage(message, currentUser?.userId) ? 'outgoing' : 'incoming';
 
   const messageProps: Omit<GroupChannelMessageProps<SendbirdMessage>, 'message'> = {
@@ -72,6 +93,55 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     onPressMentionedUser: (mentionedUser) => {
       if (mentionedUser) onShowUserProfile?.(mentionedUser);
     },
+    onToggleVoiceMessage: async (state, setState) => {
+      if (isVoiceMessage(message) && message.sendingStatus === 'succeeded') {
+        if (playerService.uri === message.url) {
+          if (playerService.state === 'playing') {
+            await playerService.pause();
+          } else {
+            await playerService.play(message.url);
+          }
+        } else {
+          if (playerService.state !== 'idle') {
+            await resetPlayer();
+          }
+
+          const shouldSeekToTime = state.duration > state.currentTime && state.currentTime > 0;
+          let seekFinished = !shouldSeekToTime;
+
+          const forPlayback = playerService.addPlaybackListener(({ stopped, currentTime, duration }) => {
+            if (seekFinished) {
+              setState((prevState) => ({ ...prevState, currentTime: stopped ? 0 : currentTime, duration }));
+            }
+          });
+          const forState = playerService.addStateListener((state) => {
+            switch (state) {
+              case 'preparing':
+                setState((prevState) => ({ ...prevState, status: 'preparing' }));
+                break;
+              case 'playing':
+                setState((prevState) => ({ ...prevState, status: 'playing' }));
+                break;
+              case 'idle':
+              case 'paused': {
+                setState((prevState) => ({ ...prevState, status: 'paused' }));
+                break;
+              }
+              case 'stopped':
+                setState((prevState) => ({ ...prevState, status: 'paused' }));
+                break;
+            }
+          });
+          playerUnsubscribes.current.push(forPlayback, forState);
+
+          await playerService.play(message.url);
+          if (shouldSeekToTime) {
+            await playerService.seek(state.currentTime);
+            seekFinished = true;
+          }
+        }
+      }
+    },
     groupedWithPrev: groupWithPrev,
     groupedWithNext: groupWithNext,
     children: reactionChildren,
@@ -80,9 +150,10 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
     ) : null,
     parentMessage: shouldRenderParentMessage(message) ? (
       <GroupChannelMessageParentMessage
+        channel={channel}
+        message={message.parentMessage}
         variant={variant}
         childMessage={message}
-        message={message.parentMessage}
         onPress={onPressParentMessage}
       />
     ) : null,
@@ -184,6 +255,20 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
           />
         );
       }
+      case 'file.voice': {
+        return (
+          <GroupChannelMessage.VoiceFile
+            message={message as SendbirdFileMessage}
+            durationMetaArrayKey={VOICE_MESSAGE_META_ARRAY_DURATION_KEY}
+            onUnmount={() => {
+              if (isVoiceMessage(message) && playerService.uri === message.url) {
+                resetPlayer();
+              }
+            }}
+            {...messageProps}
+          />
+        );
+      }
       case 'unknown':
       default: {
         return <GroupChannelMessage.Unknown message={message} {...messageProps} />;
@@ -215,4 +300,28 @@ const GroupChannelMessageRenderer: GroupChannelProps['Fragment']['renderMessage'
   );
 };
 
+export const GroupChannelTypingIndicatorBubble = () => {
+  const { sbOptions } = useSendbirdChat();
+  const { publish } = useContext(GroupChannelContexts.PubSub);
+  const { typingUsers } = useContext(GroupChannelContexts.TypingIndicator);
+
+  const shouldRenderBubble = useIIFE(() => {
+    if (typingUsers.length === 0) return false;
+    if (!sbOptions.uikit.groupChannel.channel.enableTypingIndicator) return false;
+    if (!sbOptions.uikit.groupChannel.channel.typingIndicatorTypes.has(TypingIndicatorType.Bubble)) return false;
+    return true;
+  });
+
+  useEffect(() => {
+    if (shouldRenderBubble) publish({ type: 'TYPING_BUBBLE_RENDERED' });
+  }, [shouldRenderBubble]);
+
+  if (!shouldRenderBubble) return null;
+  return (
+    <Box paddingHorizontal={16} marginTop={4} marginBottom={16}>
+      <TypingIndicatorBubble typingUsers={typingUsers} />
+    </Box>
+  );
+};
+
 export default React.memo(GroupChannelMessageRenderer);

package/src/components/MessageSearchResultItem.tsx

@@ -10,7 +10,7 @@ import {
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdBaseMessage } from '@sendbird/uikit-utils';
-import { getFileIconFromMessage, useIIFE } from '@sendbird/uikit-utils';
+import { getFileIconFromMessage, isVoiceMessage, useIIFE } from '@sendbird/uikit-utils';
 
 import type { MessageSearchProps } from '../domain/messageSearch/types';
 import { useLocalization } from '../hooks/useContext';
@@ -21,6 +21,7 @@ const MessageSearchResultItem: MessageSearchProps['List']['renderSearchResultIte
 
   const fileIcon = useIIFE(() => {
     if (!message?.isFileMessage()) return undefined;
+    if (isVoiceMessage(message)) return undefined;
     return getFileIconFromMessage(message);
   });
 

package/src/components/OpenChannelMessageRenderer/index.tsx

@@ -63,6 +63,7 @@ const OpenChannelMessageRenderer: OpenChannelProps['Fragment']['renderMessage']
         }
       }
       case 'file':
+      case 'file.voice':
       case 'file.audio': {
         return <OpenChannelMessage.File message={message as SendbirdFileMessage} {...messageProps} />;
       }

package/src/components/ReactionBottomSheets/ReactionUserListBottomSheet.tsx

@@ -22,7 +22,7 @@ const ReactionUserListBottomSheet = ({
   reactionCtx,
   chatCtx,
   localizationCtx,
-  userProfileCtx,
+  onPressUserProfile,
 }: ReactionBottomSheetProps) => {
   const { width } = useWindowDimensions();
   const { bottom, left, right } = useSafeAreaInsets();
@@ -134,7 +134,7 @@ const ReactionUserListBottomSheet = ({
                 onPress={async () => {
                   if (user) {
                     await onClose();
-                    userProfileCtx.show(user);
+                    onPressUserProfile(user);
                   }
                 }}
                 style={styles.pageItem}

package/src/components/ReactionBottomSheets/index.tsx

@@ -1,9 +1,10 @@
 import type React from 'react';
 
+import type { SendbirdMember, SendbirdUser } from '@sendbird/uikit-utils';
+
 import type { LocalizationContext } from '../../contexts/LocalizationCtx';
 import type { ReactionContext } from '../../contexts/ReactionCtx';
 import type { SendbirdChatContext } from '../../contexts/SendbirdChatCtx';
-import type { UserProfileContext } from '../../contexts/UserProfileCtx';
 import ReactionList from './ReactionListBottomSheet';
 import UserList from './ReactionUserListBottomSheet';
 
@@ -12,10 +13,10 @@ export type ReactionBottomSheetProps = {
   visible: boolean;
   onDismiss: () => void;
   onClose: () => Promise<void>;
+  onPressUserProfile: (user: SendbirdUser | SendbirdMember) => void;
   chatCtx: GetFromContext<typeof SendbirdChatContext>;
   reactionCtx: GetFromContext<typeof ReactionContext>;
   localizationCtx: GetFromContext<typeof LocalizationContext>;
-  userProfileCtx: GetFromContext<typeof UserProfileContext>;
 };
 
 export const ReactionBottomSheets = {

package/src/components/StatusComposition.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 type Props = {
   loading?: boolean;
-  LoadingComponent?: JSX.Element;
+  LoadingComponent?: ReactNode;
   error?: boolean;
-  ErrorComponent?: JSX.Element;
+  ErrorComponent?: ReactNode;
   children: React.ReactNode;
 };
 const StatusComposition = ({ children, error, ErrorComponent, LoadingComponent, loading }: Props) => {

package/src/constants.ts

@@ -3,3 +3,5 @@ export const MESSAGE_SEARCH_SAFE_SCROLL_DELAY = 500;
 export const MESSAGE_FOCUS_ANIMATION_DELAY = 250;
 
 export const UNKNOWN_USER_ID = '##__USER_ID_IS_NOT_PROVIDED__##';
+export const VOICE_MESSAGE_META_ARRAY_DURATION_KEY = 'KEY_VOICE_MESSAGE_DURATION';
+export const VOICE_MESSAGE_META_ARRAY_MESSAGE_TYPE_KEY = 'KEY_INTERNAL_MESSAGE_TYPE';

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -17,6 +17,7 @@ import {
   getFileTypeFromMessage,
   isDifferentChannel,
   isMyMessage,
+  isVoiceMessage,
   useIIFE,
   useUniqHandlerId,
 } from '@sendbird/uikit-utils';
@@ -56,6 +57,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
   const fileType = useIIFE(() => {
     if (!channel.lastMessage?.isFileMessage()) return undefined;
     if (typingUsers.length > 0) return undefined;
+    if (isVoiceMessage(channel.lastMessage)) return undefined;
     return getFileTypeFromMessage(channel.lastMessage);
   });
 

package/src/containers/InternalErrorBoundaryContainer.tsx

@@ -14,7 +14,7 @@ const DefaultErrorBoundaryComponent = (props: ErrorBoundaryProps) => {
 
 class InternalErrorBoundaryContainer extends React.PureComponent<{
   onError?: (props: ErrorBoundaryProps) => void;
-  ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  ErrorInfoComponent?: (props: ErrorBoundaryProps) => React.ReactNode;
   children?: React.ReactNode;
 }> {
   static defaultProps = {

package/src/containers/SendbirdUIKitContainer.tsx

@@ -2,7 +2,7 @@ import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
-import Sendbird, { DeviceOsPlatform, SendbirdPlatform, SendbirdProduct } from '@sendbird/chat';
+import SendbirdChat, { DeviceOsPlatform, SendbirdChatParams, SendbirdPlatform, SendbirdProduct } from '@sendbird/chat';
 import { GroupChannelModule } from '@sendbird/chat/groupChannel';
 import { OpenChannelModule } from '@sendbird/chat/openChannel';
 import type { HeaderStyleContextType, UIKitTheme } from '@sendbird/uikit-react-native-foundation';
@@ -18,7 +18,6 @@ import { SBUConfig, UIKitConfigProvider } from '@sendbird/uikit-tools';
 import type {
   PartialDeep,
   SendbirdChatSDK,
-  SendbirdEncryption,
   SendbirdGroupChannel,
   SendbirdGroupChannelCreateParams,
   SendbirdMember,
@@ -38,6 +37,7 @@ import ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
 import MentionManager from '../libs/MentionManager';
+import VoiceMessageConfig, { VoiceMessageConfigInterface } from '../libs/VoiceMessageConfig';
 import StringSetEn from '../localization/StringSet.en';
 import type { StringSet } from '../localization/StringSet.type';
 import SBUDynamicModule from '../platform/dynamicModule';
@@ -46,13 +46,14 @@ import type {
   FileServiceInterface,
   MediaServiceInterface,
   NotificationServiceInterface,
+  PlayerServiceInterface,
+  RecorderServiceInterface,
 } 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');
-type UnimplementedFeatures = 'enableVoiceMessage' | 'threadReplySelectType' | 'replyType';
 export const SendbirdUIKit = Object.freeze({
   VERSION,
   PLATFORM: Platform.OS.toLowerCase(),
@@ -63,6 +64,27 @@ export const SendbirdUIKit = Object.freeze({
   },
 });
 
+type UnimplementedFeatures = 'threadReplySelectType' | 'replyType';
+export type ChatOmittedInitParams = Omit<
+  SendbirdChatParams<[GroupChannelModule, OpenChannelModule]>,
+  (typeof chatOmitKeys)[number]
+>;
+
+const chatOmitKeys = [
+  'appId',
+  'newInstance',
+  'modules',
+  'debugMode',
+  'appVersion',
+  'localCacheEnabled',
+  'useAsyncStorageStore',
+] as const;
+function sanitizeChatOptions<T extends Record<string, unknown>>(chatOptions: T): T {
+  const opts = { ...chatOptions };
+  chatOmitKeys.forEach((key) => delete opts[key]);
+  return opts;
+}
+
 export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   appId: string;
   platformServices: {
@@ -70,12 +92,14 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
     media: MediaServiceInterface;
+    player: PlayerServiceInterface;
+    recorder: RecorderServiceInterface;
   };
   chatOptions: {
     localCacheStorage: LocalCacheStorage;
-    localCacheEncryption?: SendbirdEncryption;
     onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
-  } & Partial<ChatRelatedFeaturesInUIKit>;
+  } & Partial<ChatOmittedInitParams> &
+    Partial<ChatRelatedFeaturesInUIKit>;
   uikitOptions?: PartialDeep<{
     common: SBUConfig['common'];
     groupChannel: Omit<SBUConfig['groupChannel']['channel'], UnimplementedFeatures> & {
@@ -98,7 +122,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   errorBoundary?: {
     disabled?: boolean;
     onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => React.ReactNode;
   };
   toast?: {
     dismissTimeout?: number;
@@ -110,24 +134,29 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
       users: SendbirdUser[] | SendbirdMember[],
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
+  reaction?: {
+    onPressUserProfile?: (user: SendbirdUser | SendbirdMember) => void;
+  };
   userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
   imageCompression?: Partial<ImageCompressionConfigInterface>;
+  voiceMessage?: PartialDeep<VoiceMessageConfigInterface>;
 }>;
 
-const SendbirdUIKitContainer = ({
-  children,
-  appId,
-  chatOptions,
-  uikitOptions,
-  platformServices,
-  localization,
-  styles,
-  errorBoundary,
-  toast,
-  userProfile,
-  userMention,
-  imageCompression,
-}: SendbirdUIKitContainerProps) => {
+const SendbirdUIKitContainer = (props: SendbirdUIKitContainerProps) => {
+  const {
+    children,
+    appId,
+    chatOptions,
+    uikitOptions,
+    platformServices,
+    localization,
+    styles,
+    errorBoundary,
+    toast,
+    userProfile,
+    reaction,
+  } = props;
+
   if (!chatOptions.localCacheStorage) {
     throw new Error('SendbirdUIKitContainer: chatOptions.localCacheStorage is required');
   }
@@ -139,35 +168,18 @@ const SendbirdUIKitContainer = ({
 
   const [internalStorage] = useState(() => new InternalLocalCacheStorage(chatOptions.localCacheStorage));
   const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(() => {
-    const sendbird = initializeSendbird(appId, { internalStorage, ...chatOptions });
+    const sendbird = initializeSendbird(appId, { internalStorage, ...sanitizeChatOptions(chatOptions) });
     unsubscribes.current = sendbird.unsubscribes;
     return sendbird.chatSDK;
   });
 
+  const { imageCompressionConfig, voiceMessageConfig, mentionConfig } = useConfigInstance(props);
   const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
-
-  const mentionManager = useMemo(() => {
-    const config = new MentionConfig({
-      mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
-      suggestionLimit: userMention?.suggestionLimit || MentionConfig.DEFAULT.SUGGESTION_LIMIT,
-      debounceMills: userMention?.debounceMills ?? MentionConfig.DEFAULT.DEBOUNCE_MILLS,
-      delimiter: MentionConfig.DEFAULT.DELIMITER,
-      trigger: MentionConfig.DEFAULT.TRIGGER,
-    });
-    return new MentionManager(config);
-  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
-
-  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]);
+  const mentionManager = useMemo(() => new MentionManager(mentionConfig), [mentionConfig]);
 
   useLayoutEffect(() => {
     if (!isFirstMount) {
-      const sendbird = initializeSendbird(appId, { internalStorage, ...chatOptions });
+      const sendbird = initializeSendbird(appId, { internalStorage, ...sanitizeChatOptions(chatOptions) });
       setSdkInstance(sendbird.chatSDK);
       unsubscribes.current = sendbird.unsubscribes;
     }
@@ -210,6 +222,7 @@ const SendbirdUIKitContainer = ({
           emojiManager={emojiManager}
           mentionManager={mentionManager}
           imageCompressionConfig={imageCompressionConfig}
+          voiceMessageConfig={voiceMessageConfig}
           enableAutoPushTokenRegistration={
             chatOptions.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
           }
@@ -224,6 +237,9 @@ const SendbirdUIKitContainer = ({
               notificationService={platformServices.notification}
               clipboardService={platformServices.clipboard}
               mediaService={platformServices.media}
+              playerService={platformServices.player}
+              recorderService={platformServices.recorder}
+              voiceMessageConfig={voiceMessageConfig}
             >
               <UIKitThemeProvider theme={styles?.theme ?? LightUIKitTheme}>
                 <HeaderStyleProvider
@@ -232,12 +248,8 @@ const SendbirdUIKitContainer = ({
                   statusBarTranslucent={styles?.statusBarTranslucent ?? true}
                 >
                   <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <UserProfileProvider
-                      onCreateChannel={userProfile?.onCreateChannel}
-                      onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
-                      statusBarTranslucent={styles?.statusBarTranslucent ?? true}
-                    >
-                      <ReactionProvider>
+                    <UserProfileProvider {...userProfile} statusBarTranslucent={styles?.statusBarTranslucent ?? true}>
+                      <ReactionProvider {...reaction}>
                         <LocalizationContext.Consumer>
                           {(value) => {
                             const STRINGS = value?.STRINGS || defaultStringSet;
@@ -270,25 +282,22 @@ const SendbirdUIKitContainer = ({
   );
 };
 
-const initializeSendbird = (
-  appId: string,
-  options: {
-    internalStorage?: InternalLocalCacheStorage;
-    onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK;
-    localCacheEncryption?: SendbirdEncryption;
-  },
-) => {
+interface InitOptions extends ChatOmittedInitParams {
+  internalStorage: InternalLocalCacheStorage;
+  onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK;
+}
+const initializeSendbird = (appId: string, options: InitOptions) => {
   let chatSDK: SendbirdChatSDK;
   const unsubscribes: Array<() => void> = [];
-  const { internalStorage, localCacheEncryption, onInitialized } = options;
+  const { internalStorage, onInitialized, ...chatInitParams } = options;
 
-  chatSDK = Sendbird.init({
+  chatSDK = SendbirdChat.init({
+    ...chatInitParams,
     appId,
     newInstance: true,
     modules: [new GroupChannelModule(), new OpenChannelModule()],
-    localCacheEnabled: Boolean(internalStorage),
+    localCacheEnabled: true,
     useAsyncStorageStore: internalStorage as never,
-    localCacheEncryption,
   });
 
   if (onInitialized) {
@@ -368,4 +377,39 @@ function getReactNativeVersion() {
   return `${major}.${minor}.${patch}`;
 }
 
+const useConfigInstance = ({ imageCompression, userMention, voiceMessage }: SendbirdUIKitContainerProps) => {
+  const mentionConfig = useMemo(() => {
+    return new MentionConfig({
+      mentionLimit: userMention?.mentionLimit || MentionConfig.DEFAULT.MENTION_LIMIT,
+      suggestionLimit: userMention?.suggestionLimit || MentionConfig.DEFAULT.SUGGESTION_LIMIT,
+      debounceMills: userMention?.debounceMills ?? MentionConfig.DEFAULT.DEBOUNCE_MILLS,
+      delimiter: MentionConfig.DEFAULT.DELIMITER,
+      trigger: MentionConfig.DEFAULT.TRIGGER,
+    });
+  }, [userMention?.mentionLimit, userMention?.suggestionLimit, userMention?.debounceMills]);
+
+  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]);
+
+  const voiceMessageConfig = useMemo(() => {
+    return new VoiceMessageConfig({
+      recorder: {
+        minDuration: voiceMessage?.recorder?.minDuration ?? VoiceMessageConfig.DEFAULT.RECORDER.MIN_DURATION,
+        maxDuration: voiceMessage?.recorder?.maxDuration ?? VoiceMessageConfig.DEFAULT.RECORDER.MAX_DURATION,
+      },
+    });
+  }, [voiceMessage?.recorder?.minDuration, voiceMessage?.recorder?.maxDuration]);
+
+  return {
+    mentionConfig,
+    imageCompressionConfig,
+    voiceMessageConfig,
+  };
+};
+
 export default SendbirdUIKitContainer;