@sendbird/uikit-react-native 1.0.0 → 1.1.0

package/src/domain/groupChannelList/component/GroupChannelListTypeSelector.tsx

@@ -22,11 +22,11 @@ const TYPE_ICONS: Record<GroupChannelType, keyof typeof Icon.Assets> = {
   'BROADCAST': 'broadcast',
 };
 
-const GroupChannelListTypeSelector: React.FC<GroupChannelListProps['TypeSelector']> = ({
+const GroupChannelListTypeSelector = ({
   Header = DefaultHeader,
   skipTypeSelection,
   onSelectType,
-}) => {
+}: GroupChannelListProps['TypeSelector']) => {
   const { statusBarTranslucent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
   const typeSelector = useContext(GroupChannelListContexts.TypeSelector);
@@ -82,11 +82,11 @@ const GroupChannelListTypeSelector: React.FC<GroupChannelListProps['TypeSelector
   );
 };
 
-const DefaultTypeIcon: React.FC<{ type: GroupChannelType }> = ({ type }) => {
+const DefaultTypeIcon = ({ type }: { type: GroupChannelType }) => {
   return <Icon size={24} icon={TYPE_ICONS[type]} containerStyle={styles.icon} />;
 };
 
-const DefaultTypeText: React.FC<{ type: GroupChannelType }> = ({ type }) => {
+const DefaultTypeText = ({ type }: { type: GroupChannelType }) => {
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
   return (

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

@@ -4,7 +4,7 @@ import { NOOP } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization } from '../../../hooks/useContext';
-import type { GroupChannelListContextsType } from '../types';
+import type { GroupChannelListContextsType, GroupChannelListModule } from '../types';
 
 export const GroupChannelListContexts: GroupChannelListContextsType = {
   Fragment: createContext({
@@ -18,7 +18,7 @@ export const GroupChannelListContexts: GroupChannelListContextsType = {
   }),
 };
 
-export const GroupChannelListContextsProvider: React.FC = ({ children }) => {
+export const GroupChannelListContextsProvider: GroupChannelListModule['Provider'] = ({ children }) => {
   const { STRINGS } = useLocalization();
 
   // Type selector

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;
@@ -80,7 +81,7 @@ export interface GroupChannelListContextsType {
   }>;
 }
 export interface GroupChannelListModule {
-  Provider: React.FC;
+  Provider: CommonComponent;
   Header: CommonComponent<GroupChannelListProps['Header']>;
   List: CommonComponent<GroupChannelListProps['List']>;
   TypeSelector: CommonComponent<GroupChannelListProps['TypeSelector']>;
@@ -88,5 +89,5 @@ export interface GroupChannelListModule {
   StatusLoading: CommonComponent;
 }
 
-export type GroupChannelListFragment = React.FC<GroupChannelListProps['Fragment']>;
+export type GroupChannelListFragment = CommonComponent<GroupChannelListProps['Fragment']>;
 export type GroupChannelType = 'GROUP' | 'SUPER_GROUP' | 'BROADCAST';

package/src/domain/groupChannelSettings/component/GroupChannelSettingsHeader.tsx

@@ -5,7 +5,7 @@ import { Icon, Text, useHeaderStyle, useUIKitTheme } from '@sendbird/uikit-react
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
-const GroupChannelSettingsHeader: React.FC<GroupChannelSettingsProps['Header']> = ({ onPressHeaderLeft }) => {
+const GroupChannelSettingsHeader = ({ onPressHeaderLeft }: GroupChannelSettingsProps['Header']) => {
   const { colors } = useUIKitTheme();
   const { headerTitle, headerRight, onPressHeaderRight } = useContext(GroupChannelSettingsContexts.Fragment);
 

package/src/domain/groupChannelSettings/component/GroupChannelSettingsInfo.tsx

@@ -9,7 +9,7 @@ import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
-const GroupChannelSettingsInfo: React.FC<GroupChannelSettingsProps['Info']> = () => {
+const GroupChannelSettingsInfo = (_: GroupChannelSettingsProps['Info']) => {
   const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
   const { currentUser } = useSendbirdChat();
   const { STRINGS } = useLocalization();

package/src/domain/groupChannelSettings/component/GroupChannelSettingsMenu.tsx

@@ -8,11 +8,11 @@ import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
-const GroupChannelSettingsMenu: React.FC<GroupChannelSettingsProps['Menu']> = ({
+const GroupChannelSettingsMenu = ({
   onPressMenuMembers,
   onPressMenuLeaveChannel,
   menuItemsCreator = (menu) => menu,
-}) => {
+}: GroupChannelSettingsProps['Menu']) => {
   const { sdk } = useSendbirdChat();
   const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
   const { STRINGS } = useLocalization();

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

@@ -14,7 +14,7 @@ import {
 
 import ProviderLayout from '../../../components/ProviderLayout';
 import { useLocalization, usePlatformService, useSendbirdChat } from '../../../hooks/useContext';
-import type { GroupChannelSettingsContextsType, GroupChannelSettingsProps } from '../types';
+import type { GroupChannelSettingsContextsType, GroupChannelSettingsModule } from '../types';
 
 export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
   Fragment: createContext({
@@ -26,10 +26,7 @@ export const GroupChannelSettingsContexts: GroupChannelSettingsContextsType = {
 };
 
 const HOOK_NAME = 'GroupChannelSettingsContextsProvider';
-export const GroupChannelSettingsContextsProvider: React.FC<GroupChannelSettingsProps['Provider']> = ({
-  children,
-  channel,
-}) => {
+export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['Provider'] = ({ children, channel }) => {
   const uniqId = useUniqId(HOOK_NAME);
   const forceUpdate = useForceUpdate();
   const { STRINGS } = useLocalization();
@@ -44,16 +41,11 @@ export const GroupChannelSettingsContextsProvider: React.FC<GroupChannelSettings
     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/domain/groupChannelSettings/types.ts

@@ -41,10 +41,10 @@ export interface GroupChannelSettingsContextsType {
   }>;
 }
 export interface GroupChannelSettingsModule {
-  Provider: React.FC<GroupChannelSettingsProps['Provider']>;
+  Provider: CommonComponent<GroupChannelSettingsProps['Provider']>;
   Header: CommonComponent<GroupChannelSettingsProps['Header']>;
   Info: CommonComponent<GroupChannelSettingsProps['Info']>;
   Menu: CommonComponent<GroupChannelSettingsProps['Menu']>;
 }
 
-export type GroupChannelSettingsFragment = React.FC<GroupChannelSettingsProps['Fragment']>;
+export type GroupChannelSettingsFragment = CommonComponent<GroupChannelSettingsProps['Fragment']>;

package/src/domain/groupChannelUserList/types.ts

@@ -1,8 +1,7 @@
-import type React from 'react';
-
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdGroupChannelParams } from '@sendbird/uikit-utils';
 
+import type { CommonComponent } from '../../types';
 import type { GroupChannelType } from '../groupChannelList/types';
 import type { UserListProps } from '../userList/types';
 
@@ -23,7 +22,7 @@ export interface GroupChannelCreateProps<User> {
     renderUser?: UserListProps<User>['List']['renderUser'];
   };
 }
-export type GroupChannelCreateFragment<User> = React.FC<GroupChannelCreateProps<User>['Fragment']>;
+export type GroupChannelCreateFragment<User> = CommonComponent<GroupChannelCreateProps<User>['Fragment']>;
 
 export interface GroupChannelInviteProps<User> {
   Fragment: {
@@ -36,7 +35,7 @@ export interface GroupChannelInviteProps<User> {
     sortComparator?: UseUserListOptions<User>['sortComparator'];
   };
 }
-export type GroupChannelInviteFragment<User> = React.FC<GroupChannelInviteProps<User>['Fragment']>;
+export type GroupChannelInviteFragment<User> = CommonComponent<GroupChannelInviteProps<User>['Fragment']>;
 
 export interface GroupChannelMembersProps<User> {
   Fragment: {
@@ -47,4 +46,4 @@ export interface GroupChannelMembersProps<User> {
     renderUser?: UserListProps<User>['List']['renderUser'];
   };
 }
-export type GroupChannelMembersFragment<User> = React.FC<GroupChannelMembersProps<User>['Fragment']>;
+export type GroupChannelMembersFragment<User> = CommonComponent<GroupChannelMembersProps<User>['Fragment']>;

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

@@ -1,10 +1,11 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import React, { createContext, useState } from 'react';
 
 import type { ContextValue } from '@sendbird/uikit-utils';
 import { NOOP } from '@sendbird/uikit-utils';
 
 import ProviderLayout from '../../../components/ProviderLayout';
-import type { UserListContextsType, UserListProps } from '../types';
+import type { UserListContextsType, UserListModule } from '../types';
 
 export const UserListContexts: UserListContextsType<unknown> = {
   Fragment: createContext({
@@ -16,12 +17,7 @@ export const UserListContexts: UserListContextsType<unknown> = {
     setSelectedUsers: NOOP,
   }),
 };
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const UserListContextsProvider: React.FC<UserListProps<any>['Provider']> = ({
-  children,
-  headerTitle,
-  headerRight,
-}) => {
+export const UserListContextsProvider: UserListModule<any>['Provider'] = ({ children, headerTitle, headerRight }) => {
   const [selectedUsers, setSelectedUsers] = useState<unknown[]>([]);
 
   return (

package/src/domain/userList/types.ts

@@ -56,7 +56,7 @@ export interface UserListContextsType<User> {
 }
 
 export interface UserListModule<User> {
-  Provider: React.FC<UserListProps<User>['Provider']>;
+  Provider: CommonComponent<UserListProps<User>['Provider']>;
   Header: CommonComponent<UserListProps<User>['Header']>;
   List: CommonComponent<UserListProps<User>['List']>;
   StatusEmpty: CommonComponent;

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/fragments/createGroupChannelSettingsFragment.tsx

@@ -13,14 +13,7 @@ const createGroupChannelSettingsFragment = (
 ): GroupChannelSettingsFragment => {
   const GroupChannelSettingsModule = createGroupChannelSettingsModule(initModule);
 
-  return ({
-    onPressHeaderLeft = NOOP,
-    channel,
-    onPressMenuMembers,
-    onPressMenuLeaveChannel,
-    menuItemsCreator,
-    children,
-  }) => {
+  return ({ onPressHeaderLeft = NOOP, channel, onPressMenuMembers, onPressMenuLeaveChannel, menuItemsCreator }) => {
     const { colors } = useUIKitTheme();
     const { left, right } = useSafeAreaInsets();
 
@@ -40,7 +33,6 @@ const createGroupChannelSettingsFragment = (
             onPressMenuMembers={onPressMenuMembers}
             onPressMenuLeaveChannel={onPressMenuLeaveChannel}
           />
-          {children}
         </ScrollView>
       </GroupChannelSettingsModule.Provider>
     );

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;
 };