@sendbird/uikit-react-native 2.3.0 → 2.4.0

package/src/domain/openChannel/component/OpenChannelInput.tsx

@@ -0,0 +1,80 @@
+import React, { useCallback, useContext, useEffect, useState } from 'react';
+
+import { useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { SendbirdBaseChannel, getOpenChannelChatAvailableState, useUniqHandlerId } from '@sendbird/uikit-utils';
+
+import ChannelInput from '../../../components/ChannelInput';
+import { UNKNOWN_USER_ID } from '../../../constants';
+import { useSendbirdChat } from '../../../hooks/useContext';
+import { OpenChannelContexts } from '../module/moduleContext';
+import type { OpenChannelProps } from '../types';
+
+const OpenChannelInput = (props: OpenChannelProps['Input']) => {
+  const { sdk, currentUser } = useSendbirdChat();
+
+  const {
+    channel,
+    messageToEdit,
+    setMessageToEdit,
+    keyboardAvoidOffset = 0,
+  } = useContext(OpenChannelContexts.Fragment);
+
+  const [chatAvailableState, setChatAvailableState] = useState({ frozen: false, muted: false, disabled: false });
+
+  const updateChatAvailableState = useCallback(
+    (baseChannel: SendbirdBaseChannel) => {
+      if (baseChannel.isOpenChannel()) {
+        const userId = currentUser?.userId ?? UNKNOWN_USER_ID;
+        getOpenChannelChatAvailableState(baseChannel, userId).then(setChatAvailableState);
+      }
+    },
+    [currentUser?.userId],
+  );
+
+  useEffect(() => {
+    updateChatAvailableState(channel);
+  }, [channel, updateChatAvailableState]);
+
+  const handlerId = useUniqHandlerId('OpenChannelInput');
+  useChannelHandler(
+    sdk,
+    handlerId,
+    {
+      onChannelFrozen(channel) {
+        updateChatAvailableState(channel);
+      },
+      onChannelUnfrozen(channel) {
+        updateChatAvailableState(channel);
+      },
+      onUserMuted(channel) {
+        updateChatAvailableState(channel);
+      },
+      onUserUnmuted(channel) {
+        updateChatAvailableState(channel);
+      },
+      onOperatorUpdated(channel) {
+        updateChatAvailableState(channel);
+      },
+    },
+    'open',
+  );
+
+  return (
+    <ChannelInput
+      channel={channel}
+      messageToEdit={messageToEdit}
+      setMessageToEdit={setMessageToEdit}
+      inputMuted={chatAvailableState.muted}
+      inputFrozen={channel.isFrozen}
+      inputDisabled={chatAvailableState.disabled}
+      keyboardAvoidOffset={keyboardAvoidOffset}
+      shouldRenderInput={props.shouldRenderInput}
+      onPressSendUserMessage={props.onPressSendUserMessage}
+      onPressSendFileMessage={props.onPressSendFileMessage}
+      onPressUpdateUserMessage={props.onPressUpdateUserMessage}
+      onPressUpdateFileMessage={props.onPressUpdateFileMessage}
+    />
+  );
+};
+
+export default React.memo(OpenChannelInput);

package/src/domain/openChannel/component/OpenChannelMessageList.tsx

@@ -0,0 +1,322 @@
+import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
+import { ListRenderItem, Platform, View } from 'react-native';
+
+import type { BottomSheetItem } from '@sendbird/uikit-react-native-foundation';
+import {
+  ChannelFrozenBanner,
+  createStyleSheet,
+  useAlert,
+  useBottomSheet,
+  useToast,
+  useUIKitTheme,
+} from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdFileMessage, SendbirdMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+import {
+  Logger,
+  getAvailableUriFromFileMessage,
+  getFileExtension,
+  getFileType,
+  isMyMessage,
+  messageKeyExtractor,
+  toMegabyte,
+  useFreshCallback,
+  useSafeAreaPadding,
+} from '@sendbird/uikit-utils';
+
+import type { ChatFlatListRef } from '../../../components/ChatFlatList';
+import ChatFlatList from '../../../components/ChatFlatList';
+import { useLocalization, usePlatformService } from '../../../hooks/useContext';
+import SBUUtils from '../../../libs/SBUUtils';
+import { OpenChannelContexts } from '../module/moduleContext';
+import type { OpenChannelProps } from '../types';
+
+const HANDLE_NEXT_MSG_SEPARATELY = Platform.select({ default: true });
+
+const OpenChannelMessageList = ({
+  currentUserId,
+  channel,
+  messages,
+  renderMessage,
+  nextMessages,
+  newMessagesFromMembers,
+  onBottomReached,
+  onTopReached,
+  renderNewMessagesButton,
+  renderScrollToBottomButton,
+  onResendFailedMessage,
+  onDeleteMessage,
+  onPressMediaMessage,
+  flatListProps,
+  enableMessageGrouping,
+}: OpenChannelProps['MessageList']) => {
+  const { STRINGS } = useLocalization();
+  const { colors } = useUIKitTheme();
+
+  const [scrollLeaveBottom, setScrollLeaveBottom] = useState(false);
+  const [newMessagesInternalBuffer, setNewMessagesInternalBuffer] = useState(() => newMessagesFromMembers);
+
+  const scrollRef = useRef<ChatFlatListRef>(null);
+
+  const safeAreaLayout = useSafeAreaPadding(['left', 'right']);
+  const getMessagePressActions = useGetMessagePressActions({
+    channel,
+    currentUserId,
+    onDeleteMessage,
+    onResendFailedMessage,
+    onPressMediaMessage,
+  });
+
+  const renderItem: ListRenderItem<SendbirdMessage> = useFreshCallback(({ item, index }) => {
+    const { onPress, onLongPress } = getMessagePressActions(item);
+    return renderMessage({
+      message: item,
+      prevMessage: messages[index + 1],
+      nextMessage: messages[index - 1],
+      onPress,
+      onLongPress,
+      enableMessageGrouping,
+      channel,
+      currentUserId,
+    });
+  });
+
+  if (!HANDLE_NEXT_MSG_SEPARATELY) {
+    useEffect(() => {
+      if (newMessagesInternalBuffer.length !== 0) {
+        setNewMessagesInternalBuffer((prev) => prev.concat(newMessagesFromMembers));
+      }
+      onBottomReached();
+    }, [newMessagesFromMembers]);
+  }
+
+  const onLeaveScrollBottom = useCallback((val: boolean) => {
+    if (!HANDLE_NEXT_MSG_SEPARATELY) setNewMessagesInternalBuffer([]);
+    setScrollLeaveBottom(val);
+  }, []);
+
+  return (
+    <View style={[{ flex: 1, backgroundColor: colors.background }, safeAreaLayout]}>
+      {channel.isFrozen && (
+        <ChannelFrozenBanner style={styles.frozenBanner} text={STRINGS.OPEN_CHANNEL.LIST_BANNER_FROZEN} />
+      )}
+      <ChatFlatList
+        nextMessages={nextMessages}
+        onBottomReached={onBottomReached}
+        onTopReached={onTopReached}
+        onLeaveScrollBottom={onLeaveScrollBottom}
+        currentUserId={currentUserId}
+        {...flatListProps}
+        listKey={`open-channel-messages-${channel.url}`}
+        ref={scrollRef}
+        data={messages}
+        renderItem={renderItem}
+        keyExtractor={messageKeyExtractor}
+        contentContainerStyle={[
+          // { minHeight: '100%', justifyContent: 'flex-end' },
+          channel.isFrozen && styles.frozenListPadding,
+          flatListProps?.contentContainerStyle,
+        ]}
+      />
+      {renderNewMessagesButton && (
+        <View style={[styles.newMsgButton, safeAreaLayout]}>
+          {renderNewMessagesButton({
+            visible: scrollLeaveBottom,
+            onPress: () => scrollRef.current?.scrollToBottom(false),
+            newMessages: !HANDLE_NEXT_MSG_SEPARATELY ? newMessagesInternalBuffer : newMessagesFromMembers,
+          })}
+        </View>
+      )}
+      {renderScrollToBottomButton && (
+        <View pointerEvents={scrollLeaveBottom ? 'auto' : 'none'} style={[styles.scrollButton, safeAreaLayout]}>
+          {renderScrollToBottomButton({
+            visible: scrollLeaveBottom,
+            onPress: () => scrollRef.current?.scrollToBottom(false),
+          })}
+        </View>
+      )}
+    </View>
+  );
+};
+
+type HandleableMessage = SendbirdUserMessage | SendbirdFileMessage;
+const useGetMessagePressActions = ({
+  currentUserId,
+  onResendFailedMessage,
+  onDeleteMessage,
+  onPressMediaMessage,
+}: Pick<
+  OpenChannelProps['MessageList'],
+  'channel' | 'currentUserId' | 'onResendFailedMessage' | 'onDeleteMessage' | 'onPressMediaMessage'
+>) => {
+  const { colors } = useUIKitTheme();
+  const { STRINGS } = useLocalization();
+  const toast = useToast();
+  const { openSheet } = useBottomSheet();
+  const { alert } = useAlert();
+  const { clipboardService, fileService } = usePlatformService();
+  const { setMessageToEdit } = useContext(OpenChannelContexts.Fragment);
+
+  const handleFailedMessage = (message: HandleableMessage) => {
+    openSheet({
+      sheetItems: [
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_RETRY,
+          onPress: () =>
+            onResendFailedMessage(message).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error')),
+        },
+        {
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_FAILED_REMOVE,
+          titleColor: colors.ui.dialog.default.none.destructive,
+          onPress: () => confirmDelete(message),
+        },
+      ],
+    });
+  };
+  const confirmDelete = (message: HandleableMessage) => {
+    alert({
+      title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE,
+      buttons: [
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL,
+        },
+        {
+          text: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK,
+          style: 'destructive',
+          onPress: () => onDeleteMessage(message).catch(() => toast.show(STRINGS.TOAST.DELETE_MSG_ERROR, 'error')),
+        },
+      ],
+    });
+  };
+
+  return (msg: SendbirdMessage) => {
+    if (!msg.isUserMessage() && !msg.isFileMessage()) {
+      return { onPress: undefined, onLongPress: undefined };
+    }
+
+    const sheetItems: BottomSheetItem['sheetItems'] = [];
+    const response: { onPress?: () => void; onLongPress?: () => void } = {
+      onPress: undefined,
+      onLongPress: undefined,
+    };
+
+    if (msg.isUserMessage()) {
+      sheetItems.push({
+        icon: 'copy',
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_COPY,
+        onPress: () => {
+          clipboardService.setString(msg.message || '');
+          toast.show(STRINGS.TOAST.COPY_OK, 'success');
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push(
+          {
+            icon: 'edit',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_EDIT,
+            onPress: () => setMessageToEdit(msg),
+          },
+          {
+            icon: 'delete',
+            title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+            onPress: () => confirmDelete(msg),
+          },
+        );
+      }
+    }
+
+    if (msg.isFileMessage()) {
+      sheetItems.push({
+        icon: 'download',
+        title: STRINGS.LABELS.CHANNEL_MESSAGE_SAVE,
+        onPress: async () => {
+          if (toMegabyte(msg.size) > 4) {
+            toast.show(STRINGS.TOAST.DOWNLOAD_START, 'success');
+          }
+
+          fileService
+            .save({ fileUrl: msg.url, fileName: msg.name, fileType: msg.type })
+            .then((response) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_OK, 'success');
+              Logger.log('File saved to', response);
+            })
+            .catch((err) => {
+              toast.show(STRINGS.TOAST.DOWNLOAD_ERROR, 'error');
+              Logger.log('File save failure', err);
+            });
+        },
+      });
+
+      if (isMyMessage(msg, currentUserId) && msg.sendingStatus === 'succeeded') {
+        sheetItems.push({
+          icon: 'delete',
+          title: STRINGS.LABELS.CHANNEL_MESSAGE_DELETE,
+          onPress: () => confirmDelete(msg),
+        });
+      }
+
+      const fileType = getFileType(msg.type || getFileExtension(msg.name));
+      switch (fileType) {
+        case 'image':
+        case 'video':
+        case 'audio': {
+          response.onPress = () => {
+            onPressMediaMessage?.(msg, () => onDeleteMessage(msg), getAvailableUriFromFileMessage(msg));
+          };
+          break;
+        }
+        default: {
+          response.onPress = () => SBUUtils.openURL(msg.url);
+          break;
+        }
+      }
+    }
+
+    if (sheetItems.length > 0) {
+      response.onLongPress = () => {
+        openSheet({ sheetItems });
+      };
+    }
+
+    if (msg.sendingStatus === 'failed') {
+      response.onLongPress = () => handleFailedMessage(msg);
+      response.onPress = () => {
+        onResendFailedMessage(msg).catch(() => toast.show(STRINGS.TOAST.RESEND_MSG_ERROR, 'error'));
+      };
+    }
+
+    if (msg.sendingStatus === 'pending') {
+      response.onLongPress = undefined;
+      response.onPress = undefined;
+    }
+
+    return response;
+  };
+};
+
+const styles = createStyleSheet({
+  frozenBanner: {
+    position: 'absolute',
+    zIndex: 999,
+    top: 8,
+    left: 8,
+    right: 8,
+  },
+  frozenListPadding: {
+    paddingBottom: 32,
+  },
+  newMsgButton: {
+    position: 'absolute',
+    zIndex: 999,
+    bottom: 10,
+    alignSelf: 'center',
+  },
+  scrollButton: {
+    position: 'absolute',
+    zIndex: 998,
+    bottom: 10,
+    right: 16,
+  },
+});
+
+export default React.memo(OpenChannelMessageList);

package/src/domain/openChannel/component/OpenChannelStatusEmpty.tsx

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

package/src/domain/openChannel/component/OpenChannelStatusLoading.tsx

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

package/src/domain/openChannel/index.ts

@@ -0,0 +1,6 @@
+export { default as OpenChannelHeader } from './component/OpenChannelHeader';
+export { default as OpenChannelInput } from './component/OpenChannelInput';
+export { default as OpenChannelStatusLoading } from './component/OpenChannelStatusLoading';
+export { default as OpenChannelStatusEmpty } from './component/OpenChannelStatusEmpty';
+export { default as createOpenChannelModule } from './module/createOpenChannelModule';
+export { OpenChannelContextsProvider, OpenChannelContexts } from './module/moduleContext';

package/src/domain/openChannel/module/createOpenChannelModule.tsx

@@ -0,0 +1,21 @@
+import OpenChannelHeader from '../component/OpenChannelHeader';
+import OpenChannelInput from '../component/OpenChannelInput';
+import OpenChannelMessageList from '../component/OpenChannelMessageList';
+import OpenChannelStatusEmpty from '../component/OpenChannelStatusEmpty';
+import OpenChannelStatusLoading from '../component/OpenChannelStatusLoading';
+import type { OpenChannelModule } from '../types';
+import { OpenChannelContextsProvider } from './moduleContext';
+
+const createOpenChannelModule = ({
+  Header = OpenChannelHeader,
+  MessageList = OpenChannelMessageList,
+  Input = OpenChannelInput,
+  StatusLoading = OpenChannelStatusLoading,
+  StatusEmpty = OpenChannelStatusEmpty,
+  Provider = OpenChannelContextsProvider,
+  ...module
+}: Partial<OpenChannelModule> = {}): OpenChannelModule => {
+  return { Header, MessageList, Input, Provider, StatusEmpty, StatusLoading, ...module };
+};
+
+export default createOpenChannelModule;

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

@@ -0,0 +1,41 @@
+import React, { createContext, useState } from 'react';
+
+import type { SendbirdOpenChannel } from '@sendbird/uikit-utils';
+import { NOOP, SendbirdFileMessage, SendbirdUserMessage } from '@sendbird/uikit-utils';
+
+import ProviderLayout from '../../../components/ProviderLayout';
+import { useLocalization } from '../../../hooks/useContext';
+import type { OpenChannelContextsType, OpenChannelModule } from '../types';
+
+export const OpenChannelContexts: OpenChannelContextsType = {
+  Fragment: createContext({
+    headerTitle: '',
+    channel: {} as SendbirdOpenChannel,
+    setMessageToEdit: NOOP,
+  }),
+};
+
+export const OpenChannelContextsProvider: OpenChannelModule['Provider'] = ({
+  children,
+  channel,
+  keyboardAvoidOffset,
+}) => {
+  const { STRINGS } = useLocalization();
+  const [messageToEdit, setMessageToEdit] = useState<SendbirdUserMessage | SendbirdFileMessage>();
+
+  return (
+    <ProviderLayout>
+      <OpenChannelContexts.Fragment.Provider
+        value={{
+          headerTitle: STRINGS.OPEN_CHANNEL.HEADER_TITLE(channel),
+          channel,
+          keyboardAvoidOffset,
+          messageToEdit,
+          setMessageToEdit,
+        }}
+      >
+        {children}
+      </OpenChannelContexts.Fragment.Provider>
+    </ProviderLayout>
+  );
+};

package/src/domain/openChannel/types.ts

@@ -0,0 +1,127 @@
+import type React from 'react';
+import type { FlatListProps } from 'react-native';
+
+import type { UseOpenChannelMessagesOptions } from '@sendbird/uikit-chat-hooks';
+import type { Icon } from '@sendbird/uikit-react-native-foundation';
+import type {
+  OnBeforeHandler,
+  SendbirdFileMessage,
+  SendbirdFileMessageCreateParams,
+  SendbirdFileMessageUpdateParams,
+  SendbirdMessage,
+  SendbirdOpenChannel,
+  SendbirdUserMessage,
+  SendbirdUserMessageCreateParams,
+  SendbirdUserMessageUpdateParams,
+} from '@sendbird/uikit-utils';
+
+import type { ChannelInputProps } from '../../components/ChannelInput';
+import type { UserProfileContextType } from '../../contexts/UserProfileCtx';
+import type { CommonComponent } from '../../types';
+
+export type OpenChannelProps = {
+  Fragment: {
+    channel: SendbirdOpenChannel;
+    onChannelDeleted: () => void;
+    onPressHeaderLeft: OpenChannelProps['Header']['onPressHeaderLeft'];
+    onPressHeaderRightWithSettings: OpenChannelProps['Header']['onPressHeaderRight'];
+    onPressHeaderRightWithParticipants: OpenChannelProps['Header']['onPressHeaderRight'];
+    onPressMediaMessage?: OpenChannelProps['MessageList']['onPressMediaMessage'];
+
+    onBeforeSendUserMessage?: OnBeforeHandler<SendbirdUserMessageCreateParams>;
+    onBeforeSendFileMessage?: OnBeforeHandler<SendbirdFileMessageCreateParams>;
+    onBeforeUpdateUserMessage?: OnBeforeHandler<SendbirdUserMessageUpdateParams>;
+    onBeforeUpdateFileMessage?: OnBeforeHandler<SendbirdFileMessageUpdateParams>;
+
+    renderMessage?: OpenChannelProps['MessageList']['renderMessage'];
+    renderNewMessagesButton?: OpenChannelProps['MessageList']['renderNewMessagesButton'];
+    renderScrollToBottomButton?: OpenChannelProps['MessageList']['renderScrollToBottomButton'];
+
+    enableMessageGrouping?: OpenChannelProps['MessageList']['enableMessageGrouping'];
+
+    keyboardAvoidOffset?: OpenChannelProps['Provider']['keyboardAvoidOffset'];
+    flatListProps?: OpenChannelProps['MessageList']['flatListProps'];
+    sortComparator?: UseOpenChannelMessagesOptions['sortComparator'];
+    queryCreator?: UseOpenChannelMessagesOptions['queryCreator'];
+  };
+  Header: {
+    rightIconName: keyof typeof Icon.Assets;
+    onPressHeaderLeft: () => void;
+    onPressHeaderRight: () => void;
+  };
+
+  MessageList: {
+    enableMessageGrouping: boolean;
+    currentUserId?: string;
+    channel: SendbirdOpenChannel;
+    messages: SendbirdMessage[];
+    nextMessages: SendbirdMessage[];
+    newMessagesFromMembers: SendbirdMessage[];
+    onTopReached: () => void;
+    onBottomReached: () => void;
+
+    onResendFailedMessage: (failedMessage: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
+    onDeleteMessage: (message: SendbirdUserMessage | SendbirdFileMessage) => Promise<void>;
+    onPressMediaMessage?: (message: SendbirdFileMessage, deleteMessage: () => Promise<void>, uri: string) => void;
+
+    renderMessage: (props: {
+      message: SendbirdMessage;
+      prevMessage?: SendbirdMessage;
+      nextMessage?: SendbirdMessage;
+      onPress?: () => void;
+      onLongPress?: () => void;
+      onPressAvatar?: UserProfileContextType['show'];
+      channel: OpenChannelProps['MessageList']['channel'];
+      currentUserId?: OpenChannelProps['MessageList']['currentUserId'];
+      enableMessageGrouping: OpenChannelProps['MessageList']['enableMessageGrouping'];
+    }) => React.ReactElement | null;
+    renderNewMessagesButton: null | CommonComponent<{
+      visible: boolean;
+      onPress: () => void;
+      newMessages: SendbirdMessage[];
+    }>;
+    renderScrollToBottomButton: null | CommonComponent<{
+      visible: boolean;
+      onPress: () => void;
+    }>;
+    flatListProps?: Omit<FlatListProps<SendbirdMessage>, 'data' | 'renderItem'>;
+  };
+  Input: Pick<
+    ChannelInputProps,
+    | 'shouldRenderInput'
+    | 'onPressSendUserMessage'
+    | 'onPressSendFileMessage'
+    | 'onPressUpdateUserMessage'
+    | 'onPressUpdateFileMessage'
+  >;
+
+  Provider: {
+    channel: SendbirdOpenChannel;
+    keyboardAvoidOffset?: number;
+  };
+};
+
+/**
+ * Internal context for OpenChannel
+ * For example, the developer can create a custom header
+ * with getting data from the domain context
+ * */
+export type OpenChannelContextsType = {
+  Fragment: React.Context<{
+    headerTitle: string;
+    channel: SendbirdOpenChannel;
+    messageToEdit?: SendbirdUserMessage | SendbirdFileMessage;
+    setMessageToEdit: (msg?: SendbirdUserMessage | SendbirdFileMessage) => void;
+    keyboardAvoidOffset?: number;
+  }>;
+};
+export interface OpenChannelModule {
+  Provider: CommonComponent<OpenChannelProps['Provider']>;
+  Header: CommonComponent<OpenChannelProps['Header']>;
+  MessageList: CommonComponent<OpenChannelProps['MessageList']>;
+  Input: CommonComponent<OpenChannelProps['Input']>;
+  StatusEmpty: CommonComponent;
+  StatusLoading: CommonComponent;
+}
+
+export type OpenChannelFragment = CommonComponent<OpenChannelProps['Fragment']>;

package/src/domain/openChannelBannedUsers/component/OpenChannelBannedUsersHeader.tsx

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

package/src/domain/openChannelBannedUsers/component/OpenChannelBannedUsersList.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FlatList, ListRenderItem } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { SendbirdRestrictedUser, getUserUniqId, useFreshCallback } from '@sendbird/uikit-utils';
+
+import type { OpenChannelBannedUsersProps } from '../types';
+
+const OpenChannelBannedUsersList = ({
+  renderUser,
+  bannedUsers,
+  onLoadNext,
+  ListEmptyComponent,
+}: OpenChannelBannedUsersProps['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}
+      keyExtractor={getUserUniqId}
+    />
+  );
+};
+
+export default OpenChannelBannedUsersList;