@sendbird/uikit-react-native 1.0.2 → 1.1.0

package/src/contexts/PlatformService.tsx

@@ -1,17 +1,29 @@
 import React from 'react';
 
-import type { ClipboardServiceInterface, FileServiceInterface, NotificationServiceInterface } from '../platform/types';
+import type {
+  ClipboardServiceInterface,
+  FileServiceInterface,
+  MediaServiceInterface,
+  NotificationServiceInterface,
+} from '../platform/types';
 
 type Props = React.PropsWithChildren<{
   fileService: FileServiceInterface;
   clipboardService: ClipboardServiceInterface;
   notificationService: NotificationServiceInterface;
+  mediaService?: MediaServiceInterface;
 }>;
 
 export const PlatformServiceContext = React.createContext<Props | null>(null);
-export const PlatformServiceProvider = ({ children, fileService, clipboardService, notificationService }: Props) => {
+export const PlatformServiceProvider = ({
+  children,
+  fileService,
+  clipboardService,
+  notificationService,
+  mediaService,
+}: Props) => {
   return (
-    <PlatformServiceContext.Provider value={{ fileService, clipboardService, notificationService }}>
+    <PlatformServiceContext.Provider value={{ fileService, clipboardService, notificationService, mediaService }}>
       {children}
     </PlatformServiceContext.Provider>
   );

package/src/contexts/SendbirdChat.tsx

@@ -11,8 +11,8 @@ type Props = React.PropsWithChildren<{
   sdkInstance: SendbirdChatSDK;
 
   enableAutoPushTokenRegistration: boolean;
-  // enableChannelListTypingIndicator: boolean;
-  // enableChannelListMessageReceiptStatus: boolean;
+  enableChannelListTypingIndicator: boolean;
+  enableChannelListMessageReceiptStatus: boolean;
 }>;
 
 type Context = {
@@ -27,8 +27,8 @@ type Context = {
   features: {
     // UIKit features
     autoPushTokenRegistrationEnabled: boolean;
-    // channelListTypingIndicatorEnabled: boolean;
-    // channelListMessageReceiptStateEnabled: boolean;
+    channelListTypingIndicatorEnabled: boolean;
+    channelListMessageReceiptStatusEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -39,7 +39,13 @@ type Context = {
 };
 
 export const SendbirdChatContext = React.createContext<Context | null>(null);
-export const SendbirdChatProvider = ({ children, sdkInstance, enableAutoPushTokenRegistration }: Props) => {
+export const SendbirdChatProvider = ({
+  children,
+  sdkInstance,
+  enableAutoPushTokenRegistration,
+  enableChannelListMessageReceiptStatus,
+  enableChannelListTypingIndicator,
+}: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
   const appFeatures = useAppFeatures(sdkInstance);
@@ -103,6 +109,8 @@ export const SendbirdChatProvider = ({ children, sdkInstance, enableAutoPushToke
     features: {
       ...appFeatures,
       autoPushTokenRegistrationEnabled: enableAutoPushTokenRegistration,
+      channelListTypingIndicatorEnabled: enableChannelListTypingIndicator,
+      channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
     },
   };
 

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -38,7 +38,7 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
           icon: 'camera',
           onPress: async () => {
             const photo = await fileService.openCamera({
-              mediaType: 'photo',
+              mediaType: 'all',
               onOpenFailureWithToastMessage: () => toast.show(STRINGS.TOAST.OPEN_CAMERA_ERROR, 'error'),
             });
 

package/src/domain/groupChannel/component/GroupChannelMessageList.tsx

@@ -19,11 +19,13 @@ import {
   getFileType,
   isMyMessage,
   messageKeyExtractor,
+  toMegabyte,
   useFreshCallback,
 } from '@sendbird/uikit-utils';
 
 import type { ChatFlatListRef } from '../../../components/ChatFlatList';
 import ChatFlatList from '../../../components/ChatFlatList';
+import { DEPRECATION_WARNING } from '../../../constants';
 import { useLocalization, usePlatformService } from '../../../hooks/useContext';
 import { GroupChannelContexts } from '../module/moduleContext';
 import type { GroupChannelProps } from '../types';
@@ -44,6 +46,7 @@ const GroupChannelMessageList = ({
   onResendFailedMessage,
   onDeleteMessage,
   onPressImageMessage,
+  onPressMediaMessage,
   flatListProps,
   enableMessageGrouping,
 }: GroupChannelProps['MessageList']) => {
@@ -56,6 +59,7 @@ const GroupChannelMessageList = ({
   const getMessagePressActions = useGetMessagePressActions({
     onDeleteMessage,
     onPressImageMessage,
+    onPressMediaMessage,
     currentUserId,
     onResendFailedMessage,
   });
@@ -135,15 +139,15 @@ const GroupChannelMessageList = ({
 };
 
 type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
-const toMegabyte = (byte: number) => byte / 1024 / 1024;
 const useGetMessagePressActions = ({
   onPressImageMessage,
+  onPressMediaMessage,
   onDeleteMessage,
   onResendFailedMessage,
   currentUserId,
 }: Pick<
   GroupChannelProps['MessageList'],
-  'onDeleteMessage' | 'onResendFailedMessage' | 'onPressImageMessage' | 'currentUserId'
+  'onDeleteMessage' | 'onResendFailedMessage' | 'currentUserId' | 'onPressImageMessage' | 'onPressMediaMessage'
 >) => {
   const { colors } = useUIKitTheme();
   const { STRINGS } = useLocalization();
@@ -253,10 +257,23 @@ const useGetMessagePressActions = ({
       }
 
       const fileType = getFileType(msg.type || getFileExtension(msg.name));
-      if (fileType === 'image') {
-        response.onPress = () => onPressImageMessage?.(msg, getAvailableUriFromFileMessage(msg));
-      } else {
-        response.onPress = () => Linking.openURL(msg.url).catch();
+      switch (fileType) {
+        case 'image':
+        case 'video':
+        case 'audio': {
+          response.onPress = () => {
+            if (onPressImageMessage && fileType === 'image') {
+              Logger.warn(DEPRECATION_WARNING.GROUP_CHANNEL.ON_PRESS_IMAGE_MESSAGE);
+              onPressImageMessage(msg, getAvailableUriFromFileMessage(msg));
+            }
+            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
+          };
+          break;
+        }
+        default: {
+          response.onPress = () => Linking.openURL(msg.url).catch();
+          break;
+        }
       }
     }
 

package/src/domain/groupChannel/module/moduleContext.tsx

@@ -41,20 +41,13 @@ export const GroupChannelContextsProvider: GroupChannelModule['Provider'] = ({
   const [typingUsers, setTypingUsers] = useState<SendbirdUser[]>([]);
   const [editMessage, setEditMessage] = useState<SendbirdUserMessage | SendbirdFileMessage>();
 
-  useChannelHandler(
-    sdk,
-    `GroupChannelContextsProvider_${id}`,
-    {
-      onTypingStatusUpdated(eventChannel) {
-        if (isDifferentChannel(channel, eventChannel)) return;
-        if (!enableTypingIndicator) return;
-
-        const usersWithoutMe = eventChannel.getTypingUsers().filter((u) => u.userId !== currentUser?.userId);
-        setTypingUsers(usersWithoutMe);
-      },
+  useChannelHandler(sdk, `GroupChannelContextsProvider_${id}`, {
+    onTypingStatusUpdated(eventChannel) {
+      if (isDifferentChannel(channel, eventChannel)) return;
+      if (!enableTypingIndicator) return;
+      setTypingUsers(eventChannel.getTypingUsers());
     },
-    [channel, currentUser?.userId, enableTypingIndicator],
-  );
+  });
 
   return (
     <ProviderLayout>

package/src/domain/groupChannel/types.ts

@@ -28,7 +28,7 @@ export interface GroupChannelProps {
     onBeforeSendUserMessage?: (
       params: SendbirdUserMessageParams,
     ) => SendbirdUserMessageParams | Promise<SendbirdUserMessageParams>;
-    onPressImageMessage?: GroupChannelProps['MessageList']['onPressImageMessage'];
+    onPressMediaMessage?: GroupChannelProps['MessageList']['onPressMediaMessage'];
 
     renderMessage?: GroupChannelProps['MessageList']['renderMessage'];
     renderNewMessagesButton?: GroupChannelProps['MessageList']['renderNewMessagesButton'];
@@ -42,6 +42,9 @@ export interface GroupChannelProps {
     sortComparator?: UseGroupChannelMessagesOptions['sortComparator'];
     collectionCreator?: UseGroupChannelMessagesOptions['collectionCreator'];
     queryCreator?: UseGroupChannelMessagesOptions['queryCreator'];
+
+    /** @deprecated `onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead **/
+    onPressImageMessage?: GroupChannelProps['MessageList']['onPressImageMessage'];
   };
   Header: {
     onPressHeaderLeft: () => void;
@@ -59,7 +62,7 @@ export interface GroupChannelProps {
 
     onResendFailedMessage: (failedMessage: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
     onDeleteMessage: (message: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
-    onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
+    onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
 
     renderMessage: (props: {
       message: SendbirdMessage;
@@ -81,6 +84,9 @@ export interface GroupChannelProps {
       onPress: () => void;
     }>;
     flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+
+    /** @deprecated `onPressImageMessage` is deprecated, please use `onPressMediaMessage` instead **/
+    onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
   };
   Input: {
     channel: SendbirdGroupChannel;

package/src/domain/groupChannelList/types.ts

@@ -42,6 +42,7 @@ export interface GroupChannelListProps {
     groupChannels: SendbirdGroupChannel[];
     /** Method to render GroupChannel preview **/
     renderGroupChannelPreview: (
+      // FIXME/BREAKING: Changed to props object
       channel: SendbirdGroupChannel,
       onLongPressChannel: () => void,
     ) => React.ReactElement | null;

package/src/domain/groupChannelSettings/module/moduleContext.tsx

@@ -41,16 +41,11 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     forceUpdate();
   };
 
-  useChannelHandler(
-    sdk,
-    `${HOOK_NAME}_${uniqId}`,
-    {
-      onChannelChanged: onChannelChanged,
-      onChannelFrozen: onChannelChanged,
-      onChannelUnfrozen: onChannelChanged,
-    },
-    [activeChannel],
-  );
+  useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+    onChannelChanged: onChannelChanged,
+    onChannelFrozen: onChannelChanged,
+    onChannelUnfrozen: onChannelChanged,
+  });
 
   const toast = useToast();
   const { openSheet } = useBottomSheet();

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -1,8 +1,8 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
-import { Logger, PASS, SendbirdUser } from '@sendbird/uikit-utils';
+import { Logger, PASS, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';
@@ -50,45 +50,42 @@ const createGroupChannelCreateFragment = <UserType,>(
       sortComparator,
     });
 
-    const _renderUser: NonNullable<typeof renderUser> = useCallback(
-      (user, selectedUsers, setSelectedUsers) => {
-        if (queryCreator && !renderUser) {
-          throw new Error('You should provide "renderUser" when providing "queryCreator"');
-        }
-        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
-
-        const sbUser = user as unknown as SendbirdUser;
-        const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
-        const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
-
-        const isMe = sbUser.userId === currentUser?.userId;
-        if (isMe) return null;
-
-        const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
-        const isSelected = userIdx > -1;
-
-        return (
-          <TouchableOpacity
-            activeOpacity={0.7}
-            onPress={() => {
-              sbSetSelectedUsers(([...draft]) => {
-                if (isSelected) draft.splice(userIdx, 1);
-                else draft.push(sbUser);
-                return draft;
-              });
-            }}
-          >
-            <UserSelectableBar
-              uri={sbUser.profileUrl}
-              name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
-              selected={isSelected}
-              disabled={false}
-            />
-          </TouchableOpacity>
-        );
-      },
-      [renderUser, queryCreator],
-    );
+    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((user, selectedUsers, setSelectedUsers) => {
+      if (queryCreator && !renderUser) {
+        throw new Error('You should provide "renderUser" when providing "queryCreator"');
+      }
+      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+
+      const sbUser = user as unknown as SendbirdUser;
+      const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
+      const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
+
+      const isMe = sbUser.userId === currentUser?.userId;
+      if (isMe) return null;
+
+      const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
+      const isSelected = userIdx > -1;
+
+      return (
+        <TouchableOpacity
+          activeOpacity={0.7}
+          onPress={() => {
+            sbSetSelectedUsers(([...draft]) => {
+              if (isSelected) draft.splice(userIdx, 1);
+              else draft.push(sbUser);
+              return draft;
+            });
+          }}
+        >
+          <UserSelectableBar
+            uri={sbUser.profileUrl}
+            name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
+            selected={isSelected}
+            disabled={false}
+          />
+        </TouchableOpacity>
+      );
+    });
 
     return (
       <UserListModule.Provider

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,7 +1,7 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
-import { NOOP, PASS, messageComparator } from '@sendbird/uikit-utils';
+import { NOOP, PASS, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
 
 import MessageRenderer from '../components/MessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
@@ -22,7 +22,8 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     enableTypingIndicator = true,
     onPressHeaderLeft = NOOP,
     onPressHeaderRight = NOOP,
-    onPressImageMessage = NOOP,
+    onPressImageMessage,
+    onPressMediaMessage = NOOP,
     onChannelDeleted = NOOP,
     onBeforeSendFileMessage = PASS,
     onBeforeSendUserMessage = PASS,
@@ -57,13 +58,10 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       enableCollectionWithoutLocalCache: true,
     });
 
-    const _renderMessage: GroupChannelProps['MessageList']['renderMessage'] = useCallback(
-      (props) => {
-        if (renderMessage) return renderMessage(props);
-        return <MessageRenderer {...props} />;
-      },
-      [renderMessage],
-    );
+    const _renderMessage: GroupChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {
+      if (renderMessage) return renderMessage(props);
+      return <MessageRenderer {...props} />;
+    });
 
     const memoizedFlatListProps = useMemo(
       () => ({
@@ -74,42 +72,33 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
       [loading, flatListProps],
     );
 
-    const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useCallback(
-      async (file) => {
-        const params = new sdk.FileMessageParams();
-        params.file = file;
-        const processedParams = await onBeforeSendFileMessage(params);
-        await sendFileMessage(processedParams);
-      },
-      [sdk, sendFileMessage, onBeforeSendFileMessage],
-    );
-
-    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useCallback(
-      async (text) => {
-        const params = new sdk.UserMessageParams();
-        params.message = text;
-        const processedParams = await onBeforeSendUserMessage(params);
-        await sendUserMessage(processedParams);
-      },
-      [sdk, sendUserMessage, onBeforeSendUserMessage],
-    );
-    const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useCallback(
+    const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useFreshCallback(async (file) => {
+      const params = new sdk.FileMessageParams();
+      params.file = file;
+      const processedParams = await onBeforeSendFileMessage(params);
+      await sendFileMessage(processedParams);
+    });
+    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useFreshCallback(async (text) => {
+      const params = new sdk.UserMessageParams();
+      params.message = text;
+      const processedParams = await onBeforeSendUserMessage(params);
+      await sendUserMessage(processedParams);
+    });
+    const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useFreshCallback(
       async (editedFile, message) => {
         const params = new sdk.FileMessageParams();
         params.file = editedFile;
         const processedParams = await onBeforeSendFileMessage(params);
         await updateFileMessage(message.messageId, processedParams);
       },
-      [sdk, updateFileMessage, onBeforeSendFileMessage],
     );
-    const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useCallback(
+    const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useFreshCallback(
       async (editedText, message) => {
         const params = new sdk.UserMessageParams();
         params.message = editedText;
         const processedParams = await onBeforeSendUserMessage(params);
         await updateUserMessage(message.messageId, processedParams);
       },
-      [sdk, updateUserMessage, onBeforeSendUserMessage],
     );
 
     return (
@@ -135,6 +124,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             onResendFailedMessage={resendMessage}
             onDeleteMessage={deleteMessage}
             onPressImageMessage={onPressImageMessage}
+            onPressMediaMessage={onPressMediaMessage}
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input

package/src/fragments/createGroupChannelListFragment.tsx

@@ -1,22 +1,19 @@
-import React, { useCallback, useEffect } from 'react';
-import { AppState, Pressable } from 'react-native';
+import React, { useEffect } from 'react';
+import { AppState } from 'react-native';
 
 import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
-import { GroupChannelPreview } from '@sendbird/uikit-react-native-foundation';
-import { Logger, PASS, channelComparator, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+import { Logger, PASS, channelComparator, useFreshCallback } from '@sendbird/uikit-utils';
 
-import ChannelCover from '../components/ChannelCover';
+import GroupChannelPreviewContainer from '../components/GroupChannelPreviewContainer';
 import StatusComposition from '../components/StatusComposition';
-import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
 import createGroupChannelListModule from '../domain/groupChannelList/module/createGroupChannelListModule';
 import type {
   GroupChannelListFragment,
   GroupChannelListModule,
   GroupChannelListProps,
 } from '../domain/groupChannelList/types';
-import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+import { useSendbirdChat } from '../hooks/useContext';
 
-const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
 const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListModule>): GroupChannelListFragment => {
   const GroupChannelListModule = createGroupChannelListModule(initModule);
   return ({
@@ -31,7 +28,6 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
     menuItemCreator = PASS,
   }) => {
     const { sdk, currentUser, features, markAsDeliveredWithChannel } = useSendbirdChat();
-    const { STRINGS } = useLocalization();
     const { groupChannels, next, loading } = useGroupChannelList(sdk, currentUser?.userId, {
       queryCreator,
       sortComparator,
@@ -47,35 +43,17 @@ const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListMod
       }, []);
     }
 
-    const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useCallback(
+    const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useFreshCallback(
       (channel, onLongPressChannel) => {
         if (renderGroupChannelPreview) return renderGroupChannelPreview(channel, onLongPressChannel);
         return (
-          <Pressable
+          <GroupChannelPreviewContainer
+            channel={channel}
             onPress={() => onPressChannel(channel)}
-            onLongPress={onLongPressChannel}
-            delayLongPress={DEFAULT_LONG_PRESS_DELAY}
-          >
-            <GroupChannelPreview
-              customCover={<ChannelCover channel={channel} size={56} />}
-              coverUrl={channel.coverUrl}
-              title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}
-              titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}
-              body={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel)}
-              badgeCount={channel.unreadMessageCount}
-              bodyIcon={
-                channel.lastMessage?.isFileMessage()
-                  ? iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))]
-                  : undefined
-              }
-              frozen={channel.isFrozen}
-              notificationOff={channel.myPushTriggerOption === 'off'}
-              memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
-            />
-          </Pressable>
+            onLongPress={() => onLongPressChannel()}
+          />
         );
       },
-      [STRINGS, onPressChannel, currentUser?.userId],
     );
 
     if (!currentUser) {

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -26,46 +26,41 @@ const createGroupChannelMembersFragment = (
 
     const { STRINGS } = useLocalization();
 
-    useChannelHandler(
-      sdk,
-      `${name}_${uniqId}`,
-      {
-        onUserEntered(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onUserLeft(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onUserJoined(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onUserUnmuted(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onUserUnbanned(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onUserBanned(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onUserMuted(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onChannelMemberCountChanged(channels) {
-          if (channels.find((c) => c.url === channel.url)) forceUpdate();
-        },
-        onChannelChanged(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onChannelFrozen(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
-        onChannelUnfrozen(channel) {
-          if (channel.url === activeChannel.url) forceUpdate();
-        },
+    useChannelHandler(sdk, `${name}_${uniqId}`, {
+      onUserEntered(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
       },
-      [activeChannel],
-    );
+      onUserLeft(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onUserJoined(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onUserUnmuted(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onUserUnbanned(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onUserBanned(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onUserMuted(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onChannelMemberCountChanged(channels) {
+        if (channels.find((c) => c.url === channel.url)) forceUpdate();
+      },
+      onChannelChanged(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onChannelFrozen(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+      onChannelUnfrozen(channel) {
+        if (channel.url === activeChannel.url) forceUpdate();
+      },
+    });
 
     const _renderUser: NonNullable<typeof renderUser> = useCallback(
       (user, selectedUsers, setSelectedUsers) => {

package/src/hooks/useContext.ts

@@ -1,13 +1,11 @@
-import React, { useContext } from 'react';
+import { useContext } from 'react';
 
-import { LocalizationContext, LocalizationContextType } from '../contexts/Localization';
+import { LocalizationContext } from '../contexts/Localization';
 import { PlatformServiceContext } from '../contexts/PlatformService';
 import { SendbirdChatContext } from '../contexts/SendbirdChat';
 
 export const useLocalization = () => {
-  const value = useContext<LocalizationContextType | null>(
-    LocalizationContext as React.Context<LocalizationContextType | null>,
-  );
+  const value = useContext(LocalizationContext);
   if (!value) throw new Error('LocalizationContext is not provided');
   return value;
 };