@sendbird/uikit-react-native 2.0.2 → 2.1.0

package/src/components/MessageRenderer/index.tsx

@@ -158,7 +158,7 @@ const styles = createStyleSheet({
   },
   outgoingContainer: {
     flexDirection: 'row',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     justifyContent: 'center',
   },
 });

package/src/components/TypedPlaceholder.tsx

@@ -6,11 +6,11 @@ import { useLocalization } from '../hooks/useContext';
 
 type Props = {
   type:
-    | 'no-banned-members'
+    | 'no-muted-members'
+    | 'no-banned-users'
     | 'no-channels'
     | 'no-messages'
     | 'no-users'
-    | 'no-muted-members'
     | 'no-results-found'
     | 'error-wrong'
     | 'loading';
@@ -19,8 +19,8 @@ type Props = {
 const TypedPlaceholder = ({ type, onPressRetry }: Props) => {
   const { STRINGS } = useLocalization();
   switch (type) {
-    case 'no-banned-members':
-      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_MEMBERS} />;
+    case 'no-banned-users':
+      return <Placeholder icon={'ban'} message={STRINGS.PLACEHOLDER.NO_BANNED_USERS} />;
     case 'no-channels':
       return <Placeholder icon={'chat'} message={STRINGS.PLACEHOLDER.NO_CHANNELS} />;
     case 'no-messages':

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -89,24 +89,10 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
     return undefined;
   });
 
-  const customCover = useIIFE(() => {
-    if (channel.isBroadcast) {
-      return (
-        <Icon
-          icon={'broadcast'}
-          size={32}
-          color={colors.onBackgroundReverse01}
-          containerStyle={[styles.broadcastCover, { backgroundColor: colors.secondary }]}
-        />
-      );
-    }
-    return <ChannelCover channel={channel} size={56} />;
-  });
-
   return (
     <Pressable delayLongPress={DEFAULT_LONG_PRESS_DELAY} onPress={onPress} onLongPress={onLongPress}>
       <GroupChannelPreview
-        customCover={customCover}
+        customCover={<ChannelCover channel={channel} size={56} />}
         coverUrl={channel.coverUrl}
         title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}
         titleCaptionLeft={titleCaptionIcon}

package/src/containers/SendbirdUIKitContainer.tsx

@@ -15,8 +15,8 @@ import {
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
 import type {
+  SendbirdBaseChannel,
   SendbirdChatSDK,
-  SendbirdGroupChannel,
   SendbirdGroupChannelCreateParams,
   SendbirdMember,
   SendbirdUser,
@@ -24,8 +24,9 @@ import type {
 
 import { LocalizationProvider } from '../contexts/LocalizationCtx';
 import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
-import { ProfileCardProvider } from '../contexts/ProfileCardCtx';
+import type { UIKitFeaturesInSendbirdChatContext } from '../contexts/SendbirdChatCtx';
 import { SendbirdChatProvider } from '../contexts/SendbirdChatCtx';
+import { UserProfileProvider } from '../contexts/UserProfileCtx';
 import { useLocalization } from '../hooks/useContext';
 import InternalLocalCacheStorage from '../libs/InternalLocalCacheStorage';
 import StringSetEn from '../localization/StringSet.en';
@@ -59,10 +60,7 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   chatOptions?: {
     localCacheStorage?: LocalCacheStorage;
     onInitialized?: (sdkInstance: SendbirdChatSDK) => SendbirdChatSDK;
-    enableAutoPushTokenRegistration?: boolean;
-    enableChannelListTypingIndicator?: boolean;
-    enableChannelListMessageReceiptStatus?: boolean;
-  };
+  } & Partial<UIKitFeaturesInSendbirdChatContext>;
   localization?: {
     stringSet?: StringSet;
   };
@@ -76,8 +74,8 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   toast?: {
     dismissTimeout?: number;
   };
-  profileCard?: {
-    onCreateChannel: (channel: SendbirdGroupChannel) => void;
+  userProfile?: {
+    onCreateChannel: (channel: SendbirdBaseChannel) => void;
     onBeforeCreateChannel?: (
       channelParams: SendbirdGroupChannelCreateParams,
       users: SendbirdUser[] | SendbirdMember[],
@@ -97,7 +95,7 @@ const SendbirdUIKitContainer = ({
   localization,
   styles,
   toast,
-  profileCard,
+  userProfile,
   errorBoundary,
 }: SendbirdUIKitContainerProps) => {
   const unsubscribes = useRef<(() => void)[]>([]).current;
@@ -162,6 +160,7 @@ const SendbirdUIKitContainer = ({
         enableAutoPushTokenRegistration={chatOptions?.enableAutoPushTokenRegistration ?? true}
         enableChannelListTypingIndicator={chatOptions?.enableChannelListTypingIndicator ?? false}
         enableChannelListMessageReceiptStatus={chatOptions?.enableChannelListMessageReceiptStatus ?? false}
+        enableUseUserIdForNickname={chatOptions?.enableUseUserIdForNickname ?? false}
       >
         <LocalizationProvider stringSet={localization?.stringSet ?? StringSetEn}>
           <PlatformServiceProvider
@@ -178,12 +177,12 @@ const SendbirdUIKitContainer = ({
               >
                 <LocalizedDialogProvider>
                   <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <ProfileCardProvider
-                      onCreateChannel={profileCard?.onCreateChannel}
-                      onBeforeCreateChannel={profileCard?.onBeforeCreateChannel}
+                    <UserProfileProvider
+                      onCreateChannel={userProfile?.onCreateChannel}
+                      onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
                     >
                       <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
-                    </ProfileCardProvider>
+                    </UserProfileProvider>
                   </ToastProvider>
                 </LocalizedDialogProvider>
               </HeaderStyleProvider>

package/src/contexts/SendbirdChatCtx.tsx

@@ -12,13 +12,16 @@ import { confirmAndMarkAsDelivered, useForceUpdate } from '@sendbird/uikit-utils
 
 import type { FileType } from '../platform/types';
 
-type Props = React.PropsWithChildren<{
-  sdkInstance: SendbirdChatSDK;
-
+export interface UIKitFeaturesInSendbirdChatContext {
   enableAutoPushTokenRegistration: boolean;
   enableChannelListTypingIndicator: boolean;
   enableChannelListMessageReceiptStatus: boolean;
-}>;
+  enableUseUserIdForNickname: boolean;
+}
+
+interface Props extends UIKitFeaturesInSendbirdChatContext, React.PropsWithChildren {
+  sdkInstance: SendbirdChatSDK;
+}
 
 type Context = {
   sdk: SendbirdChatSDK;
@@ -34,6 +37,7 @@ type Context = {
     autoPushTokenRegistrationEnabled: boolean;
     channelListTypingIndicatorEnabled: boolean;
     channelListMessageReceiptStatusEnabled: boolean;
+    useUserIdForNicknameEnabled: boolean;
 
     // Sendbird application features
     deliveryReceiptEnabled: boolean;
@@ -50,6 +54,7 @@ export const SendbirdChatProvider = ({
   enableAutoPushTokenRegistration,
   enableChannelListMessageReceiptStatus,
   enableChannelListTypingIndicator,
+  enableUseUserIdForNickname,
 }: Props) => {
   const [currentUser, _setCurrentUser] = useState<SendbirdUser>();
   const forceUpdate = useForceUpdate();
@@ -116,6 +121,7 @@ export const SendbirdChatProvider = ({
       autoPushTokenRegistrationEnabled: enableAutoPushTokenRegistration,
       channelListTypingIndicatorEnabled: enableChannelListTypingIndicator,
       channelListMessageReceiptStatusEnabled: enableChannelListMessageReceiptStatus,
+      useUserIdForNicknameEnabled: enableUseUserIdForNickname,
     },
   };
 

package/src/contexts/{ProfileCardCtx.tsx → UserProfileCtx.tsx}

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useCallback, useContext, useState } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Modal, OutlinedButton, ProfileCard, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
@@ -19,7 +19,7 @@ type OnBeforeCreateChannel = (
   users: SendbirdUser[] | SendbirdMember[],
 ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
 
-export type ProfileCardContextType = {
+export type UserProfileContextType = {
   show(user: SendbirdUser | SendbirdMember): void;
   hide(): void;
 };
@@ -29,28 +29,29 @@ type Props = React.PropsWithChildren<{
   onBeforeCreateChannel?: OnBeforeCreateChannel;
 }>;
 
-export const ProfileCardContext = React.createContext<ProfileCardContextType | null>(null);
-export const ProfileCardProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
+export const UserProfileContext = React.createContext<UserProfileContextType | null>(null);
+export const UserProfileProvider = ({ children, onCreateChannel, onBeforeCreateChannel = PASS }: Props) => {
   const chatContext = useContext(SendbirdChatContext);
   const localizationContext = useContext(LocalizationContext);
+
+  if (!chatContext) throw new Error('SendbirdChatContext is not provided');
+  if (!localizationContext) throw new Error('LocalizationContext is not provided');
+
   const { bottom, left, right } = useSafeAreaInsets();
 
   const [user, setUser] = useState<SendbirdUser | SendbirdMember>();
   const [visible, setVisible] = useState(false);
 
-  const show: ProfileCardContextType['show'] = (user) => {
+  const show: UserProfileContextType['show'] = useCallback((user) => {
     setUser(user);
     setVisible(true);
-  };
+  }, []);
 
-  const hide: ProfileCardContextType['hide'] = () => {
+  const hide: UserProfileContextType['hide'] = useCallback(() => {
     setVisible(false);
-  };
-
-  if (!chatContext) throw new Error('SendbirdChatContext is not provided');
-  if (!localizationContext) throw new Error('LocalizationContext is not provided');
+  }, []);
 
-  const profileCardButton = useIIFE(() => {
+  const userProfileButton = useIIFE(() => {
     const isMe = chatContext.currentUser && user?.userId === chatContext.currentUser.userId;
     if (isMe) return undefined;
 
@@ -73,7 +74,7 @@ export const ProfileCardProvider = ({ children, onCreateChannel, onBeforeCreateC
           onCreateChannel(channel);
         } else {
           Logger.warn(
-            'Please set `onCreateChannel` before message to user from profile card, see `profileCard` prop in the `SendbirdUIKitContainer` props',
+            'Please set `onCreateChannel` before message to user from profile card, see `userProfile` prop in the `SendbirdUIKitContainer` props',
           );
         }
       }
@@ -87,7 +88,7 @@ export const ProfileCardProvider = ({ children, onCreateChannel, onBeforeCreateC
   });
 
   return (
-    <ProfileCardContext.Provider value={{ show, hide }}>
+    <UserProfileContext.Provider value={{ show, hide }}>
       {children}
       <Modal
         type={'slide'}
@@ -106,11 +107,11 @@ export const ProfileCardProvider = ({ children, onCreateChannel, onBeforeCreateC
             username={user.nickname || localizationContext.STRINGS.LABELS.USER_NO_NAME}
             bodyLabel={localizationContext.STRINGS.PROFILE_CARD.BODY_LABEL}
             body={localizationContext.STRINGS.PROFILE_CARD.BODY(user)}
-            button={profileCardButton}
+            button={userProfileButton}
           />
         )}
       </Modal>
-    </ProfileCardContext.Provider>
+    </UserProfileContext.Provider>
   );
 };
 

package/src/domain/groupChannel/component/GroupChannelInput/EditInput.tsx

@@ -12,10 +12,11 @@ type EditInputProps = GroupChannelProps['Input'] & {
   setText: (val: string) => void;
   editMessage: SendbirdUserMessage | SendbirdFileMessage;
   setEditMessage: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+  disabled: boolean;
 };
 
 const AUTO_FOCUS = Platform.select({ ios: false, android: true, default: false });
-const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage }: EditInputProps) => {
+const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMessage, disabled }: EditInputProps) => {
   const { STRINGS } = useLocalization();
   const inputRef = useRef<RNTextInput>(null);
   const toast = useToast();
@@ -45,6 +46,7 @@ const EditInput = ({ text, setText, editMessage, setEditMessage, onUpdateUserMes
     <View style={styles.editInputContainer}>
       <View style={styles.inputWrapper}>
         <TextInput
+          editable={!disabled}
           autoFocus={AUTO_FOCUS}
           ref={inputRef}
           multiline

package/src/domain/groupChannel/component/GroupChannelInput/SendInput.tsx

@@ -20,9 +20,19 @@ import type { GroupChannelProps } from '../../types';
 type SendInputProps = GroupChannelProps['Input'] & {
   text: string;
   setText: (val: string) => void;
+  frozen: boolean;
+  muted: boolean;
   disabled: boolean;
 };
-const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabled }: SendInputProps) => {
+const SendInput = ({
+  onSendUserMessage,
+  onSendFileMessage,
+  text,
+  setText,
+  disabled,
+  frozen,
+  muted,
+}: SendInputProps) => {
   const { STRINGS } = useLocalization();
   const { fileService } = usePlatformService();
   const { colors } = useUIKitTheme();
@@ -120,8 +130,12 @@ const SendInput = ({ onSendUserMessage, onSendFileMessage, text, setText, disabl
         onChangeText={setText}
         style={styles.input}
         placeholder={conditionChaining(
-          [disabled],
-          [STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED, STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE],
+          [frozen, muted],
+          [
+            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED,
+            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_MUTED,
+            STRINGS.GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE,
+          ],
         )}
       />
       {Boolean(text.trim()) && (

package/src/domain/groupChannel/component/GroupChannelInput/index.tsx

@@ -3,7 +3,7 @@ import { KeyboardAvoidingView, Platform, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
-import { isGroupChannelChatUnavailable, useIIFE } from '@sendbird/uikit-utils';
+import { getGroupChannelChatAvailableState, useIIFE } from '@sendbird/uikit-utils';
 
 import { GroupChannelContexts } from '../../module/moduleContext';
 import type { GroupChannelProps } from '../../types';
@@ -12,15 +12,13 @@ import SendInput from './SendInput';
 
 const KEYBOARD_AVOID_VIEW_BEHAVIOR = Platform.select({ ios: 'padding' as const, default: undefined });
 const GroupChannelInput = (props: GroupChannelProps['Input']) => {
-  const { channel } = props;
-
   const { left, right, bottom } = useSafeAreaInsets();
   const { colors } = useUIKitTheme();
-  const { editMessage, setEditMessage, keyboardAvoidOffset = 0 } = useContext(GroupChannelContexts.Fragment);
+  const { channel, editMessage, setEditMessage, keyboardAvoidOffset = 0 } = useContext(GroupChannelContexts.Fragment);
 
   const [text, setText] = useState('');
   const textTmpRef = useRef('');
-  const isChatUnavailable = isGroupChannelChatUnavailable(channel);
+  const chatAvailableState = getGroupChannelChatAvailableState(channel);
 
   useEffect(() => {
     if (text.length === 0) channel.endTyping();
@@ -28,13 +26,13 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
   }, [text]);
 
   useEffect(() => {
-    if (isChatUnavailable) {
+    if (chatAvailableState.disabled) {
       textTmpRef.current = text;
       setText('');
     } else {
       setText(textTmpRef.current);
     }
-  }, [isChatUnavailable]);
+  }, [chatAvailableState.disabled]);
 
   const inputMode = useIIFE(() => {
     if (!editMessage) return 'send';
@@ -42,6 +40,10 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
     return 'edit';
   });
 
+  if (!props.shouldRenderInput) {
+    return <SafeAreaBottom height={bottom} />;
+  }
+
   return (
     <KeyboardAvoidingView
       keyboardVerticalOffset={-bottom + keyboardAvoidOffset}
@@ -49,7 +51,7 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
     >
       <View style={{ paddingLeft: left, paddingRight: right, backgroundColor: colors.background }}>
         <View style={{ justifyContent: 'center', width: '100%' }}>
-          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} disabled={isChatUnavailable} />}
+          {inputMode === 'send' && <SendInput {...props} text={text} setText={setText} {...chatAvailableState} />}
           {inputMode === 'edit' && editMessage && (
             <EditInput
               {...props}
@@ -57,6 +59,7 @@ const GroupChannelInput = (props: GroupChannelProps['Input']) => {
               setText={setText}
               editMessage={editMessage}
               setEditMessage={setEditMessage}
+              disabled={chatAvailableState.disabled}
             />
           )}
         </View>

package/src/domain/groupChannel/types.ts

@@ -89,7 +89,7 @@ export interface GroupChannelProps {
     onPressImageMessage?: (message: SendbirdFileMessage, uri: string) => void;
   };
   Input: {
-    channel: SendbirdGroupChannel;
+    shouldRenderInput: boolean;
     onSendFileMessage: (file: FileType) => Promise<void>;
     onSendUserMessage: (text: string) => Promise<void>;
     onUpdateFileMessage: (editedFile: FileType, message: SendbirdFileMessage) => Promise<void>;

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersHeader.tsx

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

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersList.tsx

@@ -0,0 +1,32 @@
+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 { GroupChannelBannedUsersProps } from '../types';
+
+const GroupChannelBannedUsersList = ({
+  renderUser,
+  bannedUsers,
+  onLoadNext,
+  ListEmptyComponent,
+}: GroupChannelBannedUsersProps['List']) => {
+  const renderItem: ListRenderItem<SendbirdRestrictedUser> = useFreshCallback(({ item }) =>
+    renderUser?.({ user: item }),
+  );
+  const { left, right } = useSafeAreaInsets();
+
+  return (
+    <FlatList
+      data={bannedUsers}
+      renderItem={renderItem}
+      contentContainerStyle={{ paddingLeft: left, paddingRight: right, flexGrow: 1 }}
+      ListEmptyComponent={ListEmptyComponent}
+      onEndReached={() => onLoadNext()}
+      bounces={false}
+    />
+  );
+};
+
+export default GroupChannelBannedUsersList;

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersStatusEmpty.tsx

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

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersStatusError.tsx

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

package/src/domain/groupChannelBannedUsers/component/GroupChannelBannedUsersStatusLoading.tsx

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

package/src/domain/groupChannelBannedUsers/index.ts

@@ -0,0 +1,6 @@
+export { default as GroupChannelBannedUsersList } from './component/GroupChannelBannedUsersList';
+export { default as GroupChannelBannedUsersHeader } from './component/GroupChannelBannedUsersHeader';
+export { default as GroupChannelBannedUsersStatusLoading } from './component/GroupChannelBannedUsersStatusLoading';
+export { default as GroupChannelBannedUsersStatusEmpty } from './component/GroupChannelBannedUsersStatusEmpty';
+export { default as createGroupChannelBannedUsersModule } from './module/createGroupChannelBannedUsersModule';
+export { GroupChannelBannedUsersContextsProvider, GroupChannelBannedUsersContexts } from './module/moduleContext';

package/src/domain/groupChannelBannedUsers/module/createGroupChannelBannedUsersModule.tsx

@@ -0,0 +1,21 @@
+import GroupChannelBannedUsersHeader from '../component/GroupChannelBannedUsersHeader';
+import GroupChannelBannedUsersList from '../component/GroupChannelBannedUsersList';
+import GroupChannelBannedUsersStatusEmpty from '../component/GroupChannelBannedUsersStatusEmpty';
+import GroupChannelBannedUsersStatusError from '../component/GroupChannelBannedUsersStatusError';
+import GroupChannelBannedUsersStatusLoading from '../component/GroupChannelBannedUsersStatusLoading';
+import type { GroupChannelBannedUsersModule } from '../types';
+import { GroupChannelBannedUsersContextsProvider } from './moduleContext';
+
+const createGroupChannelBannedUsersModule = ({
+  Header = GroupChannelBannedUsersHeader,
+  List = GroupChannelBannedUsersList,
+  StatusLoading = GroupChannelBannedUsersStatusLoading,
+  StatusEmpty = GroupChannelBannedUsersStatusEmpty,
+  StatusError = GroupChannelBannedUsersStatusError,
+  Provider = GroupChannelBannedUsersContextsProvider,
+  ...module
+}: Partial<GroupChannelBannedUsersModule> = {}): GroupChannelBannedUsersModule => {
+  return { Header, List, Provider, StatusEmpty, StatusLoading, StatusError, ...module };
+};
+
+export default createGroupChannelBannedUsersModule;

package/src/domain/groupChannelBannedUsers/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 { GroupChannelBannedUsersContextsType, GroupChannelBannedUsersModule } from '../types';
+
+export const GroupChannelBannedUsersContexts: GroupChannelBannedUsersContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdGroupChannel,
+  }),
+};
+
+export const GroupChannelBannedUsersContextsProvider: GroupChannelBannedUsersModule['Provider'] = ({
+  channel,
+  children,
+}) => {
+  const { STRINGS } = useLocalization();
+  return (
+    <ProviderLayout>
+      <GroupChannelBannedUsersContexts.Fragment.Provider
+        value={{ headerTitle: STRINGS.GROUP_CHANNEL_BANNED_USERS.HEADER_TITLE, channel }}
+      >
+        {children}
+      </GroupChannelBannedUsersContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/groupChannelBannedUsers/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 GroupChannelBannedUsersProps = {
+  Fragment: {
+    channel: SendbirdGroupChannel;
+    onPressHeaderLeft: GroupChannelBannedUsersProps['Header']['onPressHeaderLeft'];
+    renderUser?: GroupChannelBannedUsersProps['List']['renderUser'];
+  };
+  Header: {
+    onPressHeaderLeft: () => void;
+  };
+  List: {
+    renderUser: (props: { user: SendbirdRestrictedUser }) => React.ReactElement | null;
+    bannedUsers: SendbirdRestrictedUser[];
+    ListEmptyComponent?: React.ReactElement;
+    onLoadNext: () => Promise<void>;
+  };
+  StatusError: {
+    onPressRetry: () => void;
+  };
+  Provider: {
+    channel: SendbirdGroupChannel;
+  };
+};
+
+/**
+ * Internal context for GroupChannelBannedUsers
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type GroupChannelBannedUsersContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdGroupChannel;
+  }>;
+};
+export interface GroupChannelBannedUsersModule {
+  Provider: CommonComponent<GroupChannelBannedUsersProps['Provider']>;
+  Header: CommonComponent<GroupChannelBannedUsersProps['Header']>;
+  List: CommonComponent<GroupChannelBannedUsersProps['List']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+  StatusError: CommonComponent<GroupChannelBannedUsersProps['StatusError']>;
+}
+
+export type GroupChannelBannedUsersFragment = CommonComponent<GroupChannelBannedUsersProps['Fragment']>;