@sendbird/uikit-react-native 2.0.2 → 2.1.0

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

@@ -1,8 +1,7 @@
 import React, { useContext, useEffect } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Platform, TouchableOpacity, View } from 'react-native';
 
 import {
-  Header as DefaultHeader,
   Icon,
   Modal,
   Text,
@@ -11,7 +10,7 @@ import {
   useUIKitTheme,
 } from '@sendbird/uikit-react-native-foundation';
 
-import { useLocalization } from '../../../hooks/useContext';
+import { useLocalization, useSendbirdChat } from '../../../hooks/useContext';
 import { GroupChannelListContexts } from '../module/moduleContext';
 import type { GroupChannelListProps, GroupChannelType } from '../types';
 
@@ -21,16 +20,15 @@ const TYPE_ICONS: Record<GroupChannelType, keyof typeof Icon.Assets> = {
   'SUPER_GROUP': 'supergroup',
   'BROADCAST': 'broadcast',
 };
+const STATUS_BAR_TOP_INSET_AS: 'margin' | 'padding' = Platform.select({ android: 'margin', default: 'padding' });
 
-const GroupChannelListTypeSelector = ({
-  Header = DefaultHeader,
-  skipTypeSelection,
-  onSelectType,
-}: GroupChannelListProps['TypeSelector']) => {
-  const { statusBarTranslucent } = useHeaderStyle();
+const GroupChannelListTypeSelector = ({ skipTypeSelection, onSelectType }: GroupChannelListProps['TypeSelector']) => {
+  const { statusBarTranslucent, HeaderComponent } = useHeaderStyle();
   const { colors } = useUIKitTheme();
+  const { features } = useSendbirdChat();
   const typeSelector = useContext(GroupChannelListContexts.TypeSelector);
   const { visible, hide } = typeSelector;
+
   const createOnPressType = (type: GroupChannelType) => () => {
     hide();
     onSelectType(type);
@@ -42,42 +40,38 @@ const GroupChannelListTypeSelector = ({
 
   if (skipTypeSelection) return null;
 
-  const renderButtons = () => (
-    <View style={styles.buttonArea}>
-      {TYPES.map((type) => {
-        return (
-          <TouchableOpacity key={type} activeOpacity={0.6} onPress={createOnPressType(type)} style={styles.typeButton}>
-            <DefaultTypeIcon type={type} />
-            <DefaultTypeText type={type} />
-          </TouchableOpacity>
-        );
-      })}
-    </View>
-  );
-
-  const renderHeader = () => {
-    if (Header) {
-      return (
-        <Header
-          title={typeSelector.headerTitle}
-          right={<Icon icon={'close'} color={colors.onBackground01} />}
-          onPressRight={typeSelector.hide}
-        >
-          {renderButtons()}
-        </Header>
-      );
-    }
-
-    return (
-      <DefaultHeader title={null} right={null} left={null}>
-        {renderButtons()}
-      </DefaultHeader>
-    );
-  };
-
   return (
     <Modal visible={visible} onClose={hide} statusBarTranslucent={statusBarTranslucent}>
-      {renderHeader()}
+      <HeaderComponent
+        title={typeSelector.headerTitle}
+        right={<Icon icon={'close'} color={colors.onBackground01} />}
+        onPressRight={typeSelector.hide}
+        statusBarTopInsetAs={STATUS_BAR_TOP_INSET_AS}
+      >
+        <View style={styles.buttonArea}>
+          {TYPES.map((type) => {
+            if (type === 'SUPER_GROUP' && !features.superGroupChannelEnabled) {
+              return null;
+            }
+
+            if (type === 'BROADCAST' && !features.broadcastChannelEnabled) {
+              return null;
+            }
+
+            return (
+              <TouchableOpacity
+                key={type}
+                activeOpacity={0.6}
+                onPress={createOnPressType(type)}
+                style={styles.typeButton}
+              >
+                <DefaultTypeIcon type={type} />
+                <DefaultTypeText type={type} />
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </HeaderComponent>
     </Modal>
   );
 };

package/src/domain/groupChannelList/types.ts

@@ -2,7 +2,7 @@ import type React from 'react';
 import type { FlatListProps } from 'react-native';
 
 import type { UseGroupChannelListOptions } from '@sendbird/uikit-chat-hooks';
-import type { ActionMenuItem, BaseHeaderProps } from '@sendbird/uikit-react-native-foundation';
+import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
 
 import type { CommonComponent } from '../../types';
@@ -14,10 +14,6 @@ export interface GroupChannelListProps {
     onPressChannel: (channel: SendbirdGroupChannel) => void;
     /** Navigate to GroupChannelCreateFragment **/
     onPressCreateChannel: (channelType: GroupChannelType) => void;
-    /** Custom Header for TypeSelector, Only replace header component not a module **/
-    TypeSelectorHeader?: null | CommonComponent<
-      BaseHeaderProps<{ title: string; right: React.ReactElement; onPressRight: () => void }>
-    >;
     /** Method to render GroupChannel preview **/
     renderGroupChannelPreview?: (
       channel: SendbirdGroupChannel,
@@ -55,8 +51,6 @@ export interface GroupChannelListProps {
   };
   /** Props for `GroupChannelListModule.TypeSelector` **/
   TypeSelector: {
-    /** Prop from Fragment `Fragment.TypeSelectorHeader` **/
-    Header: GroupChannelListProps['Fragment']['TypeSelectorHeader'];
     /** Prop from Fragment `Fragment.skipTypeSelection` **/
     skipTypeSelection: boolean;
     /** Method called when type is selected, call `Fragment.onPressCreateChannel` **/

package/src/domain/groupChannelModeration/component/GroupChannelModerationHeader.tsx

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

package/src/domain/groupChannelModeration/component/GroupChannelModerationMenu.tsx

@@ -0,0 +1,84 @@
+import React, { useContext, useState } from 'react';
+import { View } from 'react-native';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import { Icon, MenuBar, Switch, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+
+import { useLocalization } from '../../../hooks/useContext';
+import { GroupChannelModerationContexts } from '../module/moduleContext';
+import type { GroupChannelModerationProps } from '../types';
+
+const GroupChannelModerationMenu = ({
+  onPressMenuBannedUsers,
+  onPressMenuMutedMembers,
+  onPressMenuOperators,
+  menuItemsCreator = (menu) => menu,
+}: GroupChannelModerationProps['Menu']) => {
+  const { channel } = useContext(GroupChannelModerationContexts.Fragment);
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const [isFrozen, setIsFrozen] = useState(() => channel.isFrozen);
+
+  const toggleFreeze = async () => {
+    if (channel.isFrozen) {
+      await channel.unfreeze();
+    } else {
+      await channel.freeze();
+    }
+
+    setIsFrozen(channel.isFrozen);
+  };
+
+  const menuItems: MenuBarProps[] = menuItemsCreator([
+    {
+      icon: 'operator',
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_OPERATORS,
+      onPress: () => onPressMenuOperators(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'mute',
+      visible: !channel.isBroadcast,
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_MUTED_MEMBERS,
+      onPress: () => onPressMenuMutedMembers(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'ban',
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_BANNED_USERS,
+      onPress: () => onPressMenuBannedUsers(),
+      actionItem: <Icon icon={'chevron-right'} color={colors.onBackground01} />,
+    },
+    {
+      icon: 'freeze',
+      visible: !channel.isBroadcast,
+      name: STRINGS.GROUP_CHANNEL_MODERATION.MENU_FREEZE_CHANNEL,
+      actionItem: <Switch value={isFrozen} onChangeValue={toggleFreeze} />,
+      onPress: toggleFreeze,
+    },
+  ]);
+
+  return (
+    <View>
+      {menuItems.map((menu) => {
+        return (
+          <MenuBar
+            key={menu.name}
+            onPress={menu.onPress}
+            name={menu.name}
+            disabled={menu.disabled}
+            visible={menu.visible}
+            icon={menu.icon}
+            iconColor={menu.iconColor}
+            iconBackgroundColor={menu.iconBackgroundColor}
+            actionLabel={menu.actionLabel}
+            actionItem={menu.actionItem}
+          />
+        );
+      })}
+    </View>
+  );
+};
+
+export default GroupChannelModerationMenu;

package/src/domain/groupChannelModeration/index.ts

@@ -0,0 +1,4 @@
+export { default as GroupChannelModerationHeader } from './component/GroupChannelModerationHeader';
+export { default as GroupChannelModerationMenu } from './component/GroupChannelModerationMenu';
+export { default as createGroupChannelModerationModule } from './module/createGroupChannelModerationModule';
+export { GroupChannelModerationContextsProvider, GroupChannelModerationContexts } from './module/moduleContext';

package/src/domain/groupChannelModeration/module/createGroupChannelModerationModule.tsx

@@ -0,0 +1,15 @@
+import GroupChannelModerationHeader from '../component/GroupChannelModerationHeader';
+import GroupChannelModerationMenu from '../component/GroupChannelModerationMenu';
+import type { GroupChannelModerationModule } from '../types';
+import { GroupChannelModerationContextsProvider } from './moduleContext';
+
+const createGroupChannelModerationModule = ({
+  Header = GroupChannelModerationHeader,
+  Menu = GroupChannelModerationMenu,
+  Provider = GroupChannelModerationContextsProvider,
+  ...module
+}: Partial<GroupChannelModerationModule> = {}): GroupChannelModerationModule => {
+  return { Header, Menu, Provider, ...module };
+};
+
+export default createGroupChannelModerationModule;

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

@@ -0,0 +1,33 @@
+import React, { createContext } from 'react';
+
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { GroupChannelModerationContextsType, GroupChannelModerationModule } from '../types';
+
+export const GroupChannelModerationContexts: GroupChannelModerationContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+  }),
+};
+
+export const GroupChannelModerationContextsProvider: GroupChannelModerationModule['Provider'] = ({
+  children,
+  channel,
+}) => {
+  // const [visible, setVisible] = useState(false);
+
+  const { STRINGS } = useLocalization();
+
+  return (
+    <ProviderLayout>
+      <GroupChannelModerationContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_MODERATION.HEADER_TITLE, channel }}
+      >
+        {children}
+      </GroupChannelModerationContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelModeration/types.ts

@@ -0,0 +1,48 @@
+import type React from 'react';
+
+import type { MenuBarProps } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdGroupChannel } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type GroupChannelModerationProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelModerationProps['Header']['onPressHeaderLeft'];
+    onPressMenuOperators: GroupChannelModerationProps['Menu']['onPressMenuOperators'];
+    onPressMenuMutedMembers: GroupChannelModerationProps['Menu']['onPressMenuMutedMembers'];
+    onPressMenuBannedUsers: GroupChannelModerationProps['Menu']['onPressMenuBannedUsers'];
+    menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  Menu: {
+    onPressMenuOperators: () => void;
+    onPressMenuMutedMembers: () => void;
+    onPressMenuBannedUsers: () => void;
+    menuItemsCreator?: (defaultMenuItems: MenuBarProps[]) => MenuBarProps[];
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelModeration
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelModerationContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+  }>;
+};
+export interface GroupChannelModerationModule {
+  Provider: CommonComponent<GroupChannelModerationProps['Provider']>;
+  Header: CommonComponent<GroupChannelModerationProps['Header']>;
+  Menu: CommonComponent<GroupChannelModerationProps['Menu']>;
+}
+
+export type GroupChannelModerationFragment = CommonComponent<GroupChannelModerationProps['Fragment']>;

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersHeader.tsx

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

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersList.tsx

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

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersStatusEmpty.tsx

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

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersStatusError.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import TypedPlaceholder from '../../../components/TypedPlaceholder';
+import type { GroupChannelMutedMembersModule } from '../types';
+
+const GroupChannelMutedMembersStatusError: GroupChannelMutedMembersModule['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 GroupChannelMutedMembersStatusError;

package/src/domain/groupChannelMutedMembers/component/GroupChannelMutedMembersStatusLoading.tsx

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

package/src/domain/groupChannelMutedMembers/index.ts

@@ -0,0 +1,7 @@
+export { default as GroupChannelMutedMembersList } from './component/GroupChannelMutedMembersList';
+export { default as GroupChannelMutedMembersHeader } from './component/GroupChannelMutedMembersHeader';
+export { default as GroupChannelMutedMembersStatusEmpty } from './component/GroupChannelMutedMembersStatusEmpty';
+export { default as GroupChannelMutedMembersStatusError } from './component/GroupChannelMutedMembersStatusError';
+export { default as GroupChannelMutedMembersStatusLoading } from './component/GroupChannelMutedMembersStatusLoading';
+export { default as createGroupChannelMutedMembersModule } from './module/createGroupChannelMutedMembersModule';
+export { GroupChannelMutedMembersContextsProvider, GroupChannelMutedMembersContexts } from './module/moduleContext';

package/src/domain/groupChannelMutedMembers/module/createGroupChannelMutedMembersModule.tsx

@@ -0,0 +1,21 @@
+import GroupChannelMutedMembersHeader from '../component/GroupChannelMutedMembersHeader';
+import GroupChannelMutedMembersList from '../component/GroupChannelMutedMembersList';
+import GroupChannelMutedMembersStatusEmpty from '../component/GroupChannelMutedMembersStatusEmpty';
+import GroupChannelMutedMembersStatusError from '../component/GroupChannelMutedMembersStatusError';
+import GroupChannelMutedMembersStatusLoading from '../component/GroupChannelMutedMembersStatusLoading';
+import type { GroupChannelMutedMembersModule } from '../types';
+import { GroupChannelMutedMembersContextsProvider } from './moduleContext';
+
+const createGroupChannelMutedMembersModule = ({
+  Header = GroupChannelMutedMembersHeader,
+  List = GroupChannelMutedMembersList,
+  StatusEmpty = GroupChannelMutedMembersStatusEmpty,
+  StatusError = GroupChannelMutedMembersStatusError,
+  StatusLoading = GroupChannelMutedMembersStatusLoading,
+  Provider = GroupChannelMutedMembersContextsProvider,
+  ...module
+}: Partial<GroupChannelMutedMembersModule> = {}): GroupChannelMutedMembersModule => {
+  return { Header, List, Provider, StatusEmpty, StatusError, StatusLoading, ...module };
+};
+
+export default createGroupChannelMutedMembersModule;

package/src/domain/groupChannelMutedMembers/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 { GroupChannelMutedMembersContextsType, GroupChannelMutedMembersModule } from '../types';
+
+export const GroupChannelMutedMembersContexts: GroupChannelMutedMembersContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+  }),
+};
+
+export const GroupChannelMutedMembersContextsProvider: GroupChannelMutedMembersModule['Provider'] = ({
+  channel,
+  children,
+}) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <GroupChannelMutedMembersContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_MUTED_MEMBERS.HEADER_TITLE, channel }}
+      >
+        {children}
+      </GroupChannelMutedMembersContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelMutedMembers/types.ts

@@ -0,0 +1,50 @@
+import type React from 'react';
+
+import type { SendbirdGroupChannel, SendbirdRestrictedUser } from '@sendbird/uikit-utils';
+
+import type { CommonComponent } from '../../types';
+
+export type GroupChannelMutedMembersProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelMutedMembersProps['Header']['onPressHeaderLeft'];
+    renderUser?: GroupChannelMutedMembersProps['List']['renderUser'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  List: {
+    renderUser: (props: { user: SendbirdRestrictedUser }) => React.ReactElement | null;
+    onLoadNext: () => void;
+    mutedMembers: SendbirdRestrictedUser[];
+    ListEmptyComponent?: React.ReactElement;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelMutedMembers
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelMutedMembersContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+  }>;
+};
+export interface GroupChannelMutedMembersModule {
+  Provider: CommonComponent<GroupChannelMutedMembersProps['Provider']>;
+  Header: CommonComponent<GroupChannelMutedMembersProps['Header']>;
+  List: CommonComponent<GroupChannelMutedMembersProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<GroupChannelMutedMembersProps['StatusError']>;
+}
+
+export type GroupChannelMutedMembersFragment = CommonComponent<GroupChannelMutedMembersProps['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,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;