@sendbird/uikit-react-native 2.1.0 → 2.3.0

package/src/containers/SendbirdUIKitContainer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Platform } from 'react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
@@ -21,14 +21,20 @@ import type {
   SendbirdMember,
   SendbirdUser,
 } from '@sendbird/uikit-utils';
+import { useIsFirstMount } from '@sendbird/uikit-utils';
 
-import { LocalizationProvider } from '../contexts/LocalizationCtx';
+import { LocalizationContext, LocalizationProvider } from '../contexts/LocalizationCtx';
 import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
+import { ReactionProvider } from '../contexts/ReactionCtx';
 import type { UIKitFeaturesInSendbirdChatContext } from '../contexts/SendbirdChatCtx';
 import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
 import { UserProfileProvider } from '../contexts/UserProfileCtx';
-import { useLocalization } from '../hooks/useContext';
+import EmojiManager from '../libs/EmojiManager';
+import type { ImageCompressionConfigInterface } from '../libs/ImageCompressionConfig';
+import ImageCompressionConfig from '../libs/ImageCompressionConfig';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
+import MentionConfig, { MentionConfigInterface } from '../libs/MentionConfig';
+import MentionManager from '../libs/MentionManager';
 import StringSetEn from '../localization/StringSet.en';
 import type { StringSet } from '../localization/StringSet.type';
 import SBUDynamicModule from '../platform/dynamicModule';
@@ -47,6 +53,14 @@ const NetInfo = SBUDynamicModule.get('@react-native-community/netinfo', 'warn');
 export const SendbirdUIKit = Object.freeze({
   VERSION,
   PLATFORM: Platform.OS.toLowerCase(),
+  DEFAULT: {
+    AUTO_PUSH_TOKEN_REGISTRATION: true,
+    CHANNEL_LIST_TYPING_INDICATOR: false,
+    CHANNEL_LIST_MESSAGE_RECEIPT_STATUS: false,
+    USE_USER_ID_FOR_NICKNAME: false,
+    USER_MENTION: false,
+    IMAGE_COMPRESSION: true,
+  },
 });
 
 export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
@@ -55,7 +69,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     file: FileServiceInterface;
     notification: NotificationServiceInterface;
     clipboard: ClipboardServiceInterface;
-    media?: MediaServiceInterface;
+    media: MediaServiceInterface;
   };
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
@@ -71,6 +85,10 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
     defaultHeaderHeight?: number;
     HeaderComponent?: HeaderStyleContextType['HeaderComponent'];
   };
+  errorBoundary?: {
+    onError?: (props: ErrorBoundaryProps) => void;
+    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
+  };
   toast?: {
     dismissTimeout?: number;
   };
@@ -81,10 +99,8 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
       users: SendbirdUser[] | SendbirdMember[],
     ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
   };
-  errorBoundary?: {
-    onError?: (props: ErrorBoundaryProps) => void;
-    ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
-  };
+  userMention?: Pick<Partial<MentionConfigInterface>, 'mentionLimit' | 'suggestionLimit' | 'debounceMills'>;
+  imageCompression?: Partial<ImageCompressionConfigInterface>;
 }>;
 
 const SendbirdUIKitContainer = ({
@@ -94,75 +110,92 @@ const SendbirdUIKitContainer = ({
   platformServices,
   localization,
   styles,
+  errorBoundary,
   toast,
   userProfile,
-  errorBoundary,
+  userMention,
+  imageCompression,
 }: SendbirdUIKitContainerProps) => {
-  const unsubscribes = useRef<(() => void)[]>([]).current;
-  const getSendbirdSDK = () => {
-    let sdk: SendbirdChatSDK;
-
-    sdk = Sendbird.init({
-      appId,
-      modules: [new GroupChannelModule(), new OpenChannelModule()],
-      localCacheEnabled: Boolean(chatOptions?.localCacheStorage),
-      // @ts-ignore
-      useAsyncStorageStore: chatOptions?.localCacheStorage
-        ? new InternalLocalCacheStorage(chatOptions.localCacheStorage)
-        : undefined,
-    });
+  const defaultStringSet = localization?.stringSet ?? StringSetEn;
 
-    if (chatOptions?.onInitialized) {
-      sdk = chatOptions?.onInitialized(sdk);
-    }
+  const isFirstMount = useIsFirstMount();
+  const unsubscribes = useRef<Array<() => void>>([]);
+  const internalStorage = useMemo(
+    () => (chatOptions?.localCacheStorage ? new InternalLocalCacheStorage(chatOptions.localCacheStorage) : undefined),
+    [chatOptions?.localCacheStorage],
+  );
 
-    if (SendbirdUIKit.VERSION) {
-      sdk.addExtension('sb_uikit', SendbirdUIKit.VERSION);
-    }
+  const [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(() => {
+    const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
+    unsubscribes.current = sendbird.unsubscribes;
+    return sendbird.chatSDK;
+  });
 
-    if (SendbirdUIKit.PLATFORM) {
-      sdk.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
-    }
+  const emojiManager = useMemo(() => new EmojiManager(internalStorage), [internalStorage]);
 
-    if (NetInfo?.addEventListener) {
-      const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
-        const unsubscribe = NetInfo.addEventListener((state) => {
-          const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
-          if (online && callbackType === 'online') callback();
-          if (!online && callbackType === 'offline') callback();
-        });
-        unsubscribes.push(unsubscribe);
-        return unsubscribe;
-      };
-      sdk.setOnlineListener?.((onOnline) => listener(onOnline, 'online'));
-      sdk.setOfflineListener?.((onOffline) => listener(onOffline, 'offline'));
-    }
-    return sdk;
-  };
+  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, chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION);
+  }, [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 [sdkInstance, setSdkInstance] = useState<SendbirdChatSDK>(getSendbirdSDK);
+  useLayoutEffect(() => {
+    if (!isFirstMount) {
+      const sendbird = initializeSendbird(appId, internalStorage, chatOptions?.onInitialized);
+      setSdkInstance(sendbird.chatSDK);
+      unsubscribes.current = sendbird.unsubscribes;
+    }
 
-  useEffect(() => {
-    setSdkInstance(getSendbirdSDK);
     return () => {
-      unsubscribes.forEach((u) => {
-        try {
-          u();
-        } catch {}
-      });
+      if (!isFirstMount) {
+        unsubscribes.current.forEach((u) => {
+          try {
+            u();
+          } catch {}
+        });
+      }
     };
-  }, [appId, chatOptions?.localCacheStorage]);
+  }, [appId, internalStorage]);
 
   return (
     <SafeAreaProvider>
       <SendbirdChatProvider
         sdkInstance={sdkInstance}
-        enableAutoPushTokenRegistration={chatOptions?.enableAutoPushTokenRegistration ?? true}
-        enableChannelListTypingIndicator={chatOptions?.enableChannelListTypingIndicator ?? false}
-        enableChannelListMessageReceiptStatus={chatOptions?.enableChannelListMessageReceiptStatus ?? false}
-        enableUseUserIdForNickname={chatOptions?.enableUseUserIdForNickname ?? false}
+        emojiManager={emojiManager}
+        mentionManager={mentionManager}
+        imageCompressionConfig={imageCompressionConfig}
+        enableAutoPushTokenRegistration={
+          chatOptions?.enableAutoPushTokenRegistration ?? SendbirdUIKit.DEFAULT.AUTO_PUSH_TOKEN_REGISTRATION
+        }
+        enableChannelListTypingIndicator={
+          chatOptions?.enableChannelListTypingIndicator ?? SendbirdUIKit.DEFAULT.CHANNEL_LIST_TYPING_INDICATOR
+        }
+        enableChannelListMessageReceiptStatus={
+          chatOptions?.enableChannelListMessageReceiptStatus ??
+          SendbirdUIKit.DEFAULT.CHANNEL_LIST_MESSAGE_RECEIPT_STATUS
+        }
+        enableUseUserIdForNickname={
+          chatOptions?.enableUseUserIdForNickname ?? SendbirdUIKit.DEFAULT.USE_USER_ID_FOR_NICKNAME
+        }
+        enableUserMention={chatOptions?.enableUserMention ?? SendbirdUIKit.DEFAULT.USER_MENTION}
+        enableImageCompression={chatOptions?.enableImageCompression ?? SendbirdUIKit.DEFAULT.IMAGE_COMPRESSION}
       >
-        <LocalizationProvider stringSet={localization?.stringSet ?? StringSetEn}>
+        <LocalizationProvider stringSet={defaultStringSet}>
           <PlatformServiceProvider
             fileService={platformServices.file}
             notificationService={platformServices.notification}
@@ -175,16 +208,36 @@ const SendbirdUIKitContainer = ({
                 defaultTitleAlign={styles?.defaultHeaderTitleAlign ?? 'left'}
                 statusBarTranslucent={styles?.statusBarTranslucent ?? true}
               >
-                <LocalizedDialogProvider>
-                  <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <UserProfileProvider
-                      onCreateChannel={userProfile?.onCreateChannel}
-                      onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
-                    >
-                      <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
-                    </UserProfileProvider>
-                  </ToastProvider>
-                </LocalizedDialogProvider>
+                <ToastProvider dismissTimeout={toast?.dismissTimeout}>
+                  <UserProfileProvider
+                    onCreateChannel={userProfile?.onCreateChannel}
+                    onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
+                  >
+                    <ReactionProvider>
+                      <LocalizationContext.Consumer>
+                        {(value) => {
+                          const STRINGS = value?.STRINGS || defaultStringSet;
+                          return (
+                            <DialogProvider
+                              defaultLabels={{
+                                alert: { ok: STRINGS.DIALOG.ALERT_DEFAULT_OK },
+                                prompt: {
+                                  ok: STRINGS.DIALOG.PROMPT_DEFAULT_OK,
+                                  cancel: STRINGS.DIALOG.PROMPT_DEFAULT_CANCEL,
+                                  placeholder: STRINGS.DIALOG.PROMPT_DEFAULT_PLACEHOLDER,
+                                },
+                              }}
+                            >
+                              <InternalErrorBoundaryContainer {...errorBoundary}>
+                                {children}
+                              </InternalErrorBoundaryContainer>
+                            </DialogProvider>
+                          );
+                        }}
+                      </LocalizationContext.Consumer>
+                    </ReactionProvider>
+                  </UserProfileProvider>
+                </ToastProvider>
               </HeaderStyleProvider>
             </UIKitThemeProvider>
           </PlatformServiceProvider>
@@ -194,24 +247,48 @@ const SendbirdUIKitContainer = ({
   );
 };
 
-const LocalizedDialogProvider = ({ children }: React.PropsWithChildren) => {
-  const { STRINGS } = useLocalization();
-  return (
-    <DialogProvider
-      defaultLabels={{
-        alert: {
-          ok: STRINGS.DIALOG.ALERT_DEFAULT_OK,
-        },
-        prompt: {
-          ok: STRINGS.DIALOG.PROMPT_DEFAULT_OK,
-          cancel: STRINGS.DIALOG.PROMPT_DEFAULT_CANCEL,
-          placeholder: STRINGS.DIALOG.PROMPT_DEFAULT_PLACEHOLDER,
-        },
-      }}
-    >
-      {children}
-    </DialogProvider>
-  );
+const initializeSendbird = (
+  appId: string,
+  internalStorage?: InternalLocalCacheStorage,
+  onInitialized?: (sdk: SendbirdChatSDK) => SendbirdChatSDK,
+) => {
+  const unsubscribes: Array<() => void> = [];
+  let chatSDK: SendbirdChatSDK;
+
+  chatSDK = Sendbird.init({
+    appId,
+    modules: [new GroupChannelModule(), new OpenChannelModule()],
+    localCacheEnabled: Boolean(internalStorage),
+    useAsyncStorageStore: internalStorage as never,
+    newInstance: true,
+  });
+
+  if (onInitialized) {
+    chatSDK = onInitialized(chatSDK);
+  }
+
+  if (SendbirdUIKit.VERSION) {
+    chatSDK.addExtension('sb_uikit', SendbirdUIKit.VERSION);
+  }
+
+  if (SendbirdUIKit.PLATFORM) {
+    chatSDK.addExtension('device-os-platform', SendbirdUIKit.PLATFORM);
+  }
+
+  if (NetInfo?.addEventListener) {
+    const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
+      const unsubscribe = NetInfo.addEventListener((state) => {
+        const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
+        if (online && callbackType === 'online') callback();
+        if (!online && callbackType === 'offline') callback();
+      });
+      unsubscribes.push(unsubscribe);
+      return unsubscribe;
+    };
+    chatSDK.setOnlineListener?.((onOnline) => listener(onOnline, 'online'));
+    chatSDK.setOfflineListener?.((onOffline) => listener(onOffline, 'offline'));
+  }
+  return { chatSDK, unsubscribes };
 };
 
 export default SendbirdUIKitContainer;

package/src/contexts/PlatformServiceCtx.tsx

@@ -11,10 +11,17 @@ type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
-  mediaService?: MediaServiceInterface;
+  mediaService: MediaServiceInterface;
 }>;
 
-export const PlatformServiceContext = React.createContext<Props | null>(null);
+export type PlatformServiceContextType = {
+  fileService: FileServiceInterface;
+  clipboardService: ClipboardServiceInterface;
+  notificationService: NotificationServiceInterface;
+  mediaService: MediaServiceInterface;
+};
+
+export const PlatformServiceContext = React.createContext<PlatformServiceContextType | null>(null);
 export const PlatformServiceProvider = ({
   children,
   fileService,

package/src/contexts/ReactionCtx.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useContext, useReducer, useRef, useState } from 'react';
+
+import type { SendbirdBaseChannel, SendbirdBaseMessage } from '@sendbird/uikit-utils';
+import { NOOP } from '@sendbird/uikit-utils';
+
+import { ReactionBottomSheets } from '../components/ReactionBottomSheets';
+import { LocalizationContext } from '../contexts/LocalizationCtx';
+import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
+import { UserProfileContext } from '../contexts/UserProfileCtx';
+
+type State = {
+  message?: SendbirdBaseMessage;
+  channel?: SendbirdBaseChannel;
+};
+export type ReactionContextType = {
+  openReactionList(param: Required<State>): void;
+  openReactionUserList(param: Required<State> & { focusIndex?: number }): void;
+  updateReactionFocusedItem(param?: State): void;
+  focusIndex: number;
+} & State;
+
+type Props = React.PropsWithChildren<{}>;
+
+export const ReactionContext = React.createContext<ReactionContextType | null>(null);
+export const ReactionProvider = ({ children }: Props) => {
+  const chatCtx = useContext(SendbirdChatContext);
+  const localizationCtx = useContext(LocalizationContext);
+  const userProfileCtx = useContext(UserProfileContext);
+  if (!chatCtx) throw new Error('SendbirdChatContext is not provided');
+  if (!localizationCtx) throw new Error('LocalizationContext is not provided');
+  if (!userProfileCtx) throw new Error('UserProfileContext is not provided');
+
+  const [state, setState] = useReducer((prev: State, next: State) => ({ ...prev, ...next }), {});
+  const [reactionListVisible, setReactionListVisible] = useState(false);
+  const [reactionUserListVisible, setReactionUserListVisible] = useState(false);
+  const [reactionUserListFocusIndex, setReactionUserListFocusIndex] = useState(0);
+
+  const closeResolver = useRef<() => void>(NOOP);
+
+  const openReactionList: ReactionContextType['openReactionList'] = useCallback((params) => {
+    setState(params);
+    setReactionListVisible(true);
+  }, []);
+
+  const openReactionUserList: ReactionContextType['openReactionUserList'] = useCallback(
+    ({ channel, message, focusIndex = 0 }) => {
+      setState({ channel, message });
+      setReactionUserListFocusIndex(focusIndex);
+      setReactionUserListVisible(true);
+    },
+    [],
+  );
+
+  const updateReactionFocusedItem: ReactionContextType['updateReactionFocusedItem'] = useCallback((params) => {
+    if (params) setState(params);
+    else setState({});
+  }, []);
+
+  const createOnCloseWithResolver = (callback: () => void) => {
+    return () => {
+      return new Promise<void>((resolve) => {
+        closeResolver.current = resolve;
+        callback();
+      });
+    };
+  };
+
+  const reactionCtx = {
+    ...state,
+    openReactionList,
+    openReactionUserList,
+    updateReactionFocusedItem,
+    focusIndex: reactionUserListFocusIndex,
+  };
+
+  const sheetProps = {
+    chatCtx,
+    reactionCtx,
+    localizationCtx,
+    userProfileCtx,
+    onDismiss: () => {
+      setState({});
+      closeResolver.current?.();
+    },
+  };
+
+  return (
+    <ReactionContext.Provider value={reactionCtx}>
+      {children}
+      <ReactionBottomSheets.UserList
+        {...sheetProps}
+        visible={reactionUserListVisible}
+        onClose={createOnCloseWithResolver(() => setReactionUserListVisible(false))}
+      />
+      <ReactionBottomSheets.ReactionList
+        {...sheetProps}
+        visible={reactionListVisible}
+        onClose={createOnCloseWithResolver(() => setReactionListVisible(false))}
+      />
+    </ReactionContext.Provider>
+  );
+};

package/src/contexts/SendbirdChatCtx.tsx

@@ -1,5 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { AppState, AppStateStatus } from 'react-native';
+import React, { useCallback, useState } from 'react';
 
 import { useAppFeatures } from '@sendbird/uikit-chat-hooks';
 import type {
@@ -8,8 +7,11 @@ import type {
   SendbirdUser,
   SendbirdUserUpdateParams,
 } from '@sendbird/uikit-utils';
-import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils';
+import { confirmAndMarkAsDelivered, useAppState, useForceUpdate } from '@sendbird/uikit-utils';
 
+import type EmojiManager from '../libs/EmojiManager';
+import type ImageCompressionConfig from '../libs/ImageCompressionConfig';
+import type MentionManager from '../libs/MentionManager';
 import type { FileType } from '../platform/types';
 
 export interface UIKitFeaturesInSendbirdChatContext {
@@ -17,14 +19,22 @@ export interface UIKitFeaturesInSendbirdChatContext {
   enableChannelListTypingIndicator: boolean;
   enableChannelListMessageReceiptStatus: boolean;
   enableUseUserIdForNickname: boolean;
+  enableUserMention: boolean;
+  enableImageCompression: boolean;
 }
 
 interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
   sdkInstance: SendbirdChatSDK;
+  emojiManager: EmojiManager;
+  mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
 }
 
-type Context = {
+export type SendbirdChatContextType = {
   sdk: SendbirdChatSDK;
+  emojiManager: EmojiManager;
+  mentionManager: MentionManager;
+  imageCompressionConfig: ImageCompressionConfig;
   currentUser?: SendbirdUser;
   setCurrentUser: React.Dispatch<React.SetStateAction<SendbirdUser | undefined>>;
 
@@ -38,6 +48,8 @@ type Context = {
     channelListTypingIndicatorEnabled: boolean;
     channelListMessageReceiptStatusEnabled: boolean;
     useUserIdForNicknameEnabled: boolean;
+    userMentionEnabled: boolean;
+    imageCompressionEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -47,34 +59,47 @@ type Context = {
   };
 };
 
-export const SendbirdChatContext = React.createContext<Context | null>(null);
+export const SendbirdChatContext = React.createContext<SendbirdChatContextType | null>(null);
 export const SendbirdChatProvider = ({
   children,
   sdkInstance,
+  emojiManager,
+  mentionManager,
+  imageCompressionConfig,
   enableAutoPushTokenRegistration,
   enableChannelListMessageReceiptStatus,
   enableChannelListTypingIndicator,
   enableUseUserIdForNickname,
+  enableUserMention,
+  enableImageCompression,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
   const appFeatures = useAppFeatures(sdkInstance);
 
-  const setCurrentUser: Context['setCurrentUser'] = useCallback((user) => {
+  const setCurrentUser: SendbirdChatContextType['setCurrentUser'] = useCallback((user) => {
     // NOTE: Sendbird SDK handle User object is always same object, so force update after setCurrentUser
     _setCurrentUser(user);
     forceUpdate();
   }, []);
 
-  const updateCurrentUserInfo: Context['updateCurrentUserInfo'] = useCallback(
+  const updateCurrentUserInfo: SendbirdChatContextType['updateCurrentUserInfo'] = useCallback(
     async (nickname, profile) => {
       let user = currentUser;
 
       if (!user) throw new Error('Current user is not defined, please connect using `useConnection()` hook first');
 
-      const params: SendbirdUserUpdateParams = { nickname };
+      const params: SendbirdUserUpdateParams = {};
 
-      if (typeof profile === 'string') {
+      if (!nickname) {
+        params.nickname = user.nickname;
+      } else {
+        params.nickname = nickname;
+      }
+
+      if (!profile) {
+        params.profileUrl = user.profileUrl;
+      } else if (typeof profile === 'string') {
         params.profileUrl = profile;
       } else if (typeof profile === 'object') {
         params.profileImage = profile;
@@ -90,26 +115,24 @@ export const SendbirdChatProvider = ({
     [sdkInstance, currentUser, setCurrentUser],
   );
 
-  const markAsDeliveredWithChannel: Context['markAsDeliveredWithChannel'] = useCallback(
+  const markAsDeliveredWithChannel: SendbirdChatContextType['markAsDeliveredWithChannel'] = useCallback(
     (channel: SendbirdGroupChannel) => {
       if (appFeatures.deliveryReceiptEnabled) confirmAndMarkAsDelivered([channel]);
     },
     [sdkInstance, appFeatures.deliveryReceiptEnabled],
   );
 
-  useEffect(() => {
-    const listener = (status: AppStateStatus) => {
-      // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
-      if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
-      else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
-    };
-
-    const subscriber = AppState.addEventListener('change', listener);
-    return () => subscriber.remove();
-  }, [sdkInstance]);
+  useAppState('change', (status) => {
+    // 'active' | 'background' | 'inactive' | 'unknown' | 'extension';
+    if (status === 'active') sdkInstance.connectionState === 'CLOSED' && sdkInstance.setForegroundState();
+    else if (status === 'background') sdkInstance.connectionState === 'OPEN' && sdkInstance.setBackgroundState();
+  });
 
-  const value: Context = {
+  const value: SendbirdChatContextType = {
     sdk: sdkInstance,
+    emojiManager,
+    mentionManager,
+    imageCompressionConfig,
     currentUser,
     setCurrentUser,
 
@@ -122,6 +145,8 @@ export const SendbirdChatProvider = ({
       channelListTypingIndicatorEnabled: enableChannelListTypingIndicator,
       channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
       useUserIdForNicknameEnabled: enableUseUserIdForNickname,
+      userMentionEnabled: enableUserMention,
+      imageCompressionEnabled: enableImageCompression,
     },
   };
 

package/src/contexts/UserProfileCtx.tsx

@@ -29,6 +29,8 @@ type Props = React.PropsWithChildren<{
   onBeforeCreateChannel?: OnBeforeCreateChannel;
 }>;
 
+let WARN_onCreateChannel = false;
+
 export const UserProfileContext = React.createContext<UserProfileContextType | null>(null);
 export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
   const chatContext = useContext(SendbirdChatContext);
@@ -37,6 +39,13 @@ export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateC
   if (!chatContext) throw new Error('SendbirdChatContext is not provided');
   if (!localizationContext) throw new Error('LocalizationContext is not provided');
 
+  if (__DEV__ && !WARN_onCreateChannel && !onCreateChannel) {
+    Logger.warn(
+      'You should pass `userProfile.onCreateChannel` prop to SendbirdUIKitContainer if want to use message in a user profile',
+    );
+    WARN_onCreateChannel = true;
+  }
+
   const { bottom, left, right } = useSafeAreaInsets();
 
   const [user, setUser] = useState<SendbirdUser | SendbirdMember>();