@sendbird/uikit-react-native 2.4.0 → 2.4.2

package/src/components/ChannelInput/SendInput.tsx

@@ -120,7 +120,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               // Image compression
               if (
                 isImage(mediaFile.uri, mediaFile.type) &&
-                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+                shouldCompressImage(mediaFile.type, features.imageCompressionEnabled)
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
@@ -170,7 +170,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               // Image compression
               if (
                 isImage(mediaFile.uri, mediaFile.type) &&
-                shouldCompressImage(mediaFile.uri, features.imageCompressionEnabled)
+                shouldCompressImage(mediaFile.type, features.imageCompressionEnabled)
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({
@@ -203,7 +203,7 @@ const SendInput = forwardRef<RNTextInput, SendInputProps>(function SendInput(
               // Image compression
               if (
                 isImage(documentFile.uri, documentFile.type) &&
-                shouldCompressImage(documentFile.uri, features.imageCompressionEnabled)
+                shouldCompressImage(documentFile.type, features.imageCompressionEnabled)
               ) {
                 await SBUUtils.safeRun(async () => {
                   const compressed = await mediaService.compressImage({

package/src/containers/SendbirdUIKitContainer.tsx

@@ -21,7 +21,7 @@ import type {
   SendbirdMember,
   SendbirdUser,
 } from '@sendbird/uikit-utils';
-import { useIsFirstMount } from '@sendbird/uikit-utils';
+import { NOOP, useIsFirstMount } from '@sendbird/uikit-utils';
 
 import { LocalizationContext, LocalizationProvider } from '../contexts/LocalizationCtx';
 import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
@@ -287,9 +287,28 @@ const initializeSendbird = (
   }
 
   if (NetInfo?.addEventListener) {
+    try {
+      // NOTE: For removing buggy behavior of NetInfo.addEventListener
+      //  When you first add an event listener, it is assumed that the initialization of the internal event detector is done simultaneously.
+      //  In other words, when you call the first event listener two events are triggered immediately
+      //   - the one that is called when adding the event listener
+      //   - and the internal initialization event
+      NetInfo.addEventListener(NOOP)();
+    } catch {}
+
     const listener = (callback: () => void, callbackType: 'online' | 'offline') => {
+      let callCount = 0;
       const unsubscribe = NetInfo.addEventListener((state) => {
         const online = Boolean(state.isConnected) || Boolean(state.isInternetReachable);
+
+        // NOTE: When NetInfo.addEventListener is called
+        //  the event is immediately triggered regardless of whether the event actually occurred.
+        //  This is why it filters the first event.
+        if (callCount === 0) {
+          callCount++;
+          return;
+        }
+
         if (online && callbackType === 'online') callback();
         if (!online && callbackType === 'offline') callback();
       });

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

@@ -110,7 +110,6 @@ const GroupChannelMessageList = ({
         onLeaveScrollBottom={onLeaveScrollBottom}
         currentUserId={currentUserId}
         {...flatListProps}
-        listKey={`group-channel-messages-${channel.url}`}
         ref={scrollRef}
         data={messages}
         renderItem={renderItem}

package/src/domain/groupChannelBannedUsers/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type GroupChannelBannedUsersProps = {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: GroupChannelBannedUsersProps['Header']['onPressHeaderLeft'];
     renderUser?: GroupChannelBannedUsersProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;

package/src/domain/groupChannelMutedMembers/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type GroupChannelMutedMembersProps = {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: GroupChannelMutedMembersProps['Header']['onPressHeaderLeft'];
     renderUser?: GroupChannelMutedMembersProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;

package/src/domain/groupChannelOperators/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -10,6 +11,7 @@ export type GroupChannelOperatorsProps = {
     onPressHeaderLeft: GroupChannelOperatorsProps['Header']['onPressHeaderLeft'];
     onPressHeaderRight: GroupChannelOperatorsProps['Header']['onPressHeaderRight'];
     renderUser?: GroupChannelOperatorsProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;

package/src/domain/groupChannelUserList/types.ts

@@ -42,28 +42,26 @@ export type GroupChannelInviteFragment<User extends UserStruct> = CommonComponen
   GroupChannelInviteProps<User>['Fragment']
 >;
 
-export interface GroupChannelMembersProps<User extends UserStruct> {
+export interface GroupChannelMembersProps {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: () => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    sortComparator?: UseUserListOptions<SendbirdMember>['sortComparator'];
+    renderUser?: UserListProps<SendbirdMember>['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelMembersFragment<User extends UserStruct> = CommonComponent<
-  GroupChannelMembersProps<User>['Fragment']
->;
+export type GroupChannelMembersFragment = CommonComponent<GroupChannelMembersProps['Fragment']>;
 
-export interface GroupChannelRegisterOperatorProps<User extends UserStruct = SendbirdMember> {
+export interface GroupChannelRegisterOperatorProps {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: (channel: SendbirdGroupChannel) => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    sortComparator?: UseUserListOptions<SendbirdMember>['sortComparator'];
+    renderUser?: UserListProps<SendbirdMember>['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdMember>['queryCreator'];
   };
 }
-export type GroupChannelRegisterOperatorFragment<User extends UserStruct> = CommonComponent<
-  GroupChannelRegisterOperatorProps<User>['Fragment']
->;
+export type GroupChannelRegisterOperatorFragment = CommonComponent<GroupChannelRegisterOperatorProps['Fragment']>;

package/src/domain/openChannel/component/OpenChannelMessageList.tsx

@@ -106,7 +106,6 @@ const OpenChannelMessageList = ({
         onLeaveScrollBottom={onLeaveScrollBottom}
         currentUserId={currentUserId}
         {...flatListProps}
-        listKey={`open-channel-messages-${channel.url}`}
         ref={scrollRef}
         data={messages}
         renderItem={renderItem}

package/src/domain/openChannelBannedUsers/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type OpenChannelBannedUsersProps = {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: OpenChannelBannedUsersProps['Header']['onPressHeaderLeft'];
     renderUser?: OpenChannelBannedUsersProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;

package/src/domain/openChannelMutedParticipants/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -9,6 +10,7 @@ export type OpenChannelMutedParticipantsProps = {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: OpenChannelMutedParticipantsProps['Header']['onPressHeaderLeft'];
     renderUser?: OpenChannelMutedParticipantsProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdRestrictedUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;

package/src/domain/openChannelOperators/types.ts

@@ -1,5 +1,6 @@
 import type React from 'react';
 
+import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdOpenChannel, SendbirdUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -10,6 +11,7 @@ export type OpenChannelOperatorsProps = {
     onPressHeaderLeft: OpenChannelOperatorsProps['Header']['onPressHeaderLeft'];
     onPressHeaderRight: OpenChannelOperatorsProps['Header']['onPressHeaderRight'];
     renderUser?: OpenChannelOperatorsProps['List']['renderUser'];
+    queryCreator?: UseUserListOptions<SendbirdUser>['queryCreator'];
   };
   Header: {
     onPressHeaderLeft: () => void;

package/src/domain/openChannelUserList/types.ts

@@ -1,30 +1,30 @@
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdOpenChannel, SendbirdParticipant, UserStruct } from '@sendbird/uikit-utils';
+import type { SendbirdOpenChannel, SendbirdParticipant, SendbirdUser } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 import type { UserListProps } from '../userList/types';
 
-export interface OpenChannelParticipantsProps<User extends UserStruct> {
+export interface OpenChannelParticipantsProps {
   Fragment: {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: () => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    renderUser?: UserListProps<SendbirdParticipant>['List']['renderUser'];
+    // NOTE: SDK does not migrate the response type of query to Participant from User yet due to backward compat.
+    queryCreator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['queryCreator'];
+    sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
   };
 }
-export type OpenChannelParticipantsFragment<User extends UserStruct> = CommonComponent<
-  OpenChannelParticipantsProps<User>['Fragment']
->;
+export type OpenChannelParticipantsFragment = CommonComponent<OpenChannelParticipantsProps['Fragment']>;
 
-export interface OpenChannelRegisterOperatorProps<User extends UserStruct = SendbirdParticipant> {
+export interface OpenChannelRegisterOperatorProps {
   Fragment: {
     channel: SendbirdOpenChannel;
     onPressHeaderLeft: () => void;
     onPressHeaderRight: (channel: SendbirdOpenChannel) => void;
-    sortComparator?: UseUserListOptions<User>['sortComparator'];
-    renderUser?: UserListProps<User>['List']['renderUser'];
+    renderUser?: UserListProps<SendbirdParticipant>['List']['renderUser'];
+    // NOTE: SDK does not migrate the response type of query to Participant from User yet due to backward compat.
+    queryCreator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['queryCreator'];
+    sortComparator?: UseUserListOptions<SendbirdUser | SendbirdParticipant>['sortComparator'];
   };
 }
-export type OpenChannelRegisterOperatorFragment<User extends UserStruct> = CommonComponent<
-  OpenChannelRegisterOperatorProps<User>['Fragment']
->;
+export type OpenChannelRegisterOperatorFragment = CommonComponent<OpenChannelRegisterOperatorProps['Fragment']>;

package/src/fragments/createGroupChannelBannedUsersFragment.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, useFreshCallback } from '@sendbird/uikit-utils';
+import { useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -18,14 +18,17 @@ const createGroupChannelBannedUsersFragment = (
 ): GroupChannelBannedUsersFragment => {
   const GroupChannelBannedUsersModule = createGroupChannelBannedUsersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createBannedUserListQuery({ limit: 20 }),
+  }) => {
     const { STRINGS } = useLocalization();
     const { currentUser, sdk } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, {
-      queryCreator: () => channel.createBannedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, { queryCreator });
 
     const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
       if (renderUser) return renderUser(props);

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -17,10 +17,17 @@ const RETURN_EMPTY_STRING = () => '';
 
 const createGroupChannelMembersFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
-): GroupChannelMembersFragment<SendbirdMember> => {
+): GroupChannelMembersFragment => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
-  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    onPressHeaderRight,
+    renderUser,
+    sortComparator,
+    queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelMembersFragment');
 
     const refreshSchedule = useRef<NodeJS.Timeout>();
@@ -30,7 +37,8 @@ const createGroupChannelMembersFragment = (
     const { show } = useUserProfile();
 
     const { users, refresh, loading, next, error, upsertUser, deleteUser } = useUserList(sdk, {
-      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
+      queryCreator,
+      sortComparator,
     });
 
     useChannelHandler(sdk, handlerId, {

package/src/fragments/createGroupChannelMutedMembersFragment.tsx

@@ -18,16 +18,19 @@ const createGroupChannelMutedMembersFragment = (
 ): GroupChannelMutedMembersFragment => {
   const GroupChannelMutedMembersModule = createGroupChannelMutedMembersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft = NOOP,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
-      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(sdk, handlerId, {
       onUserMuted(eventChannel, user) {

package/src/fragments/createGroupChannelNotificationsFragment.tsx

@@ -13,12 +13,11 @@ const createGroupChannelNotificationsFragment = (
 ): GroupChannelNotificationsFragment => {
   const GroupChannelNotificationsModule = createGroupChannelNotificationsModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, children, channel }) => {
+  return ({ onPressHeaderLeft = NOOP, channel }) => {
     return (
       <GroupChannelNotificationsModule.Provider channel={channel}>
         <GroupChannelNotificationsModule.Header onPressHeaderLeft={onPressHeaderLeft} />
         <GroupChannelNotificationsModule.View />
-        {children}
       </GroupChannelNotificationsModule.Provider>
     );
   };

package/src/fragments/createGroupChannelOperatorsFragment.tsx

@@ -15,7 +15,13 @@ const createGroupChannelOperatorsFragment = (
 ): GroupChannelOperatorsFragment => {
   const GroupChannelOperatorsModule = createGroupChannelOperatorsModule(initModule);
 
-  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    onPressHeaderRight,
+    renderUser,
+    queryCreator = () => channel.createOperatorListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('GroupChannelOperatorsFragment');
 
     const { STRINGS } = useLocalization();
@@ -23,9 +29,7 @@ const createGroupChannelOperatorsFragment = (
     const { openMenu } = useActionMenu();
     const { show } = useUserProfile();
 
-    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, {
-      queryCreator: () => channel.createOperatorListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(sdk, handlerId, {
       onUserLeft(eventChannel, user) {

package/src/fragments/createGroupChannelRegisterOperatorFragment.tsx

@@ -13,16 +13,20 @@ import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
 const createGroupChannelRegisterOperatorFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
-): GroupChannelRegisterOperatorFragment<SendbirdMember> => {
+): GroupChannelRegisterOperatorFragment => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
-  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    sortComparator,
+    renderUser,
+    onPressHeaderRight,
+    queryCreator = () => channel.createMemberListQuery({ limit: 20 }),
+  }) => {
     const { sdk, currentUser } = useSendbirdChat();
     const { STRINGS } = useLocalization();
-    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
-      queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
-      sortComparator,
-    });
+    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, { queryCreator, sortComparator });
 
     const _renderUser: NonNullable<typeof renderUser> = useCallback(
       (user, selectedUsers, setSelectedUsers) => {

package/src/fragments/createOpenChannelBannedUsersFragment.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, useFreshCallback } from '@sendbird/uikit-utils';
+import { useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -18,14 +18,17 @@ const createOpenChannelBannedUsersFragment = (
 ): OpenChannelBannedUsersFragment => {
   const OpenChannelBannedUsersModule = createOpenChannelBannedUsersModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createBannedUserListQuery({ limit: 20 }),
+  }) => {
     const { STRINGS } = useLocalization();
     const { currentUser, sdk } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, {
-      queryCreator: () => channel.createBannedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, { queryCreator });
 
     const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
       if (renderUser) return renderUser(props);

package/src/fragments/createOpenChannelMutedParticipantsFragment.tsx

@@ -18,16 +18,19 @@ const createOpenChannelMutedParticipantsFragment = (
 ): OpenChannelMutedParticipantsFragment => {
   const OpenChannelMutedParticipantsModule = createOpenChannelMutedParticipantsModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft = NOOP,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createMutedUserListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('OpenChannelMutedParticipants');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
-      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(
       sdk,

package/src/fragments/createOpenChannelOperatorsFragment.tsx

@@ -16,7 +16,13 @@ const createOpenChannelOperatorsFragment = (
 ): OpenChannelOperatorsFragment => {
   const OpenChannelOperatorsModule = createOpenChannelOperatorsModule(initModule);
 
-  return ({ onPressHeaderLeft = NOOP, onPressHeaderRight = NOOP, channel, renderUser }) => {
+  return ({
+    onPressHeaderLeft = NOOP,
+    onPressHeaderRight = NOOP,
+    channel,
+    renderUser,
+    queryCreator = () => channel.createOperatorListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('OpenChannelOperatorsFragment');
 
     const { STRINGS } = useLocalization();
@@ -24,9 +30,7 @@ const createOpenChannelOperatorsFragment = (
     const { openMenu } = useActionMenu();
     const { show } = useUserProfile();
 
-    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, {
-      queryCreator: () => channel.createOperatorListQuery({ limit: 20 }),
-    });
+    const { users, deleteUser, upsertUser, loading, refresh, next, error } = useUserList(sdk, { queryCreator });
 
     useChannelHandler(
       sdk,

package/src/fragments/createOpenChannelParticipantsFragment.tsx

@@ -17,10 +17,16 @@ import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useCo
 const RETURN_EMPTY_STRING = () => '';
 const createOpenChannelParticipantsFragment = (
   initModule?: Partial<UserListModule<SendbirdParticipant>>,
-): OpenChannelParticipantsFragment<SendbirdParticipant> => {
+): OpenChannelParticipantsFragment => {
   const UserListModule = createUserListModule<SendbirdParticipant>(initModule);
 
-  return ({ channel, onPressHeaderLeft, renderUser }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    renderUser,
+    sortComparator,
+    queryCreator = () => channel.createParticipantListQuery({ limit: 20 }),
+  }) => {
     const handlerId = useUniqHandlerId('OpenChannelParticipantsFragment');
 
     const refreshSchedule = useRef<NodeJS.Timeout>();
@@ -30,7 +36,8 @@ const createOpenChannelParticipantsFragment = (
     const { show } = useUserProfile();
 
     const { users, refresh, loading, next, error, upsertUser, deleteUser } = useUserList(sdk, {
-      queryCreator: () => channel.createParticipantListQuery({ limit: 20 }),
+      queryCreator,
+      sortComparator,
     });
 
     useChannelHandler(

package/src/fragments/createOpenChannelRegisterOperatorFragment.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { CustomQueryInterface, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useUserList } from '@sendbird/uikit-chat-hooks';
 import type { SendbirdParticipant } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
@@ -13,20 +13,20 @@ import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
 const createOpenChannelRegisterOperatorFragment = (
   initModule?: Partial<UserListModule<SendbirdParticipant>>,
-): OpenChannelRegisterOperatorFragment<SendbirdParticipant> => {
+): OpenChannelRegisterOperatorFragment => {
   const UserListModule = createUserListModule<SendbirdParticipant>(initModule);
 
-  return ({ channel, onPressHeaderLeft, sortComparator, renderUser, onPressHeaderRight }) => {
+  return ({
+    channel,
+    onPressHeaderLeft,
+    sortComparator,
+    renderUser,
+    onPressHeaderRight,
+    queryCreator = () => channel.createParticipantListQuery({ limit: 20 }),
+  }) => {
     const { sdk, currentUser } = useSendbirdChat();
     const { STRINGS } = useLocalization();
-    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
-      queryCreator: () => {
-        return channel.createParticipantListQuery({
-          limit: 20,
-        }) as unknown as CustomQueryInterface<SendbirdParticipant>;
-      },
-      sortComparator,
-    });
+    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, { queryCreator, sortComparator });
 
     const _renderUser: NonNullable<typeof renderUser> = useCallback(
       (user, selectedUsers, setSelectedUsers) => {
@@ -84,7 +84,7 @@ const createOpenChannelRegisterOperatorFragment = (
         >
           <UserListModule.List
             onLoadNext={next}
-            users={users}
+            users={users as SendbirdParticipant[]}
             renderUser={_renderUser}
             onRefresh={refresh}
             refreshing={refreshing}

package/src/hooks/useConnection.ts

@@ -1,12 +1,27 @@
 import { useCallback } from 'react';
 
-import { Logger, SendbirdError, SendbirdUser } from '@sendbird/uikit-utils';
+import { Logger, SendbirdChatSDK, SendbirdError, SendbirdUser } from '@sendbird/uikit-utils';
 
+import type EmojiManager from '../libs/EmojiManager';
 import { useSendbirdChat } from './useContext';
 import usePushTokenRegistration from './usePushTokenRegistration';
 
 type ConnectOptions = { nickname?: string; accessToken?: string };
+
 const cacheRestrictCodes = [400300, 400301, 400302, 400310];
+function isCacheRestrictedError(error: SendbirdError) {
+  return cacheRestrictCodes.some((code) => error.code === code);
+}
+
+async function initEmoji(sdk: SendbirdChatSDK, emojiManager: EmojiManager) {
+  await emojiManager.init();
+  if (sdk.appInfo.emojiHash !== emojiManager.emojiHash) {
+    try {
+      const container = await sdk.getAllEmoji();
+      await emojiManager.init(container);
+    } catch {}
+  }
+}
 
 const useConnection = () => {
   const { sdk, emojiManager, setCurrentUser, features } = useSendbirdChat();
@@ -35,23 +50,25 @@ const useConnection = () => {
           });
         }
 
+        await initEmoji(sdk, emojiManager);
+
         Logger.debug('[useConnection]', 'connected! (online)');
         setCurrentUser(user);
-        sdk.getAllEmoji().then(emojiManager.init);
 
         return user;
       } catch (e) {
         const error = e as unknown as SendbirdError;
 
         if (sdk.isCacheEnabled) {
-          if (cacheRestrictCodes.some((code) => error.code === code)) {
+          if (isCacheRestrictedError(error)) {
             Logger.warn('[useConnection]', 'offline connect restricted', error.message, error.code);
             Logger.warn('[useConnection]', 'clear cached-data');
             await sdk.clearCachedData().catch((e) => Logger.warn('[useConnection]', 'clear cached-data failure', e));
           } else if (sdk.currentUser) {
+            await initEmoji(sdk, emojiManager);
+
             Logger.debug('[useConnection]', 'connected! (offline)');
             setCurrentUser(sdk.currentUser);
-            sdk.getAllEmoji().finally(emojiManager.init);
             return sdk.currentUser;
           }
         }