@sendbird/uikit-react-native 2.3.0 → 2.4.0

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -4,7 +4,7 @@ import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
 import type { ActionMenuItem } from '@sendbird/uikit-react-native-foundation';
 import { Icon, useActionMenu } from '@sendbird/uikit-react-native-foundation';
 import type { SendbirdMember } from '@sendbird/uikit-utils';
-import { ifMuted, ifOperator, isDifferentChannel, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
+import { ifOperator, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -13,15 +13,15 @@ import createUserListModule from '../domain/userList/module/createUserListModule
 import type { UserListModule } from '../domain/userList/types';
 import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
 
-const noop = () => '';
-const HOOK_NAME = 'createGroupChannelMembersFragment';
+const RETURN_EMPTY_STRING = () => '';
+
 const createGroupChannelMembersFragment = (
   initModule?: Partial<UserListModule<SendbirdMember>>,
 ): GroupChannelMembersFragment<SendbirdMember> => {
   const UserListModule = createUserListModule<SendbirdMember>(initModule);
 
   return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
-    const uniqId = useUniqId(HOOK_NAME);
+    const handlerId = useUniqHandlerId('GroupChannelMembersFragment');
 
     const refreshSchedule = useRef<NodeJS.Timeout>();
     const { STRINGS } = useLocalization();
@@ -33,7 +33,7 @@ const createGroupChannelMembersFragment = (
       queryCreator: () => channel.createMemberListQuery({ limit: 20 }),
     });
 
-    useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+    useChannelHandler(sdk, handlerId, {
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);
@@ -100,8 +100,8 @@ const createGroupChannelMembersFragment = (
 
             if (!channel.isBroadcast) {
               menuItems.push({
-                title: ifMuted(user.isMuted, STRINGS.LABELS.UNMUTE, STRINGS.LABELS.MUTE),
-                onPress: ifMuted(
+                title: ifThenOr(user.isMuted, STRINGS.LABELS.UNMUTE, STRINGS.LABELS.MUTE),
+                onPress: ifThenOr(
                   user.isMuted,
                   () => channel.unmuteUser(user),
                   () => channel.muteUser(user),
@@ -123,7 +123,10 @@ const createGroupChannelMembersFragment = (
     });
 
     return (
-      <UserListModule.Provider headerRight={noop} headerTitle={STRINGS.GROUP_CHANNEL_MEMBERS.HEADER_TITLE}>
+      <UserListModule.Provider
+        headerRight={RETURN_EMPTY_STRING}
+        headerTitle={STRINGS.GROUP_CHANNEL_MEMBERS.HEADER_TITLE}
+      >
         <UserListModule.Header
           shouldActivateHeaderRight={() => true}
           onPressHeaderLeft={onPressHeaderLeft}

package/src/fragments/createGroupChannelMutedMembersFragment.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { NOOP, isDifferentChannel, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
+import { NOOP, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -13,24 +13,31 @@ import type {
 } from '../domain/groupChannelMutedMembers/types';
 import { useLocalization, useSendbirdChat } from '../hooks/useContext';
 
-const HOOK_NAME = 'createGroupChannelMutedMembersFragment';
 const createGroupChannelMutedMembersFragment = (
   initModule?: Partial<GroupChannelMutedMembersModule>,
 ): GroupChannelMutedMembersFragment => {
   const GroupChannelMutedMembersModule = createGroupChannelMutedMembersModule(initModule);
 
   return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
-    const uniqId = useUniqId(HOOK_NAME);
+    const handlerId = useUniqHandlerId('GroupChannelMutedMembersFragment');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
     const { openMenu } = useActionMenu();
 
-    const { users, deleteUser, loading, refresh, error, next } = useUserList(sdk, {
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
       queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
     });
 
-    useChannelHandler(sdk, `${HOOK_NAME}_${uniqId}`, {
+    useChannelHandler(sdk, handlerId, {
+      onUserMuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        upsertUser(user);
+      },
+      onUserUnmuted(eventChannel, user) {
+        if (isDifferentChannel(eventChannel, channel)) return;
+        deleteUser(user.userId);
+      },
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);

package/src/fragments/createGroupChannelOperatorsFragment.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
 import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
-import { ifOperator, isDifferentChannel, useFreshCallback, useUniqId } from '@sendbird/uikit-utils';
+import { ifOperator, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
 
 import StatusComposition from '../components/StatusComposition';
 import UserActionBar from '../components/UserActionBar';
@@ -10,14 +10,13 @@ import { createGroupChannelOperatorsModule } from '../domain/groupChannelOperato
 import type { GroupChannelOperatorsFragment, GroupChannelOperatorsModule } from '../domain/groupChannelOperators/types';
 import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
 
-const name = 'createGroupChannelOperatorsFragment';
 const createGroupChannelOperatorsFragment = (
   initModule?: Partial<GroupChannelOperatorsModule>,
 ): GroupChannelOperatorsFragment => {
   const GroupChannelOperatorsModule = createGroupChannelOperatorsModule(initModule);
 
   return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
-    const uniqId = useUniqId(name);
+    const handlerId = useUniqHandlerId('GroupChannelOperatorsFragment');
 
     const { STRINGS } = useLocalization();
     const { sdk, currentUser } = useSendbirdChat();
@@ -28,7 +27,7 @@ const createGroupChannelOperatorsFragment = (
       queryCreator: () => channel.createOperatorListQuery({ limit: 20 }),
     });
 
-    useChannelHandler(sdk, `${name}_${uniqId}`, {
+    useChannelHandler(sdk, handlerId, {
       onUserLeft(eventChannel, user) {
         if (isDifferentChannel(eventChannel, channel)) return;
         deleteUser(user.userId);

package/src/fragments/createOpenChannelBannedUsersFragment.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, useFreshCallback } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { createOpenChannelBannedUsersModule } from '../domain/openChannelBannedUsers';
+import type {
+  OpenChannelBannedUsersFragment,
+  OpenChannelBannedUsersModule,
+} from '../domain/openChannelBannedUsers/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createOpenChannelBannedUsersFragment = (
+  initModule?: Partial<OpenChannelBannedUsersModule>,
+): OpenChannelBannedUsersFragment => {
+  const OpenChannelBannedUsersModule = createOpenChannelBannedUsersModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+    const { STRINGS } = useLocalization();
+    const { currentUser, sdk } = useSendbirdChat();
+    const { openMenu } = useActionMenu();
+
+    const { users, deleteUser, loading, next, refresh, error } = useUserList(sdk, {
+      queryCreator: () => channel.createBannedUserListQuery({ limit: 20 }),
+    });
+
+    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
+      if (renderUser) return renderUser(props);
+
+      const { user } = props;
+
+      return (
+        <UserActionBar
+          muted={false}
+          uri={user.profileUrl}
+          name={
+            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
+            (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')
+          }
+          disabled={user.userId === currentUser?.userId}
+          onPressActionMenu={() => {
+            openMenu({
+              title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+              menuItems: [
+                {
+                  title: STRINGS.LABELS.UNBAN,
+                  onPress: () => channel.unbanUser(user).then(() => deleteUser(user.userId)),
+                },
+              ],
+            });
+          }}
+        />
+      );
+    });
+
+    return (
+      <OpenChannelBannedUsersModule.Provider channel={channel}>
+        <OpenChannelBannedUsersModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<OpenChannelBannedUsersModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<OpenChannelBannedUsersModule.StatusError onPressRetry={refresh} />}
+        >
+          <OpenChannelBannedUsersModule.List
+            renderUser={_renderUser}
+            bannedUsers={users}
+            onLoadNext={next}
+            ListEmptyComponent={<OpenChannelBannedUsersModule.StatusEmpty />}
+          />
+        </StatusComposition>
+      </OpenChannelBannedUsersModule.Provider>
+    );
+  };
+};
+
+export default createOpenChannelBannedUsersFragment;

package/src/fragments/createOpenChannelCreateFragment.tsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { StyleSheet } from 'react-native';
+
+import { Box, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, PASS, SendbirdOpenChannelCreateParams } from '@sendbird/uikit-utils';
+
+import { createOpenChannelCreateModule } from '../domain/openChannelCreate';
+import type { OpenChannelCreateFragment, OpenChannelCreateModule } from '../domain/openChannelCreate/types';
+import { useSendbirdChat } from '../hooks/useContext';
+import type { FileType } from '../platform/types';
+
+const createOpenChannelCreateFragment = (initModule?: Partial<OpenChannelCreateModule>): OpenChannelCreateFragment => {
+  const OpenChannelCreateModule = createOpenChannelCreateModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, onBeforeCreateChannel = PASS, onCreateChannel }) => {
+    const { sdk, currentUser } = useSendbirdChat();
+    const { palette } = useUIKitTheme();
+
+    const [loading, setLoading] = useState(false);
+    const [channelName, setChannelName] = useState('');
+    const [channelCoverFile, setChannelCoverFile] = useState<FileType | undefined>(undefined);
+
+    const shouldActivateHeaderRight = () => {
+      return Boolean(currentUser) && channelName.trim() !== '';
+    };
+
+    const onPressHeaderRight = async () => {
+      if (currentUser) {
+        try {
+          setLoading(true);
+          const params: SendbirdOpenChannelCreateParams = {
+            name: channelName,
+            operatorUserIds: [currentUser.userId],
+          };
+
+          if (channelCoverFile) params.coverUrlOrImage = channelCoverFile;
+
+          const processedParams = await onBeforeCreateChannel(params);
+          const channel = await sdk.openChannel.createChannel(processedParams);
+
+          setLoading(false);
+          onCreateChannel(channel);
+        } catch {
+          setLoading(false);
+        }
+      }
+    };
+
+    return (
+      <OpenChannelCreateModule.Provider>
+        <OpenChannelCreateModule.Header
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={onPressHeaderRight}
+          shouldActivateHeaderRight={shouldActivateHeaderRight}
+        />
+        <OpenChannelCreateModule.ProfileInput
+          channelName={channelName}
+          onChangeChannelName={setChannelName}
+          channelCoverFile={channelCoverFile}
+          onChangeChannelCoverFile={setChannelCoverFile}
+        />
+        {loading && (
+          <Box
+            backgroundColor={palette.transparent}
+            style={StyleSheet.absoluteFill}
+            alignItems={'center'}
+            justifyContent={'center'}
+          >
+            <OpenChannelCreateModule.StatusLoading />
+          </Box>
+        )}
+      </OpenChannelCreateModule.Provider>
+    );
+  };
+};
+
+export default createOpenChannelCreateFragment;

package/src/fragments/createOpenChannelFragment.tsx

@@ -0,0 +1,157 @@
+import React, { useMemo } from 'react';
+
+import { SendbirdError } from '@sendbird/chat';
+import { useOpenChannelMessages } from '@sendbird/uikit-chat-hooks';
+import { useToast } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, PASS, SBErrorCode, messageComparator, useFreshCallback } from '@sendbird/uikit-utils';
+
+import OpenChannelMessageRenderer from '../components/OpenChannelMessageRenderer';
+import ScrollToBottomButton from '../components/ScrollToBottomButton';
+import StatusComposition from '../components/StatusComposition';
+import { UNKNOWN_USER_ID } from '../constants';
+import { createOpenChannelModule } from '../domain/openChannel';
+import type { OpenChannelFragment, OpenChannelModule, OpenChannelProps } from '../domain/openChannel/types';
+import { useLocalization, useSendbirdChat, useUserProfile } from '../hooks/useContext';
+
+const createOpenChannelFragment = (initModule?: Partial<OpenChannelModule>): OpenChannelFragment => {
+  const OpenChannelModule = createOpenChannelModule(initModule);
+
+  return ({
+    channel,
+    onChannelDeleted = NOOP,
+    onPressHeaderLeft = NOOP,
+    onPressHeaderRightWithSettings = NOOP,
+    onPressHeaderRightWithParticipants = NOOP,
+
+    onBeforeSendUserMessage = PASS,
+    onBeforeSendFileMessage = PASS,
+    onBeforeUpdateUserMessage = PASS,
+    onBeforeUpdateFileMessage = PASS,
+    onPressMediaMessage = NOOP,
+
+    renderMessage,
+    renderNewMessagesButton = () => null,
+    renderScrollToBottomButton = (props) => <ScrollToBottomButton {...props} />,
+
+    enableMessageGrouping = true,
+    keyboardAvoidOffset,
+    flatListProps,
+    queryCreator,
+    sortComparator = messageComparator,
+  }) => {
+    const { sdk, currentUser } = useSendbirdChat();
+    const { STRINGS } = useLocalization();
+    const { show: showToast } = useToast();
+    const { show: showUserProfile } = useUserProfile();
+
+    const {
+      messages,
+      nextMessages,
+      newMessagesFromMembers,
+      next,
+      prev,
+      sendFileMessage,
+      sendUserMessage,
+      updateFileMessage,
+      updateUserMessage,
+      resendMessage,
+      deleteMessage,
+      loading,
+    } = useOpenChannelMessages(sdk, channel, currentUser?.userId, {
+      queryCreator,
+      sortComparator,
+      onChannelDeleted,
+      onError(error) {
+        if (error instanceof SendbirdError) {
+          switch (error.code) {
+            case SBErrorCode.CHANNEL_NOT_FOUND_SDK:
+            case SBErrorCode.CHANNEL_NOT_FOUND_SERVER: {
+              return showToast(STRINGS.TOAST.GET_CHANNEL_ERROR, 'error');
+            }
+          }
+        }
+
+        showToast(STRINGS.TOAST.UNKNOWN_ERROR, 'error');
+      },
+    });
+
+    const isOperator = channel.isOperator(currentUser?.userId ?? UNKNOWN_USER_ID);
+
+    const _renderMessage: OpenChannelProps['MessageList']['renderMessage'] = useFreshCallback((props) => {
+      if (renderMessage) return renderMessage(props);
+      return <OpenChannelMessageRenderer {...props} onPressAvatar={showUserProfile} />;
+    });
+
+    const memoizedFlatListProps = useMemo(
+      () => ({
+        ListEmptyComponent: <OpenChannelModule.StatusEmpty />,
+        contentContainerStyle: { flexGrow: 1 },
+        ...flatListProps,
+      }),
+      [loading, flatListProps],
+    );
+
+    const onPressSendUserMessage: OpenChannelProps['Input']['onPressSendUserMessage'] = useFreshCallback(
+      async (params) => {
+        const processedParams = await onBeforeSendUserMessage(params);
+        await sendUserMessage(processedParams);
+      },
+    );
+    const onPressSendFileMessage: OpenChannelProps['Input']['onPressSendFileMessage'] = useFreshCallback(
+      async (params) => {
+        const processedParams = await onBeforeSendFileMessage(params);
+        await sendFileMessage(processedParams);
+      },
+    );
+    const onPressUpdateUserMessage: OpenChannelProps['Input']['onPressUpdateUserMessage'] = useFreshCallback(
+      async (message, params) => {
+        const processedParams = await onBeforeUpdateUserMessage(params);
+        await updateUserMessage(message.messageId, processedParams);
+      },
+    );
+    const onPressUpdateFileMessage: OpenChannelProps['Input']['onPressUpdateFileMessage'] = useFreshCallback(
+      async (message, params) => {
+        const processedParams = await onBeforeUpdateFileMessage(params);
+        await updateFileMessage(message.messageId, processedParams);
+      },
+    );
+
+    return (
+      <OpenChannelModule.Provider channel={channel} keyboardAvoidOffset={keyboardAvoidOffset}>
+        <OpenChannelModule.Header
+          onPressHeaderLeft={onPressHeaderLeft}
+          rightIconName={isOperator ? 'info' : 'members'}
+          onPressHeaderRight={isOperator ? onPressHeaderRightWithSettings : onPressHeaderRightWithParticipants}
+        />
+        <StatusComposition loading={loading} LoadingComponent={<OpenChannelModule.StatusLoading />}>
+          <OpenChannelModule.MessageList
+            channel={channel}
+            enableMessageGrouping={enableMessageGrouping}
+            currentUserId={currentUser?.userId}
+            renderMessage={_renderMessage}
+            messages={messages}
+            nextMessages={nextMessages}
+            newMessagesFromMembers={newMessagesFromMembers}
+            onTopReached={prev}
+            onBottomReached={next}
+            renderNewMessagesButton={renderNewMessagesButton}
+            renderScrollToBottomButton={renderScrollToBottomButton}
+            onResendFailedMessage={resendMessage}
+            onDeleteMessage={deleteMessage}
+            onPressMediaMessage={onPressMediaMessage}
+            flatListProps={memoizedFlatListProps}
+          />
+          <OpenChannelModule.Input
+            shouldRenderInput
+            onPressSendUserMessage={onPressSendUserMessage}
+            onPressSendFileMessage={onPressSendFileMessage}
+            onPressUpdateUserMessage={onPressUpdateUserMessage}
+            onPressUpdateFileMessage={onPressUpdateFileMessage}
+          />
+        </StatusComposition>
+      </OpenChannelModule.Provider>
+    );
+  };
+};
+
+export default createOpenChannelFragment;

package/src/fragments/createOpenChannelListFragment.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { useOpenChannelList } from '@sendbird/uikit-chat-hooks';
+import { OpenChannelPreview, PressBox } from '@sendbird/uikit-react-native-foundation';
+import { NOOP } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import { createOpenChannelListModule } from '../domain/openChannelList';
+import type {
+  OpenChannelListFragment,
+  OpenChannelListModule,
+  OpenChannelListProps,
+} from '../domain/openChannelList/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createOpenChannelListFragment = (initModule?: Partial<OpenChannelListModule>): OpenChannelListFragment => {
+  const OpenChannelListModule = createOpenChannelListModule(initModule);
+
+  return ({ onPressCreateChannel, onPressChannel = NOOP, flatListProps, renderOpenChannelPreview, queryCreator }) => {
+    const { sdk, currentUser } = useSendbirdChat();
+    const { STRINGS } = useLocalization();
+    const { openChannels, next, refresh, refreshing, loading, error } = useOpenChannelList(sdk, currentUser?.userId, {
+      queryCreator,
+    });
+
+    const _renderOpenChannelPreview: OpenChannelListProps['List']['renderOpenChannelPreview'] = (props) => {
+      if (renderOpenChannelPreview) return renderOpenChannelPreview(props);
+      return (
+        <PressBox activeOpacity={0.8} onPress={() => onPressChannel(props.channel)}>
+          <OpenChannelPreview
+            coverUrl={props.channel.coverUrl}
+            title={STRINGS.OPEN_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(props.channel)}
+            frozen={props.channel.isFrozen}
+            participantsCount={props.channel.participantCount}
+          />
+        </PressBox>
+      );
+    };
+
+    return (
+      <OpenChannelListModule.Provider>
+        <OpenChannelListModule.Header onPressHeaderRight={onPressCreateChannel} />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<OpenChannelListModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<OpenChannelListModule.StatusError onPressRetry={refresh} />}
+        >
+          <OpenChannelListModule.List
+            renderOpenChannelPreview={_renderOpenChannelPreview}
+            openChannels={openChannels}
+            onLoadNext={next}
+            refreshing={refreshing}
+            onRefresh={refresh}
+            flatListProps={{
+              ListEmptyComponent: <OpenChannelListModule.StatusEmpty />,
+              contentContainerStyle: { flexGrow: 1 },
+              ...flatListProps,
+            }}
+          />
+        </StatusComposition>
+      </OpenChannelListModule.Provider>
+    );
+  };
+};
+
+export default createOpenChannelListFragment;

package/src/fragments/createOpenChannelModerationFragment.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
+import { NOOP } from '@sendbird/uikit-utils';
+
+import { createOpenChannelModerationModule } from '../domain/openChannelModeration';
+import type { OpenChannelModerationFragment, OpenChannelModerationModule } from '../domain/openChannelModeration/types';
+
+const createOpenChannelModerationFragment = (
+  initModule?: Partial<OpenChannelModerationModule>,
+): OpenChannelModerationFragment => {
+  const OpenChannelModerationModule = createOpenChannelModerationModule(initModule);
+
+  return ({
+    onPressHeaderLeft = NOOP,
+    channel,
+    onPressMenuMutedParticipants,
+    onPressMenuOperators,
+    menuItemsCreator,
+    onPressMenuBannedUsers,
+  }) => {
+    const { left, right } = useSafeAreaInsets();
+    const { colors } = useUIKitTheme();
+
+    return (
+      <OpenChannelModerationModule.Provider channel={channel}>
+        <OpenChannelModerationModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <ScrollView
+          style={{ backgroundColor: colors.background }}
+          contentContainerStyle={{
+            paddingLeft: left + styles.viewContainer.paddingHorizontal,
+            paddingRight: right + styles.viewContainer.paddingHorizontal,
+          }}
+        >
+          <OpenChannelModerationModule.Menu
+            onPressMenuOperators={onPressMenuOperators}
+            onPressMenuMutedParticipants={onPressMenuMutedParticipants}
+            onPressMenuBannedUsers={onPressMenuBannedUsers}
+            menuItemsCreator={menuItemsCreator}
+          />
+        </ScrollView>
+      </OpenChannelModerationModule.Provider>
+    );
+  };
+};
+
+const styles = createStyleSheet({
+  viewContainer: {
+    paddingHorizontal: 16,
+  },
+});
+
+export default createOpenChannelModerationFragment;

package/src/fragments/createOpenChannelMutedParticipantsFragment.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+
+import { useChannelHandler, useUserList } from '@sendbird/uikit-chat-hooks';
+import { useActionMenu } from '@sendbird/uikit-react-native-foundation';
+import { NOOP, ifThenOr, isDifferentChannel, useFreshCallback, useUniqHandlerId } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserActionBar from '../components/UserActionBar';
+import { createOpenChannelMutedParticipantsModule } from '../domain/openChannelMutedParticipants';
+import type {
+  OpenChannelMutedParticipantsFragment,
+  OpenChannelMutedParticipantsModule,
+} from '../domain/openChannelMutedParticipants/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const createOpenChannelMutedParticipantsFragment = (
+  initModule?: Partial<OpenChannelMutedParticipantsModule>,
+): OpenChannelMutedParticipantsFragment => {
+  const OpenChannelMutedParticipantsModule = createOpenChannelMutedParticipantsModule(initModule);
+
+  return ({ onPressHeaderLeft = NOOP, channel, renderUser }) => {
+    const handlerId = useUniqHandlerId('OpenChannelMutedParticipants');
+
+    const { STRINGS } = useLocalization();
+    const { sdk, currentUser } = useSendbirdChat();
+    const { openMenu } = useActionMenu();
+
+    const { users, deleteUser, upsertUser, loading, refresh, error, next } = useUserList(sdk, {
+      queryCreator: () => channel.createMutedUserListQuery({ limit: 20 }),
+    });
+
+    useChannelHandler(
+      sdk,
+      handlerId,
+      {
+        onUserMuted(eventChannel, user) {
+          if (isDifferentChannel(eventChannel, channel)) return;
+          upsertUser(user);
+        },
+        onUserUnmuted(eventChannel, user) {
+          if (isDifferentChannel(eventChannel, channel)) return;
+          deleteUser(user.userId);
+        },
+      },
+      'open',
+    );
+
+    const _renderUser: NonNullable<typeof renderUser> = useFreshCallback((props) => {
+      if (renderUser) return renderUser(props);
+
+      const { user } = props;
+      const isUserOperator = channel.isOperator(user.userId);
+
+      return (
+        <UserActionBar
+          muted
+          uri={user.profileUrl}
+          label={ifThenOr(isUserOperator, STRINGS.LABELS.USER_BAR_OPERATOR, '')}
+          name={
+            (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
+            (user.userId === currentUser?.userId ? STRINGS.LABELS.USER_BAR_ME_POSTFIX : '')
+          }
+          disabled={user.userId === currentUser?.userId}
+          onPressActionMenu={() => {
+            openMenu({
+              title: user.nickname || STRINGS.LABELS.USER_NO_NAME,
+              menuItems: [
+                {
+                  title: STRINGS.LABELS.UNMUTE,
+                  onPress: () => channel.unmuteUser(user).then(() => deleteUser(user.userId)),
+                },
+              ],
+            });
+          }}
+        />
+      );
+    });
+
+    return (
+      <OpenChannelMutedParticipantsModule.Provider channel={channel}>
+        <OpenChannelMutedParticipantsModule.Header onPressHeaderLeft={onPressHeaderLeft} />
+        <StatusComposition
+          loading={loading}
+          LoadingComponent={<OpenChannelMutedParticipantsModule.StatusLoading />}
+          error={Boolean(error)}
+          ErrorComponent={<OpenChannelMutedParticipantsModule.StatusError onPressRetry={refresh} />}
+        >
+          <OpenChannelMutedParticipantsModule.List
+            renderUser={_renderUser}
+            mutedParticipants={users}
+            onLoadNext={next}
+            ListEmptyComponent={<OpenChannelMutedParticipantsModule.StatusEmpty />}
+          />
+        </StatusComposition>
+      </OpenChannelMutedParticipantsModule.Provider>
+    );
+  };
+};
+
+export default createOpenChannelMutedParticipantsFragment;