@sendbird/uikit-react-native 2.0.3 → 2.1.0

package/src/components/MessageRenderer/MessageIncomingAvatar.tsx

@@ -1,18 +1,25 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Pressable, View } from 'react-native';
 
 import { Avatar, createStyleSheet } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMessage } from '@sendbird/uikit-utils';
 
+import { useUserProfile } from '../../hooks/useContext';
+
 type Props = {
   message: SendbirdMessage;
   grouping: boolean;
 };
 const MessageIncomingAvatar = ({ message, grouping }: Props) => {
+  const { show } = useUserProfile();
   if (grouping) return <View style={styles.avatar} />;
   return (
     <View style={styles.avatar}>
-      {(message.isFileMessage() || message.isUserMessage()) && <Avatar size={26} uri={message.sender?.profileUrl} />}
+      {(message.isFileMessage() || message.isUserMessage()) && (
+        <Pressable onPress={() => show(message.sender)}>
+          <Avatar size={26} uri={message.sender?.profileUrl} />
+        </Pressable>
+      )}
     </View>
   );
 };

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/components/UserActionBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import { Pressable, TouchableOpacity, View } from 'react-native';
+import type { GestureResponderEvent } from 'react-native';
 
 import { Avatar, Icon, Text, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
 import { conditionChaining } from '@sendbird/uikit-utils';
@@ -8,18 +9,23 @@ type Props = {
   uri: string;
   name: string;
   label?: string;
+
   muted: boolean;
   disabled: boolean;
-  onPressActionMenu?: () => void;
+
+  onPressActionMenu?: (ev: GestureResponderEvent) => void;
+  onPressAvatar?: (ev: GestureResponderEvent) => void;
 };
-const UserActionBar = ({ muted, uri, name, disabled, onPressActionMenu, label }: Props) => {
+const UserActionBar = ({ muted, uri, name, disabled, label, onPressActionMenu, onPressAvatar }: Props) => {
   const { colors } = useUIKitTheme();
 
   const iconColor = conditionChaining([disabled], [colors.onBackground04, colors.onBackground01]);
 
   return (
     <View style={styles.container}>
-      <Avatar muted={muted} size={36} uri={uri} containerStyle={styles.avatar} />
+      <Pressable onPress={onPressAvatar} style={styles.avatar}>
+        <Avatar muted={muted} size={36} uri={uri} />
+      </Pressable>
       <View style={[styles.infoContainer, { borderBottomColor: colors.onBackground04 }]}>
         <Text subtitle2 numberOfLines={1} style={styles.name} color={colors.onBackground01}>
           {name}

package/src/containers/GroupChannelPreviewContainer.tsx

@@ -102,6 +102,7 @@ const GroupChannelPreviewContainer = ({ onPress, onLongPress, channel }: Props)
         badgeCount={channel.unreadMessageCount}
         memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
         frozen={channel.isFrozen}
+        broadcast={channel.isBroadcast}
         notificationOff={channel.myPushTriggerOption === 'off'}
       />
     </Pressable>
@@ -112,6 +113,10 @@ const styles = createStyleSheet({
   titleCaptionIcon: {
     marginRight: 4,
   },
+  broadcastCover: {
+    padding: 12,
+    borderRadius: 28,
+  },
 });
 
 export default GroupChannelPreviewContainer;

package/src/containers/SendbirdUIKitContainer.tsx

@@ -14,11 +14,19 @@ import {
   ToastProvider,
   UIKitThemeProvider,
 } from '@sendbird/uikit-react-native-foundation';
-import type { SendbirdChatSDK } from '@sendbird/uikit-utils';
-
-import { LocalizationProvider } from '../contexts/Localization';
-import { PlatformServiceProvider } from '../contexts/PlatformService';
-import { SendbirdChatProvider } from '../contexts/SendbirdChat';
+import type {
+  SendbirdBaseChannel,
+  SendbirdChatSDK,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  SendbirdUser,
+} from '@sendbird/uikit-utils';
+
+import { LocalizationProvider } from '../contexts/LocalizationCtx';
+import { PlatformServiceProvider } from '../contexts/PlatformServiceCtx';
+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';
@@ -52,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;
   };
@@ -69,6 +74,13 @@ export type SendbirdUIKitContainerProps = React.PropsWithChildren<{
   toast?: {
     dismissTimeout?: number;
   };
+  userProfile?: {
+    onCreateChannel: (channel: SendbirdBaseChannel) => void;
+    onBeforeCreateChannel?: (
+      channelParams: SendbirdGroupChannelCreateParams,
+      users: SendbirdUser[] | SendbirdMember[],
+    ) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+  };
   errorBoundary?: {
     onError?: (props: ErrorBoundaryProps) => void;
     ErrorInfoComponent?: (props: ErrorBoundaryProps) => JSX.Element;
@@ -83,6 +95,7 @@ const SendbirdUIKitContainer = ({
   localization,
   styles,
   toast,
+  userProfile,
   errorBoundary,
 }: SendbirdUIKitContainerProps) => {
   const unsubscribes = useRef<(() => void)[]>([]).current;
@@ -147,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
@@ -163,7 +177,12 @@ const SendbirdUIKitContainer = ({
               >
                 <LocalizedDialogProvider>
                   <ToastProvider dismissTimeout={toast?.dismissTimeout}>
-                    <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
+                    <UserProfileProvider
+                      onCreateChannel={userProfile?.onCreateChannel}
+                      onBeforeCreateChannel={userProfile?.onBeforeCreateChannel}
+                    >
+                      <InternalErrorBoundaryContainer {...errorBoundary}>{children}</InternalErrorBoundaryContainer>
+                    </UserProfileProvider>
                   </ToastProvider>
                 </LocalizedDialogProvider>
               </HeaderStyleProvider>

package/src/contexts/{SendbirdChat.tsx → 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/UserProfileCtx.tsx

@@ -0,0 +1,126 @@
+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';
+import type {
+  SendbirdGroupChannel,
+  SendbirdGroupChannelCreateParams,
+  SendbirdMember,
+  SendbirdUser,
+} from '@sendbird/uikit-utils';
+import { Logger, PASS, useIIFE } from '@sendbird/uikit-utils';
+
+import { LocalizationContext } from '../contexts/LocalizationCtx';
+import { SendbirdChatContext } from '../contexts/SendbirdChatCtx';
+
+type OnCreateChannel = (channel: SendbirdGroupChannel) => void;
+type OnBeforeCreateChannel = (
+  channelParams: SendbirdGroupChannelCreateParams,
+  users: SendbirdUser[] | SendbirdMember[],
+) => SendbirdGroupChannelCreateParams | Promise<SendbirdGroupChannelCreateParams>;
+
+export type UserProfileContextType = {
+  show(user: SendbirdUser | SendbirdMember): void;
+  hide(): void;
+};
+
+type Props = React.PropsWithChildren<{
+  onCreateChannel?: OnCreateChannel;
+  onBeforeCreateChannel?: OnBeforeCreateChannel;
+}>;
+
+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: UserProfileContextType['show'] = useCallback((user) => {
+    setUser(user);
+    setVisible(true);
+  }, []);
+
+  const hide: UserProfileContextType['hide'] = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  const userProfileButton = useIIFE(() => {
+    const isMe = chatContext.currentUser && user?.userId === chatContext.currentUser.userId;
+    if (isMe) return undefined;
+
+    const onPressMessageButton = async () => {
+      if (user) {
+        const params: SendbirdGroupChannelCreateParams = {
+          invitedUserIds: [user.userId],
+          name: '',
+          coverUrl: '',
+          isDistinct: false,
+        };
+
+        if (chatContext.currentUser) params.operatorUserIds = [chatContext.currentUser.userId];
+        const processedParams = await onBeforeCreateChannel(params, [user]);
+
+        hide();
+        const channel = await chatContext.sdk.groupChannel.createChannel(processedParams);
+
+        if (onCreateChannel) {
+          onCreateChannel(channel);
+        } else {
+          Logger.warn(
+            'Please set `onCreateChannel` before message to user from profile card, see `userProfile` prop in the `SendbirdUIKitContainer` props',
+          );
+        }
+      }
+    };
+
+    return (
+      <OutlinedButton onPress={onPressMessageButton}>
+        {localizationContext.STRINGS.PROFILE_CARD.BUTTON_MESSAGE}
+      </OutlinedButton>
+    );
+  });
+
+  return (
+    <UserProfileContext.Provider value={{ show, hide }}>
+      {children}
+      <Modal
+        type={'slide'}
+        onClose={hide}
+        onDismiss={() => setUser(undefined)}
+        visible={visible && Boolean(user)}
+        backgroundStyle={styles.modal}
+      >
+        {user && (
+          <ProfileCard
+            containerStyle={[
+              styles.profileCardContainer,
+              { paddingLeft: left, paddingRight: right, paddingBottom: bottom },
+            ]}
+            uri={user.profileUrl}
+            username={user.nickname || localizationContext.STRINGS.LABELS.USER_NO_NAME}
+            bodyLabel={localizationContext.STRINGS.PROFILE_CARD.BODY_LABEL}
+            body={localizationContext.STRINGS.PROFILE_CARD.BODY(user)}
+            button={userProfileButton}
+          />
+        )}
+      </Modal>
+    </UserProfileContext.Provider>
+  );
+};
+
+const styles = createStyleSheet({
+  modal: {
+    justifyContent: 'flex-end',
+  },
+  profileCardContainer: {
+    borderTopLeftRadius: 8,
+    borderTopRightRadius: 8,
+  },
+});

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;