@sendbird/uikit-react-native 2.0.3 → 2.2.0

package/src/domain/groupChannelNotifications/types.ts

@@ -0,0 +1,38 @@
+import type React from 'react';
+
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type GroupChannelNotificationsProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelNotificationsProps['Header']['onPressHeaderLeft'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  View: {};
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelNotifications
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelNotificationsContextsType = {
+  Fragment: React.Context<{
+    channel: SendbirdGroupChannel;
+    headerTitle: string;
+  }>;
+};
+export interface GroupChannelNotificationsModule {
+  Provider: CommonComponent<GroupChannelNotificationsProps['Provider']>;
+  Header: CommonComponent<GroupChannelNotificationsProps['Header']>;
+  View: CommonComponent<GroupChannelNotificationsProps['View']>;
+}
+
+export type GroupChannelNotificationsFragment = CommonComponent<GroupChannelNotificationsProps['Fragment']>;

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsHeader.tsx

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+
+import { Icon, useHeaderStyle } from '@sendbird/uikit-react-native-foundation';
+
+import { GroupChannelOperatorsContexts } from '../module/moduleContext';
+import type { GroupChannelOperatorsProps } from '../types';
+
+const GroupChannelOperatorsHeader = ({
+  onPressHeaderLeft,
+  onPressHeaderRight,
+}: GroupChannelOperatorsProps['Header']) => {
+  const { headerTitle } = useContext(GroupChannelOperatorsContexts.Fragment);
+  const { HeaderComponent } = useHeaderStyle();
+  return (
+    <HeaderComponent
+      title={headerTitle}
+      left={<Icon icon={'arrow-left'} />}
+      onPressLeft={onPressHeaderLeft}
+      right={<Icon icon={'plus'} />}
+      onPressRight={onPressHeaderRight}
+    />
+  );
+};
+
+export default GroupChannelOperatorsHeader;

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsList.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import type { SendbirdUser } from '@sendbird/uikit-utils';
+import { getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { GroupChannelOperatorsProps } from '../types';
+
+const GroupChannelOperatorsList = ({
+  operators,
+  renderUser,
+  ListEmptyComponent,
+}: GroupChannelOperatorsProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdUser> = useFreshCallback(({ item }) => renderUser?.({ user: item }));
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      data={operators}
+      renderItem={renderItem}
+      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      ListEmptyComponent={ListEmptyComponent}
+      bounces={false}
+      keyExtractor={getUserUniqId}
+    />
+  );
+};
+
+export default GroupChannelOperatorsList;

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsStatusEmpty.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const GroupChannelOperatorsStatusEmpty = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'no-users'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelOperatorsStatusEmpty;

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsStatusError.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { GroupChannelOperatorsModule } from '../types';
+
+const GroupChannelOperatorsStatusError: GroupChannelOperatorsModule['StatusError'] = ({ onPressRetry }) => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelOperatorsStatusError;

package/src/domain/groupChannelOperators/component/GroupChannelOperatorsStatusLoading.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+
+const GroupChannelOperatorsStatusLoading = () => {
+  return (
+    <View style={styles.container}>
+      <TypedPlaceholder type={'loading'} />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+});
+
+export default GroupChannelOperatorsStatusLoading;

package/src/domain/groupChannelOperators/index.ts

@@ -0,0 +1,7 @@
+export { default as GroupChannelOperatorsList } from './component/GroupChannelOperatorsList';
+export { default as GroupChannelOperatorsHeader } from './component/GroupChannelOperatorsHeader';
+export { default as GroupChannelOperatorsStatusEmpty } from './component/GroupChannelOperatorsStatusEmpty';
+export { default as GroupChannelOperatorsStatusError } from './component/GroupChannelOperatorsStatusError';
+export { default as GroupChannelOperatorsStatusLoading } from './component/GroupChannelOperatorsStatusLoading';
+export { default as createGroupChannelOperatorsModule } from './module/createGroupChannelOperatorsModule';
+export { GroupChannelOperatorsContextsProvider, GroupChannelOperatorsContexts } from './module/moduleContext';

package/src/domain/groupChannelOperators/module/createGroupChannelOperatorsModule.tsx

@@ -0,0 +1,21 @@
+import GroupChannelOperatorsHeader from '../component/GroupChannelOperatorsHeader';
+import GroupChannelOperatorsList from '../component/GroupChannelOperatorsList';
+import GroupChannelOperatorsStatusEmpty from '../component/GroupChannelOperatorsStatusEmpty';
+import GroupChannelOperatorsStatusError from '../component/GroupChannelOperatorsStatusError';
+import GroupChannelOperatorsStatusLoading from '../component/GroupChannelOperatorsStatusLoading';
+import type { GroupChannelOperatorsModule } from '../types';
+import { GroupChannelOperatorsContextsProvider } from './moduleContext';
+
+const createGroupChannelOperatorsModule = ({
+  Header = GroupChannelOperatorsHeader,
+  List = GroupChannelOperatorsList,
+  StatusEmpty = GroupChannelOperatorsStatusEmpty,
+  StatusError = GroupChannelOperatorsStatusError,
+  StatusLoading = GroupChannelOperatorsStatusLoading,
+  Provider = GroupChannelOperatorsContextsProvider,
+  ...module
+}: Partial<GroupChannelOperatorsModule> = {}): GroupChannelOperatorsModule => {
+  return { Header, List, Provider, StatusEmpty, StatusError, StatusLoading, ...module };
+};
+
+export default createGroupChannelOperatorsModule;

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

@@ -0,0 +1,30 @@
+import React, { createContext } from 'react';
+
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { GroupChannelOperatorsContextsType, GroupChannelOperatorsModule } from '../types';
+
+export const GroupChannelOperatorsContexts: GroupChannelOperatorsContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+  }),
+};
+
+export const GroupChannelOperatorsContextsProvider: GroupChannelOperatorsModule['Provider'] = ({
+  channel,
+  children,
+}) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <GroupChannelOperatorsContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_OPERATORS.HEADER_TITLE, channel }}
+      >
+        {children}
+      </GroupChannelOperatorsContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelOperators/types.ts

@@ -0,0 +1,52 @@
+import type React from 'react';
+
+import type { SendbirdGroupChannel, SendbirdUser } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type GroupChannelOperatorsProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelOperatorsProps['Header']['onPressHeaderLeft'];
+    onPressHeaderRight: GroupChannelOperatorsProps['Header']['onPressHeaderRight'];
+    renderUser?: GroupChannelOperatorsProps['List']['renderUser'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: () => void;
+  };
+  List: {
+    operators: SendbirdUser[];
+    onLoadNext: () => void;
+    renderUser: (props: { user: SendbirdUser }) => React.ReactElement | null;
+    ListEmptyComponent?: React.ReactElement;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelOperators
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelOperatorsContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+  }>;
+};
+export interface GroupChannelOperatorsModule {
+  Provider: CommonComponent<GroupChannelOperatorsProps['Provider']>;
+  Header: CommonComponent<GroupChannelOperatorsProps['Header']>;
+  List: CommonComponent<GroupChannelOperatorsProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<GroupChannelOperatorsProps['StatusError']>;
+}
+
+export type GroupChannelOperatorsFragment = CommonComponent<GroupChannelOperatorsProps['Fragment']>;

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

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { View } from 'react-native';
 
 import { Divider, Text, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
-import { Logger, getGroupChannelTitle } from '@sendbird/uikit-utils';
+import { getGroupChannelTitle } from '@sendbird/uikit-utils';
 
 import ChannelCover from '../../../components/ChannelCover';
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
@@ -14,18 +14,13 @@ const GroupChannelSettingsInfo = (_: GroupChannelSettingsProps['Info']) => {
   const { currentUser } = useSendbirdChat();
   const { STRINGS } = useLocalization();
 
-  if (!currentUser) {
-    Logger.warn('Cannot render GroupChannelSettingsInfo, please connect using `useConnection()` hook first');
-    return null;
-  }
-
   return (
     <View>
       <View style={styles.userInfoContainer}>
         <ChannelCover channel={channel} size={80} containerStyle={styles.avatarContainer} />
         <Text h1 numberOfLines={1}>
           {getGroupChannelTitle(
-            currentUser.userId,
+            currentUser?.userId || '',
             channel,
             STRINGS.LABELS.USER_NO_NAME,
             STRINGS.LABELS.CHANNEL_NO_MEMBERS,

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

@@ -4,21 +4,31 @@ import { View } from 'react-native';
 import { PushTriggerOption } from '@sendbird/chat';
 import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
 import { Icon, MenuBar, Switch, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { Logger, conditionChaining, useIIFE } from '@sendbird/uikit-utils';
 
 import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
+let WARN_onPressMenuNotification = false;
+
 const GroupChannelSettingsMenu = ({
+  onPressMenuModeration,
   onPressMenuMembers,
   onPressMenuLeaveChannel,
+  onPressMenuNotification,
   menuItemsCreator = (menu) => menu,
 }: GroupChannelSettingsProps['Menu']) => {
-  const { sdk } = useSendbirdChat();
+  const { sdk, features } = useSendbirdChat();
   const { channel } = useContext(GroupChannelSettingsContexts.Fragment);
   const { STRINGS } = useLocalization();
   const { colors } = useUIKitTheme();
 
+  if (__DEV__ && !WARN_onPressMenuNotification && !onPressMenuNotification) {
+    Logger.warn('You should pass `onPressMenuNotification` prop if using mention');
+    WARN_onPressMenuNotification = true;
+  }
+
   const toggleNotification = async () => {
     if (channel.myPushTriggerOption === 'off') {
       await channel.setMyPushTriggerOption(PushTriggerOption.DEFAULT);
@@ -27,12 +37,49 @@ const GroupChannelSettingsMenu = ({
     }
   };
 
+  const { onPressNotificationMenu, actionLabelNotificationMenu, actionItemNotificationMenu } = useIIFE(() => {
+    const getNotificationsLabel = () => {
+      switch (channel.myPushTriggerOption) {
+        case PushTriggerOption.ALL:
+        case PushTriggerOption.DEFAULT:
+          return STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION_LABEL_ON;
+        case PushTriggerOption.OFF:
+          return STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION_LABEL_OFF;
+        case PushTriggerOption.MENTION_ONLY:
+          return STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION_LABEL_MENTION_ONLY;
+      }
+    };
+
+    return {
+      actionLabelNotificationMenu: getNotificationsLabel(),
+      actionItemNotificationMenu: conditionChaining(
+        [features.userMentionEnabled],
+        [
+          <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+          <Switch value={channel.myPushTriggerOption !== 'off'} onChangeValue={toggleNotification} />,
+        ],
+      ),
+      onPressNotificationMenu: () => {
+        if (features.userMentionEnabled) onPressMenuNotification?.();
+        else toggleNotification();
+      },
+    };
+  });
+
   const menuItems: MenuBarProps[] = menuItemsCreator([
+    {
+      icon: 'moderation',
+      visible: channel.myRole === 'operator',
+      name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_MODERATION,
+      onPress: () => onPressMenuModeration(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
     {
       icon: 'notifications',
       name: STRINGS.GROUP_CHANNEL_SETTINGS.MENU_NOTIFICATION,
-      onPress: toggleNotification,
-      actionItem: <Switch value={channel.myPushTriggerOption !== 'off'} onChangeValue={toggleNotification} />,
+      onPress: onPressNotificationMenu,
+      actionLabel: actionLabelNotificationMenu,
+      actionItem: actionItemNotificationMenu,
     },
     {
       icon: 'members',
@@ -63,6 +110,7 @@ const GroupChannelSettingsMenu = ({
             onPress={menu.onPress}
             name={menu.name}
             disabled={menu.disabled}
+            visible={menu.visible}
             icon={menu.icon}
             iconColor={menu.iconColor}
             iconBackgroundColor={menu.iconBackgroundColor}

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

@@ -1,6 +1,6 @@
 import React, { createContext, useCallback } from 'react';
 
-import { useActiveGroupChannel, useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu, useAlert, useBottomSheet, usePrompt, useToast } from '@sendbird/uikit-react-native-foundation';
 import {
   NOOP,
@@ -36,11 +36,8 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
   const { fileService } = usePlatformService();
   const { alert } = useAlert();
 
-  const { activeChannel, setActiveChannel } = useActiveGroupChannel(sdk, channel);
-
-  const onChannelChanged = (channel: SendbirdBaseChannel) => {
-    if (isDifferentChannel(channel, activeChannel) || !channel.isGroupChannel()) return;
-    setActiveChannel(channel);
+  const onChannelChanged = (eventChannel: SendbirdBaseChannel) => {
+    if (isDifferentChannel(eventChannel, channel)) return;
     forceUpdate();
   };
 
@@ -48,6 +45,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     onChannelChanged: onChannelChanged,
     onChannelFrozen: onChannelChanged,
     onChannelUnfrozen: onChannelChanged,
+    onUserBanned: onChannelChanged,
   });
 
   const toast = useToast();
@@ -57,11 +55,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
 
   const updateChannel = useCallback(
     async (params: SendbirdGroupChannelUpdateParams) => {
-      const updatedChannel = await activeChannel.updateChannel(params);
-      setActiveChannel(updatedChannel);
+      await channel.updateChannel(params);
       forceUpdate();
     },
-    [activeChannel],
+    [channel],
   );
 
   const changeChannelName = useCallback(() => {
@@ -69,10 +66,10 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
       title: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_TITLE,
       submitLabel: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_OK,
       placeholder: STRINGS.GROUP_CHANNEL_SETTINGS.DIALOG_CHANGE_NAME_PROMPT_PLACEHOLDER,
-      defaultValue: activeChannel.name,
+      defaultValue: channel.name,
       onSubmit: (channelName) => updateChannel({ name: channelName }),
     });
-  }, [STRINGS, updateChannel, activeChannel.name]);
+  }, [STRINGS, updateChannel, channel.name]);
 
   const changeChannelImage = useCallback(() => {
     openMenu({
@@ -140,7 +137,7 @@ export const GroupChannelSettingsContextsProvider: GroupChannelSettingsModule['P
     <ProviderLayout>
       <GroupChannelSettingsContexts.Fragment.Provider
         value={{
-          channel: activeChannel,
+          channel,
           headerTitle: STRINGS.GROUP_CHANNEL_SETTINGS.HEADER_TITLE,
           headerRight: STRINGS.GROUP_CHANNEL_SETTINGS.HEADER_RIGHT,
           onPressHeaderRight,

package/src/domain/groupChannelSettings/types.ts

@@ -9,8 +9,10 @@ export interface GroupChannelSettingsProps {
   Fragment: {
     channel: GroupChannelSettingsProps['Provider']['channel'];
     onPressHeaderLeft: GroupChannelSettingsProps['Header']['onPressHeaderLeft'];
+    onPressMenuModeration: GroupChannelSettingsProps['Menu']['onPressMenuModeration'];
     onPressMenuMembers: GroupChannelSettingsProps['Menu']['onPressMenuMembers'];
     onPressMenuLeaveChannel: GroupChannelSettingsProps['Menu']['onPressMenuLeaveChannel'];
+    onPressMenuNotification?: GroupChannelSettingsProps['Menu']['onPressMenuNotification'];
     menuItemsCreator?: GroupChannelSettingsProps['Menu']['menuItemsCreator'];
   };
   Header: {
@@ -18,8 +20,10 @@ export interface GroupChannelSettingsProps {
   };
   Info: {};
   Menu: {
+    onPressMenuModeration: () => void;
     onPressMenuMembers: () => void;
     onPressMenuLeaveChannel: () => void;
+    onPressMenuNotification?: () => void;
     menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
   };
   Provider: {

package/src/domain/groupChannelUserList/types.ts

@@ -1,18 +1,20 @@
 import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams } from '@sendbird/uikit-utils';
+import type {
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  UserStruct,
+} from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
 import type { GroupChannelType } from '../groupChannelList/types';
 import type { UserListProps } from '../userList/types';
 
-type UserIds = string[];
-
-export interface GroupChannelCreateProps<User> {
+export interface GroupChannelCreateProps<User extends UserStruct> {
   Fragment: {
     onPressHeaderLeft: () => void;
     onCreateChannel: (channel: SendbirdGroupChannel) => void;
     channelType?: GroupChannelType;
-    userIdsGenerator?: (users: User[]) => UserIds;
     onBeforeCreateChannel?: (
       params: SendbirdGroupChannelCreateParams,
       users: User[],
@@ -22,22 +24,25 @@ export interface GroupChannelCreateProps<User> {
     renderUser?: UserListProps<User>['List']['renderUser'];
   };
 }
-export type GroupChannelCreateFragment<User> = CommonComponent<GroupChannelCreateProps<User>['Fragment']>;
+export type GroupChannelCreateFragment<User extends UserStruct> = CommonComponent<
+  GroupChannelCreateProps<User>['Fragment']
+>;
 
-export interface GroupChannelInviteProps<User> {
+export interface GroupChannelInviteProps<User extends UserStruct> {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
     onInviteMembers: (channel: SendbirdGroupChannel) => void;
-    userIdsGenerator?: (users: User[]) => UserIds;
     queryCreator?: UseUserListOptions<User>['queryCreator'];
     renderUser?: UserListProps<User>['List']['renderUser'];
     sortComparator?: UseUserListOptions<User>['sortComparator'];
   };
 }
-export type GroupChannelInviteFragment<User> = CommonComponent<GroupChannelInviteProps<User>['Fragment']>;
+export type GroupChannelInviteFragment<User extends UserStruct> = CommonComponent<
+  GroupChannelInviteProps<User>['Fragment']
+>;
 
-export interface GroupChannelMembersProps<User> {
+export interface GroupChannelMembersProps<User extends UserStruct> {
   Fragment: {
     channel: SendbirdGroupChannel;
     onPressHeaderLeft: () => void;
@@ -46,4 +51,19 @@ export interface GroupChannelMembersProps<User> {
     renderUser?: UserListProps<User>['List']['renderUser'];
   };
 }
-export type GroupChannelMembersFragment<User> = CommonComponent<GroupChannelMembersProps<User>['Fragment']>;
+export type GroupChannelMembersFragment<User extends UserStruct> = CommonComponent<
+  GroupChannelMembersProps<User>['Fragment']
+>;
+
+export interface GroupChannelRegisterOperatorProps<User extends UserStruct = SendbirdMember> {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: (channel: SendbirdGroupChannel) => void;
+    sortComparator?: UseUserListOptions<User>['sortComparator'];
+    renderUser?: UserListProps<User>['List']['renderUser'];
+  };
+}
+export type GroupChannelRegisterOperatorFragment<User extends UserStruct> = CommonComponent<
+  GroupChannelRegisterOperatorProps<User>['Fragment']
+>;

package/src/domain/userList/component/UserListList.tsx

@@ -2,10 +2,13 @@ import React, { useCallback, useContext } from 'react';
 import { FlatList, ListRenderItem } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import type { UserStruct } from '@sendbird/uikit-utils';
+import { getUserUniqId } from '@sendbird/uikit-utils';
+
 import { UserListContexts } from '../module/moduleContext';
 import type { UserListContextsType, UserListProps } from '../types';
 
-const UserListList = <T,>({
+const UserListList = <T extends UserStruct>({
   users,
   onRefresh,
   refreshing,
@@ -29,6 +32,7 @@ const UserListList = <T,>({
       onEndReached={onLoadNext}
       contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
       ListEmptyComponent={ListEmptyComponent}
+      keyExtractor={getUserUniqId}
     />
   );
 };

package/src/domain/userList/component/UserListStatusError.tsx

@@ -4,7 +4,7 @@ import { StyleSheet, View } from 'react-native';
 import TypedPlaceholder from '../../../components/TypedPlaceholder';
 import type { UserListModule } from '../types';
 
-const UserListStatusLoading: UserListModule<unknown>['StatusError'] = ({ onPressRetry }) => {
+const UserListStatusError: UserListModule<unknown>['StatusError'] = ({ onPressRetry }) => {
   return (
     <View style={styles.container}>
       <TypedPlaceholder type={'error-wrong'} onPressRetry={onPressRetry} />
@@ -16,4 +16,4 @@ const styles = StyleSheet.create({
   container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
 });
 
-export default UserListStatusLoading;
+export default UserListStatusError;

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

@@ -1,3 +1,5 @@
+import type { UserStruct } from '@sendbird/uikit-utils';
+
 import UserListHeader from '../component/UserListHeader';
 import UserListList from '../component/UserListList';
 import UserListStatusEmpty from '../component/UserListStatusEmpty';
@@ -6,7 +8,7 @@ import UserListStatusLoading from '../component/UserListStatusLoading';
 import type { UserListModule } from '../types';
 import { UserListContextsProvider } from './moduleContext';
 
-const createUserListModule = <T,>({
+const createUserListModule = <T extends UserStruct>({
   Header = UserListHeader,
   List = UserListList,
   StatusLoading = UserListStatusLoading,

package/src/domain/userList/types.ts

@@ -37,6 +37,9 @@ export interface UserListProps<User> {
     headerTitle: string;
     headerRight: (selectedUsers: Array<User>) => string;
   };
+  StatusError: {
+    onPressRetry: () => void;
+  };
 }
 
 /**
@@ -61,5 +64,5 @@ export interface UserListModule<User> {
   List: CommonComponent<UserListProps<User>['List']>;
   StatusEmpty: CommonComponent;
   StatusLoading: CommonComponent;
-  StatusError: CommonComponent<{ onPressRetry: () => void }>;
+  StatusError: CommonComponent<UserListProps<User>['StatusError']>;
 }