@sendbird/uikit-react-native 2.0.3 → 2.1.0

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,29 @@
+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 { 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}
+    />
+  );
+};
+
+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

@@ -10,6 +10,7 @@ import { GroupChannelSettingsContexts } from '../module/moduleContext';
 import type { GroupChannelSettingsProps } from '../types';
 
 const GroupChannelSettingsMenu = ({
+  onPressMenuModeration,
   onPressMenuMembers,
   onPressMenuLeaveChannel,
   menuItemsCreator = (menu) => menu,
@@ -28,6 +29,13 @@ const GroupChannelSettingsMenu = ({
   };
 
   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,
@@ -63,6 +71,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/types.ts

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

package/src/domain/groupChannelUserList/types.ts

@@ -1,18 +1,15 @@
-import type { UseUserListOptions } from '@sendbird/uikit-chat-hooks';
-import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams } from '@sendbird/uikit-utils';
+import type { UseUserListOptions, UserStruct } from '@sendbird/uikit-chat-hooks';
+import type { SendbirdGroupChannel, SendbirdGroupChannelCreateParams, SendbirdMember } 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 +19,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 +46,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/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/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']>;
 }

package/src/fragments/createGroupChannelBannedUsersFragment.tsx

@@ -0,0 +1,80 @@
+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 StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { createGroupChannelBannedUsersModule } from '../domain/groupChannelBannedUsers';
+import type {
+  GroupChannelBannedUsersFragment,
+  GroupChannelBannedUsersModule,
+} from '../domain/groupChannelBannedUsers/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createGroupChannelBannedUsersFragment = (
+  initModule?: Partial<GroupChannelBannedUsersModule>,
+): GroupChannelBannedUsersFragment => {
+  const GroupChannelBannedUsersModule = createGroupChannelBannedUsersModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+    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 _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
+      if (renderUser) return renderUser(props);
+
+      const { user } = props;
+
+      return (
+        <UserActionBar
+          muted={false}
+          uri={user.profileUrl}
+          name={
+            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
+            (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')
+          }
+          disabled={user.userId === currentUser?.userId}
+          onPressActionMenu={() => {
+            openMenu({
+              title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+              menuItems: [
+                {
+                  title: STRINGS.LABELS.UNBAN,
+                  onPress: () => channel.unbanUser(user).then(() => deleteUser(user.userId)),
+                },
+              ],
+            });
+          }}
+        />
+      );
+    });
+
+    return (
+      <GroupChannelBannedUsersModule.Provider channel={channel}>
+        <GroupChannelBannedUsersModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<GroupChannelBannedUsersModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<GroupChannelBannedUsersModule.StatusError onPressRetry={refresh} />}
+        >
+          <GroupChannelBannedUsersModule.List
+            bannedUsers={users}
+            renderUser={_renderUser}
+            ListEmptyComponent={<GroupChannelBannedUsersModule.StatusEmpty />}
+            onLoadNext={next}
+          />
+        </StatusComposition>
+      </GroupChannelBannedUsersModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelBannedUsersFragment;

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TouchableOpacity } from 'react-native';
 
-import { useUserList } from '@sendbird/uikit-chat-hooks';
-import { Logger, PASS, SendbirdGroupChannelCreateParams, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
+import { UserStruct, useUserList } from '@sendbird/uikit-chat-hooks';
+import { PASS, SendbirdGroupChannelCreateParams, SendbirdUser, useFreshCallback } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserSelectableBar from '../components/UserSelectableBar';
@@ -11,30 +11,12 @@ import createUserListModule from '../domain/userList/module/createUserListModule
 import type { UserListModule } from '../domain/userList/types';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
-const defaultUserIdsGenerator = <T,>(users: T[]) => {
-  const userIds = users
-    .map((user) => {
-      // @ts-ignore
-      return user.userId as string | undefined;
-    })
-    .filter((u): u is string => Boolean(u));
-
-  if (userIds.length === 0) {
-    Logger.warn(
-      'GroupChannelCreateFragment: Couldn\'t find user ids! if you provide "queryCreator", please provide "userIdsGenerator" as well',
-    );
-  }
-
-  return userIds;
-};
-
-const createGroupChannelCreateFragment = <UserType,>(
+const createGroupChannelCreateFragment = <UserType extends UserStruct>(
   initModule?: Partial<UserListModule<UserType>>,
 ): GroupChannelCreateFragment<UserType> => {
   const UserListModule = createUserListModule<UserType>(initModule);
 
   return ({
-    userIdsGenerator = defaultUserIdsGenerator,
     onPressHeaderLeft,
     onBeforeCreateChannel = PASS,
     onCreateChannel,
@@ -52,34 +34,32 @@ const createGroupChannelCreateFragment = <UserType,>(
 
     const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((user, selectedUsers, setSelectedUsers) => {
       if (queryCreator && !renderUser) {
-        throw new Error('You should provide "renderUser" when providing "queryCreator"');
+        const hasRequiredKey = Object.hasOwn(user, 'profileUrl') && Object.hasOwn(user, 'nickname');
+        if (!hasRequiredKey) 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[]>>;
+      if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
 
-      const isMe = sbUser.userId === currentUser?.userId;
+      const isMe = user.userId === currentUser?.userId;
       if (isMe) return null;
 
-      const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
+      const userIdx = selectedUsers.findIndex((u) => u.userId === user.userId);
       const isSelected = userIdx > -1;
 
       return (
         <TouchableOpacity
           activeOpacity={0.7}
           onPress={() => {
-            sbSetSelectedUsers(([...draft]) => {
+            setSelectedUsers(([...draft]) => {
               if (isSelected) draft.splice(userIdx, 1);
-              else draft.push(sbUser);
+              else draft.push(user);
               return draft;
             });
           }}
         >
           <UserSelectableBar
-            uri={sbUser.profileUrl}
-            name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
+            uri={(user as unknown as SendbirdUser).profileUrl}
+            name={(user as unknown as SendbirdUser).nickname || STRINGS.LABELS.USER_NO_NAME}
             selected={isSelected}
             disabled={false}
           />
@@ -96,7 +76,7 @@ const createGroupChannelCreateFragment = <UserType,>(
           onPressHeaderLeft={onPressHeaderLeft}
           onPressHeaderRight={async (users) => {
             const params: SendbirdGroupChannelCreateParams = {
-              invitedUserIds: userIdsGenerator(users),
+              invitedUserIds: users.map((it) => it.userId),
               name: '',
               coverUrl: '',
               isDistinct: false,

package/src/fragments/createGroupChannelFragment.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 
 import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
-import { NOOP, PASS, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
+import { NOOP, PASS, SendbirdGroupChannel, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
 
 import MessageRenderer from '../components/MessageRenderer';
 import NewMessagesButton from '../components/NewMessagesButton';
@@ -37,7 +37,6 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
     const { sdk, currentUser } = useSendbirdChat();
 
     const {
-      activeChannel,
       messages,
       nextMessages,
       newMessagesFromMembers,
@@ -95,16 +94,16 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
 
     return (
       <GroupChannelModule.Provider
-        channel={activeChannel}
+        channel={channel}
         enableTypingIndicator={enableTypingIndicator}
         keyboardAvoidOffset={keyboardAvoidOffset}
       >
         <GroupChannelModule.Header onPressHeaderLeft={onPressHeaderLeft} onPressHeaderRight={onPressHeaderRight} />
         <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>
           <GroupChannelModule.MessageList
+            channel={channel}
             enableMessageGrouping={enableMessageGrouping}
             currentUserId={currentUser?.userId}
-            channel={activeChannel}
             renderMessage={_renderMessage}
             messages={messages}
             nextMessages={nextMessages}
@@ -120,7 +119,7 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
             flatListProps={memoizedFlatListProps}
           />
           <GroupChannelModule.Input
-            channel={activeChannel}
+            shouldRenderInput={shouldRenderInput(channel)}
             onSendFileMessage={onSendFileMessage}
             onSendUserMessage={onSendUserMessage}
             onUpdateFileMessage={onUpdateFileMessage}
@@ -132,4 +131,12 @@ const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): G
   };
 };
 
+function shouldRenderInput(channel: SendbirdGroupChannel) {
+  if (channel.isBroadcast) {
+    return channel.myRole === 'operator';
+  }
+
+  return true;
+}
+
 export default createGroupChannelFragment;