@sendbird/uikit-react-native 1.0.0-rc.1

package/src/fragments/createGroupChannelCreateFragment.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { useUserList } from '@sendbird/uikit-chat-hooks';
+import { Logger, PASS, SendbirdUser } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserSelectableBar from '../components/UserSelectableBar';
+import type { GroupChannelCreateFragment } from '../domain/groupChannelUserList/types';
+import createUserListModule from '../domain/userList/module/createUserListModule';
+import type { UserListModule } from '../domain/userList/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const defaultUserIdsGenerator = <T,>(users: T[]) => {
+  const userIds = users
+    .map((user) => {
+      // @ts-ignore
+      return user.userId as string | undefined;
+    })
+    .filter((u): u is string => Boolean(u));
+
+  if (userIds.length === 0) {
+    Logger.warn(
+      'GroupChannelCreateFragment: Couldn\'t find user ids! if you provide "queryCreator", please provide "userIdsGenerator" as well',
+    );
+  }
+
+  return userIds;
+};
+
+const createGroupChannelCreateFragment = <UserType,>(
+  initModule?: Partial<UserListModule<UserType>>,
+): GroupChannelCreateFragment<UserType> => {
+  const UserListModule = createUserListModule<UserType>(initModule);
+
+  return ({
+    userIdsGenerator = defaultUserIdsGenerator,
+    onPressHeaderLeft,
+    onBeforeCreateChannel = PASS,
+    onCreateChannel,
+    sortComparator,
+    queryCreator,
+    channelType = 'GROUP',
+    renderUser,
+  }) => {
+    const { sdk, currentUser } = useSendbirdChat();
+    const { STRINGS } = useLocalization();
+    const { users, refreshing, loading, error, refresh, next } = useUserList(sdk, {
+      queryCreator,
+      sortComparator,
+    });
+
+    const _renderUser: NonNullable<typeof renderUser> = useCallback(
+      (user, selectedUsers, setSelectedUsers) => {
+        if (queryCreator && !renderUser) {
+          throw new Error('You should provide "renderUser" when providing "queryCreator"');
+        }
+        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+
+        const sbUser = user as unknown as SendbirdUser;
+        const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
+        const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
+
+        const isMe = sbUser.userId === currentUser?.userId;
+        if (isMe) return null;
+
+        const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
+        const isSelected = userIdx > -1;
+
+        return (
+          <TouchableOpacity
+            activeOpacity={0.7}
+            onPress={() => {
+              sbSetSelectedUsers(([...draft]) => {
+                if (isSelected) draft.splice(userIdx, 1);
+                else draft.push(sbUser);
+                return draft;
+              });
+            }}
+          >
+            <UserSelectableBar
+              uri={sbUser.profileUrl}
+              name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
+              selected={isSelected}
+              disabled={false}
+            />
+          </TouchableOpacity>
+        );
+      },
+      [renderUser, queryCreator],
+    );
+
+    return (
+      <UserListModule.Provider
+        headerRight={(selectedUsers) => STRINGS.GROUP_CHANNEL_CREATE.HEADER_RIGHT({ selectedUsers })}
+        headerTitle={STRINGS.GROUP_CHANNEL_CREATE.HEADER_TITLE}
+      >
+        <UserListModule.Header
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={async (users) => {
+            const params = new sdk.GroupChannelParams();
+
+            if (channelType === 'BROADCAST') params.isBroadcast = true;
+            if (channelType === 'SUPER_GROUP') params.isSuper = true;
+            if (currentUser) params.operatorUserIds = [currentUser.userId];
+            params.addUserIds(userIdsGenerator(users));
+            params.name = '';
+            params.coverUrl = '';
+            params.isDistinct = false;
+
+            const processedParams = await onBeforeCreateChannel(params, users);
+            const channel = await sdk.GroupChannel.createChannel(processedParams);
+            onCreateChannel(channel);
+          }}
+        />
+        <StatusComposition
+          loading={loading}
+          error={Boolean(error)}
+          LoadingComponent={<UserListModule.StatusLoading />}
+          ErrorComponent={<UserListModule.StatusError onPressRetry={() => refresh()} />}
+        >
+          <UserListModule.List
+            onLoadNext={next}
+            users={users}
+            renderUser={_renderUser}
+            onRefresh={refresh}
+            refreshing={refreshing}
+            ListEmptyComponent={<UserListModule.StatusEmpty />}
+          />
+        </StatusComposition>
+      </UserListModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelCreateFragment;

package/src/fragments/createGroupChannelFragment.tsx

@@ -0,0 +1,153 @@
+import React, { useCallback, useMemo } from 'react';
+
+import { useGroupChannelMessages } from '@sendbird/uikit-chat-hooks';
+import { NOOP, PASS, messageComparator } from '@sendbird/uikit-utils';
+
+import MessageRenderer from '../components/MessageRenderer';
+import NewMessagesButton from '../components/NewMessagesButton';
+import ScrollToBottomButton from '../components/ScrollToBottomButton';
+import StatusComposition from '../components/StatusComposition';
+import createGroupChannelModule from '../domain/groupChannel/module/createGroupChannelModule';
+import type { GroupChannelFragment, GroupChannelModule, GroupChannelProps } from '../domain/groupChannel/types';
+import { useSendbirdChat } from '../hooks/useContext';
+
+const createGroupChannelFragment = (initModule?: Partial<GroupChannelModule>): GroupChannelFragment => {
+  const GroupChannelModule = createGroupChannelModule(initModule);
+
+  return ({
+    renderNewMessagesButton = (props) => <NewMessagesButton {...props} />,
+    renderScrollToBottomButton = (props) => <ScrollToBottomButton {...props} />,
+    renderMessage,
+    enableMessageGrouping = true,
+    enableTypingIndicator = true,
+    onPressHeaderLeft = NOOP,
+    onPressHeaderRight = NOOP,
+    onPressImageMessage = NOOP,
+    onChannelDeleted = NOOP,
+    onBeforeSendFileMessage = PASS,
+    onBeforeSendUserMessage = PASS,
+    channel,
+    keyboardAvoidOffset,
+    queryCreator,
+    collectionCreator,
+    sortComparator = messageComparator,
+    flatListProps,
+  }) => {
+    const { sdk, currentUser } = useSendbirdChat();
+
+    const {
+      activeChannel,
+      messages,
+      nextMessages,
+      newMessagesFromMembers,
+      next,
+      prev,
+      sendFileMessage,
+      sendUserMessage,
+      updateFileMessage,
+      updateUserMessage,
+      resendMessage,
+      deleteMessage,
+      loading,
+    } = useGroupChannelMessages(sdk, channel, currentUser?.userId, {
+      collectionCreator,
+      queryCreator,
+      sortComparator,
+      onChannelDeleted,
+      enableCollectionWithoutLocalCache: true,
+    });
+
+    const _renderMessage: GroupChannelProps['MessageList']['renderMessage'] = useCallback(
+      (props) => {
+        if (renderMessage) return renderMessage(props);
+        return <MessageRenderer {...props} />;
+      },
+      [renderMessage],
+    );
+
+    const memoizedFlatListProps = useMemo(
+      () => ({
+        ListEmptyComponent: <GroupChannelModule.StatusEmpty />,
+        contentContainerStyle: { flexGrow: 1 },
+        ...flatListProps,
+      }),
+      [loading, flatListProps],
+    );
+
+    const onSendFileMessage: GroupChannelProps['Input']['onSendFileMessage'] = useCallback(
+      async (file) => {
+        const params = new sdk.FileMessageParams();
+        params.file = file;
+        const processedParams = await onBeforeSendFileMessage(params);
+        await sendFileMessage(processedParams);
+      },
+      [sdk, sendFileMessage, onBeforeSendFileMessage],
+    );
+
+    const onSendUserMessage: GroupChannelProps['Input']['onSendUserMessage'] = useCallback(
+      async (text) => {
+        const params = new sdk.UserMessageParams();
+        params.message = text;
+        const processedParams = await onBeforeSendUserMessage(params);
+        await sendUserMessage(processedParams);
+      },
+      [sdk, sendUserMessage, onBeforeSendUserMessage],
+    );
+    const onUpdateFileMessage: GroupChannelProps['Input']['onUpdateFileMessage'] = useCallback(
+      async (editedFile, message) => {
+        const params = new sdk.FileMessageParams();
+        params.file = editedFile;
+        const processedParams = await onBeforeSendFileMessage(params);
+        await updateFileMessage(message.messageId, processedParams);
+      },
+      [sdk, updateFileMessage, onBeforeSendFileMessage],
+    );
+    const onUpdateUserMessage: GroupChannelProps['Input']['onUpdateUserMessage'] = useCallback(
+      async (editedText, message) => {
+        const params = new sdk.UserMessageParams();
+        params.message = editedText;
+        const processedParams = await onBeforeSendUserMessage(params);
+        await updateUserMessage(message.messageId, processedParams);
+      },
+      [sdk, updateUserMessage, onBeforeSendUserMessage],
+    );
+
+    return (
+      <GroupChannelModule.Provider
+        channel={activeChannel}
+        enableTypingIndicator={enableTypingIndicator}
+        keyboardAvoidOffset={keyboardAvoidOffset}
+      >
+        <GroupChannelModule.Header onPressHeaderLeft={onPressHeaderLeft} onPressHeaderRight={onPressHeaderRight} />
+        <StatusComposition loading={loading} LoadingComponent={<GroupChannelModule.StatusLoading />}>
+          <GroupChannelModule.MessageList
+            enableMessageGrouping={enableMessageGrouping}
+            currentUserId={currentUser?.userId}
+            channel={activeChannel}
+            renderMessage={_renderMessage}
+            messages={messages}
+            nextMessages={nextMessages}
+            newMessagesFromMembers={newMessagesFromMembers}
+            onTopReached={prev}
+            onBottomReached={next}
+            renderNewMessagesButton={renderNewMessagesButton}
+            renderScrollToBottomButton={renderScrollToBottomButton}
+            onResendFailedMessage={resendMessage}
+            onDeleteMessage={deleteMessage}
+            onPressImageMessage={onPressImageMessage}
+            flatListProps={memoizedFlatListProps}
+          />
+          <GroupChannelModule.Input
+            channel={activeChannel}
+            onSendFileMessage={onSendFileMessage}
+            onSendUserMessage={onSendUserMessage}
+            onUpdateFileMessage={onUpdateFileMessage}
+            onUpdateUserMessage={onUpdateUserMessage}
+          />
+        </StatusComposition>
+      </GroupChannelModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelFragment;

package/src/fragments/createGroupChannelInviteFragment.tsx

@@ -0,0 +1,127 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { useActiveGroupChannel, useUserList } from '@sendbird/uikit-chat-hooks';
+import { Logger, SendbirdUser } from '@sendbird/uikit-utils';
+
+import StatusComposition from '../components/StatusComposition';
+import UserSelectableBar from '../components/UserSelectableBar';
+import type { GroupChannelInviteFragment } from '../domain/groupChannelUserList/types';
+import createUserListModule from '../domain/userList/module/createUserListModule';
+import type { UserListModule } from '../domain/userList/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const defaultUserIdsGenerator = <T,>(users: T[]) => {
+  const userIds = users
+    .map((user) => {
+      // @ts-ignore
+      return user.userId as string | undefined;
+    })
+    .filter((u): u is string => Boolean(u));
+
+  if (userIds.length === 0) {
+    Logger.warn(
+      'GroupChannelInviteFragment: Couldn\'t find user id to invite! if you provided "queryCreator", please provide "userIdsGenerator" as well',
+    );
+  }
+
+  return userIds;
+};
+
+const createGroupChannelInviteFragment = <UserType,>(
+  initModule?: Partial<UserListModule<UserType>>,
+): GroupChannelInviteFragment<UserType> => {
+  const UserListModule = createUserListModule<UserType>(initModule);
+
+  return ({
+    channel,
+    onPressHeaderLeft,
+    onInviteMembers,
+    userIdsGenerator = defaultUserIdsGenerator,
+    sortComparator,
+    queryCreator,
+    renderUser,
+  }) => {
+    const { sdk } = useSendbirdChat();
+    const { STRINGS } = useLocalization();
+    const { users, refreshing, refresh, next, error, loading } = useUserList(sdk, {
+      queryCreator,
+      sortComparator,
+    });
+
+    const { activeChannel } = useActiveGroupChannel(sdk, channel);
+
+    const _renderUser: NonNullable<typeof renderUser> = useCallback(
+      (user, selectedUsers, setSelectedUsers) => {
+        if (queryCreator && !renderUser) {
+          throw new Error('You should provide "renderUser" when providing "queryCreator"');
+        }
+        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+
+        const sbUser = user as unknown as SendbirdUser;
+        const sbSelectedUsers = selectedUsers as unknown as SendbirdUser[];
+        const sbSetSelectedUsers = setSelectedUsers as unknown as React.Dispatch<React.SetStateAction<SendbirdUser[]>>;
+
+        const joinedUserIds = activeChannel.members.map((u) => u.userId);
+        const userIdx = sbSelectedUsers.findIndex((u) => u.userId === sbUser.userId);
+        const isSelected = userIdx > -1;
+
+        const isAlreadyJoined = joinedUserIds.includes(sbUser.userId);
+
+        return (
+          <TouchableOpacity
+            activeOpacity={0.7}
+            disabled={isAlreadyJoined}
+            onPress={() => {
+              sbSetSelectedUsers(([...draft]) => {
+                if (isSelected) draft.splice(userIdx, 1);
+                else draft.push(sbUser);
+                return draft;
+              });
+            }}
+          >
+            <UserSelectableBar
+              uri={sbUser.profileUrl}
+              name={sbUser.nickname || STRINGS.LABELS.USER_NO_NAME}
+              selected={isAlreadyJoined || isSelected}
+              disabled={isAlreadyJoined}
+            />
+          </TouchableOpacity>
+        );
+      },
+      [activeChannel, renderUser, queryCreator],
+    );
+    return (
+      <UserListModule.Provider
+        headerRight={(selectedUsers) => STRINGS.GROUP_CHANNEL_INVITE.HEADER_RIGHT({ selectedUsers })}
+        headerTitle={STRINGS.GROUP_CHANNEL_INVITE.HEADER_TITLE}
+      >
+        <UserListModule.Header
+          onPressHeaderLeft={onPressHeaderLeft}
+          onPressHeaderRight={async (users) => {
+            const userIds = userIdsGenerator(users);
+            const updatedChannel = await activeChannel.inviteWithUserIds(userIds);
+            onInviteMembers(updatedChannel);
+          }}
+        />
+        <StatusComposition
+          loading={loading}
+          error={Boolean(error)}
+          LoadingComponent={<UserListModule.StatusLoading />}
+          ErrorComponent={<UserListModule.StatusError onPressRetry={() => refresh()} />}
+        >
+          <UserListModule.List
+            onLoadNext={next}
+            users={users}
+            renderUser={_renderUser}
+            onRefresh={refresh}
+            refreshing={refreshing}
+            ListEmptyComponent={<UserListModule.StatusEmpty />}
+          />
+        </StatusComposition>
+      </UserListModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelInviteFragment;

package/src/fragments/createGroupChannelListFragment.tsx

@@ -0,0 +1,113 @@
+import React, { useCallback, useEffect } from 'react';
+import { AppState, Pressable } from 'react-native';
+
+import { useGroupChannelList } from '@sendbird/uikit-chat-hooks';
+import { GroupChannelPreview } from '@sendbird/uikit-react-native-foundation';
+import { Logger, PASS, channelComparator, getFileExtension, getFileType } from '@sendbird/uikit-utils';
+
+import ChannelCover from '../components/ChannelCover';
+import StatusComposition from '../components/StatusComposition';
+import { DEFAULT_LONG_PRESS_DELAY } from '../constants';
+import createGroupChannelListModule from '../domain/groupChannelList/module/createGroupChannelListModule';
+import type {
+  GroupChannelListFragment,
+  GroupChannelListModule,
+  GroupChannelListProps,
+} from '../domain/groupChannelList/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const iconMapper = { audio: 'file-audio', image: 'photo', video: 'play', file: 'file-document' } as const;
+const createGroupChannelListFragment = (initModule?: Partial<GroupChannelListModule>): GroupChannelListFragment => {
+  const GroupChannelListModule = createGroupChannelListModule(initModule);
+  return ({
+    TypeSelectorHeader,
+    onPressChannel,
+    onPressCreateChannel,
+    queryCreator,
+    sortComparator = channelComparator,
+    renderGroupChannelPreview,
+    // skipTypeSelection = true,
+    flatListProps = {},
+    menuItemCreator = PASS,
+  }) => {
+    const { sdk, currentUser, features, markAsDeliveredWithChannel } = useSendbirdChat();
+    const { STRINGS } = useLocalization();
+    const { groupChannels, next, loading } = useGroupChannelList(sdk, currentUser?.userId, {
+      queryCreator,
+      sortComparator,
+      enableCollectionWithoutLocalCache: true,
+    });
+
+    if (features.deliveryReceiptEnabled) {
+      useEffect(() => {
+        const listener = AppState.addEventListener('change', (status) => {
+          if (status === 'active') groupChannels.forEach(markAsDeliveredWithChannel);
+        });
+        return () => listener.remove();
+      }, []);
+    }
+
+    const _renderGroupChannelPreview: GroupChannelListProps['List']['renderGroupChannelPreview'] = useCallback(
+      (channel, onLongPressChannel) => {
+        if (renderGroupChannelPreview) return renderGroupChannelPreview(channel, onLongPressChannel);
+        return (
+          <Pressable
+            onPress={() => onPressChannel(channel)}
+            onLongPress={onLongPressChannel}
+            delayLongPress={DEFAULT_LONG_PRESS_DELAY}
+          >
+            <GroupChannelPreview
+              customCover={<ChannelCover channel={channel} size={56} />}
+              coverUrl={channel.coverUrl}
+              title={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE(currentUser?.userId ?? '', channel)}
+              titleCaption={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_TITLE_CAPTION(channel)}
+              body={STRINGS.GROUP_CHANNEL_LIST.CHANNEL_PREVIEW_BODY(channel)}
+              badgeCount={channel.unreadMessageCount}
+              bodyIcon={
+                channel.lastMessage?.isFileMessage()
+                  ? iconMapper[getFileType(channel.lastMessage.type || getFileExtension(channel.lastMessage.name))]
+                  : undefined
+              }
+              frozen={channel.isFrozen}
+              notificationOff={channel.myPushTriggerOption === 'off'}
+              memberCount={channel.memberCount > 2 ? channel.memberCount : undefined}
+            />
+          </Pressable>
+        );
+      },
+      [STRINGS, onPressChannel, currentUser?.userId],
+    );
+
+    if (!currentUser) {
+      Logger.warn('Cannot render GroupChannelListFragment, User is not connected');
+      return null;
+    }
+
+    return (
+      <GroupChannelListModule.Provider>
+        <GroupChannelListModule.Header />
+        <StatusComposition loading={loading} LoadingComponent={<GroupChannelListModule.StatusLoading />}>
+          <GroupChannelListModule.List
+            menuItemCreator={menuItemCreator}
+            renderGroupChannelPreview={_renderGroupChannelPreview}
+            groupChannels={groupChannels}
+            onLoadNext={next}
+            flatListProps={{
+              ListEmptyComponent: <GroupChannelListModule.StatusEmpty />,
+              contentContainerStyle: { flexGrow: 1 },
+              ...flatListProps,
+            }}
+          />
+        </StatusComposition>
+        <GroupChannelListModule.TypeSelector
+          // NOTE: not included in first iteration
+          skipTypeSelection
+          Header={TypeSelectorHeader}
+          onSelectType={onPressCreateChannel}
+        />
+      </GroupChannelListModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelListFragment;

package/src/fragments/createGroupChannelMembersFragment.tsx

@@ -0,0 +1,112 @@
+import React, { useCallback } from 'react';
+
+import { useActiveGroupChannel, useChannelHandler } from '@sendbird/uikit-chat-hooks';
+import { Icon } from '@sendbird/uikit-react-native-foundation';
+import type { SendbirdMember } from '@sendbird/uikit-utils';
+import { useForceUpdate, useUniqId } from '@sendbird/uikit-utils';
+
+import UserActionBar from '../components/UserActionBar';
+import type { GroupChannelMembersFragment } from '../domain/groupChannelUserList/types';
+import createUserListModule from '../domain/userList/module/createUserListModule';
+import type { UserListModule } from '../domain/userList/types';
+import { useLocalization, useSendbirdChat } from '../hooks/useContext';
+
+const noop = () => '';
+const name = 'createGroupChannelMembersFragment';
+const createGroupChannelMembersFragment = (
+  initModule?: Partial<UserListModule<SendbirdMember>>,
+): GroupChannelMembersFragment<SendbirdMember> => {
+  const UserListModule = createUserListModule<SendbirdMember>(initModule);
+
+  return ({ channel, onPressHeaderLeft, onPressHeaderRight, renderUser }) => {
+    const uniqId = useUniqId(name);
+    const forceUpdate = useForceUpdate();
+    const { sdk, currentUser } = useSendbirdChat();
+    const { activeChannel } = useActiveGroupChannel(sdk, channel);
+
+    const { STRINGS } = useLocalization();
+
+    useChannelHandler(
+      sdk,
+      `${name}_${uniqId}`,
+      {
+        onUserEntered(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onUserLeft(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onUserJoined(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onUserUnmuted(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onUserUnbanned(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onUserBanned(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onUserMuted(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onChannelMemberCountChanged(channels) {
+          if (channels.find((c) => c.url === channel.url)) forceUpdate();
+        },
+        onChannelChanged(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onChannelFrozen(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+        onChannelUnfrozen(channel) {
+          if (channel.url === activeChannel.url) forceUpdate();
+        },
+      },
+      [activeChannel],
+    );
+
+    const _renderUser: NonNullable<typeof renderUser> = useCallback(
+      (user, selectedUsers, setSelectedUsers) => {
+        if (renderUser) return renderUser(user, selectedUsers, setSelectedUsers);
+
+        return (
+          <UserActionBar
+            muted={user.isMuted}
+            uri={user.profileUrl}
+            label={user.role === 'operator' ? STRINGS.GROUP_CHANNEL_MEMBERS.USER_BAR_OPERATOR : ''}
+            name={
+              (user.nickname || STRINGS.LABELS.USER_NO_NAME) +
+              (user.userId === currentUser?.userId ? STRINGS.GROUP_CHANNEL_MEMBERS.USER_BAR_ME_POSTFIX : '')
+            }
+            disabled={user.userId === currentUser?.userId}
+            // TODO: implement ban/mute actions, use channel.members with handlers instead member query
+            onPressActionMenu={undefined}
+          />
+        );
+      },
+      [renderUser],
+    );
+
+    return (
+      <UserListModule.Provider headerRight={noop} headerTitle={STRINGS.GROUP_CHANNEL_MEMBERS.HEADER_TITLE}>
+        <UserListModule.Header
+          shouldActivateHeaderRight={() => true}
+          onPressHeaderLeft={onPressHeaderLeft}
+          right={<Icon icon={'plus'} />}
+          onPressHeaderRight={async () => onPressHeaderRight()}
+        />
+
+        <UserListModule.List
+          users={activeChannel.members}
+          renderUser={_renderUser}
+          onLoadNext={async () => void 0}
+          ListEmptyComponent={<UserListModule.StatusEmpty />}
+        />
+      </UserListModule.Provider>
+    );
+  };
+};
+
+export default createGroupChannelMembersFragment;